stubs out map card component, re: #4670

archesproject · Apr 24, 2019 · 38aed98 · 38aed98
1 parent 32ba1c2
commit 38aed98
Show file tree

Hide file tree

Showing 4 changed files with 97 additions and 12 deletions.
diff --git a/arches/app/media/css/arches.css b/arches/app/media/css/arches.css
@@ -500,7 +500,6 @@ input[type="checkbox"] {
 }
 
 .workflow-step-body {
-    padding: 10px;
     background-color: #eee;
     height: 100%;
 }
@@ -545,6 +544,39 @@ input[type="checkbox"] {
     margin-top: -30px;
 }
 
+.map-card-wrapper {
+    height: 100%;
+    position: relative;
+}
+
+.map-card-container {
+    height: 100%;
+    margin-right: 92px;
+}
+
+.map-card-sidebar {
+    position:absolute;
+    right: 0;
+    height: 100%;
+    width: 92px;
+    background-color: rgb(247, 247, 247);
+}
+
+.map-card-sidebar-tab {
+    color: rgb(33, 62, 95);
+    min-height: 86px;
+    padding: 16px;
+    text-align: center;
+    font-size: 1.1em;
+    border-bottom: 1px solid rgb(216, 216, 216);
+    border-left: 1px solid rgb(216, 216, 216);
+}
+.map-card-sidebar-tab i {
+    font-size: 1.7em;
+    display: block;
+    padding-bottom: 4px;
+}
+
 #map-settings {
     position: relative;
     margin: -40px -35px 10px -20px;

diff --git a/arches/app/media/js/views/components/cards/map.js b/arches/app/media/js/views/components/cards/map.js
@@ -0,0 +1,28 @@
+define([
+    'arches',
+    'knockout',
+    'viewmodels/card-component'
+], function(arches, ko, CardComponentViewModel) {
+    return ko.components.register('map-card', {
+        viewModel: function(params) {
+            var layers = [];
+            arches.mapLayers.forEach(function(layer) {
+                if (layer.addtomap) {
+                    layers = layers.concat(layer.layer_definitions);
+                }
+            });
+            this.mapStyle = {
+                "version": 8,
+                "sources": arches.mapSources,
+                "sprite": arches.mapboxSprites,
+                "glyphs": arches.mapboxGlyphs,
+                "layers": layers
+            };
+
+            CardComponentViewModel.apply(this, [params]);
+        },
+        template: {
+            require: 'text!templates/views/components/cards/map.htm'
+        }
+    });
+});
diff --git a/arches/app/templates/views/components/cards/map.htm b/arches/app/templates/views/components/cards/map.htm
@@ -0,0 +1,25 @@
+{% extends "views/components/cards/default.htm" %}
+{% load i18n %}
+
+{% block form %}
+<div class="map-card-wrapper">
+    <div class="map-card-sidebar">
+        <div class="map-card-sidebar-tab">
+            <i class="fa fa-list-alt"></i>
+            Legend
+        </div>
+        <div class="map-card-sidebar-tab">
+            <i class="fa fa-globe"></i>
+            Basemap
+        </div>
+        <div class="map-card-sidebar-tab">
+            <i class="fa fa-list"></i>
+            Overlays
+        </div>
+    </div>
+    <div class="map-card-container" data-bind="mapboxgl: {
+            mapOptions: { style: mapStyle }
+        }">
+    </div>
+</div>
+{% endblock form %}
diff --git a/arches/app/templates/views/components/workflows/new-tile-step.htm b/arches/app/templates/views/components/workflows/new-tile-step.htm
@@ -1,13 +1,13 @@
 <!-- ko if: tile() && card() -->
-<div data-bind="component: {
-    name: cardComponentLookup[card().model.component_id()].componentname,
-    params: {
-        card: card(),
-        tile: tile(),
-        provisionalTileViewModel: provisionalTileViewModel,
-        reviewer: reviewer,
-        loading: loading,
-        form: $data
-    }
-}"></div>
+    <!-- ko component: {
+        name: cardComponentLookup[card().model.component_id()].componentname,
+        params: {
+            card: card(),
+            tile: tile(),
+            provisionalTileViewModel: provisionalTileViewModel,
+            reviewer: reviewer,
+            loading: loading,
+            form: $data
+        }
+    } --><!-- /ko -->
 <!-- /ko -->