Merge pull request #252 from mapbox/fields-revamp

Fields revamp
mapbox · Mar 27, 2014 · e0b699a · e0b699a
2 parents cc759c0 + 3c08b10
commit e0b699a
Show file tree

Hide file tree

Showing 8 changed files with 92 additions and 80 deletions.
diff --git a/app/app.css b/app/app.css
@@ -516,7 +516,7 @@ a.project:hover { background: rgba(255,255,255,.15);}
   }
 
 /* Data menu */
-#layers .layer { border-bottom-color: rgba(0,0,0,.2);}
+#layers .layer { border-color: rgba(0,0,0,.2);}
 #layers .layer:hover { background: rgba(0,0,0,.05);}
 #layers .data-y,
 #layers .data-n { display:none; }
@@ -528,7 +528,7 @@ a.project:hover { background: rgba(255,255,255,.15);}
 
 #layers * { border-color: rgba(0,0,0,.2); }
 #layers .field-key {
-  padding:2px 5px;
+  padding:0 5px;
   border-radius: 3px;
   background: rgba(241, 240, 117, .75);
   color: rgba(0,0,0,.75);

diff --git a/app/source.css b/app/source.css
@@ -1,21 +1,23 @@
+.leaflet-popup .leaflet-popup-content { padding: 10px 10px 5px;}
 .leaflet-popup .leaflet-popup-content .xray-listing {
   width:240px;
   /* leaflet overrides */
-  font-size: 10px;
+  font-size: 11px;
   line-height: 20px;
-  letter-spacing: 0;
-}
-.xray-listing:first-child { border-top: 1px solid rgba(0,0,0,.2);}
-.dark .xray-listing,
-.dark .xray-listing div {
-  border-color: rgba(0,0,0,.2);
+  font-family:'Open Sans', sans-serif;
 }
 
 .source-menu { box-shadow: rgba(0,0,0,0.1) -2px 0px 0px; }
 
-.leaflet-popup .xray { color: #f1f075;}
-
-.layer-label { width: 80px;}
+.leaflet-popup .xray,
+.editor .field-key {
+  padding:0 5px;
+  border-radius: 3px;
+  background: rgba(241, 240, 117, .75);
+  color: rgba(0,0,0,.75);
+  vertical-align: top;
+  font-family:'Open Sans', sans-serif;
+  }
 
 /* Conf pane */
 .editor > div.conf { display:block; }

diff --git a/templates/layerfields._ b/templates/layerfields._
@@ -1,8 +1,19 @@
 <fieldset>
+<section class='keyline-bottom pad1x pad1y small clearfix'>
+  <label class='inline col3 field pad1x clearfix'>Name</label>
+  <label class='inline pad1x col9'>Set description <em>(useful when inspecting data for styling)</em></label>
+</section>
 <% _(obj).each(function(helptext, field) { %>
-<section class='clearfix pad2x pad1y keyline-bottom'><!--
-  --><label class='pad1y col3 inline'><%= field %></label><!--
-  --><input class='col9' name='fields-<%=field%>' type='text' value='<%=_(helptext).escape()%>' />
+<section class='keyline-bottom pad1 clearfix small'>
+  <div class='pad1x pad0y col3'>
+    <label for='fields-<%=field%>' title='<%= field %>' class='truncate field-key col12 inline field'><%= field %></label>
+  </div>
+  <div class='col9 pad1x'>
+    <input class='small short stretch' id='fields-<%=field%>' name='fields-<%=field%>' type='text' value='<%=_(helptext).escape()%>' />
+  </div>
 </section>
 <% }); %>
-</fieldset>
+<section class='pad2'>
+  <a href='#' class='quiet button submit margin6 col6'>Done</a>
+</section>
+</fieldset>
diff --git a/templates/layeritem._ b/templates/layeritem._
@@ -2,22 +2,44 @@
 var inspector = obj._prefs && obj._prefs.inspector && obj._prefs.inspector === obj.id;
 var disabled = obj._prefs && obj._prefs.disabled && obj._prefs.disabled.indexOf(obj.id) >= 0;
 %>
-<div id='<%=obj.id%>' class='contain keyline-bottom layer js-layer col12 small quiet'>
-  <a class='js-reset-mode block pad0y pad1x quiet' href='#layers-<%=obj.id%>'>
+<div id='<%=obj.id%>' class='contain keyline-bottom clearfix layer js-layer col12 small quiet'>
+  <a class='<%=(obj.Datasource && obj.Datasource.type) ? "js-reset-mode" : "js-tab" %> block col8 contain pad0y pad1x quiet' href='#layers-<%=obj.id%>'>
     <%=obj.id%>
     <% if (obj.Datasource && obj.Datasource.type) { %>
     <span><code><%= (obj.Datasource.type) %></code></span>
     <% } %>
+    <% if ('minzoom' && 'maxzoom' in obj) { %>
+    <div class="center col3 pin-right pad1x">
+      <span class="inline zooms pad0 micro"><%= obj.minzoom %>-<%= obj.maxzoom %></span>
+    </div>
+    <% } %>
   </a>
-  <div class='center pin-right small'>
-    <span class='pad0 inline layer-label'><a href='#refresh' class='icon xrayinspector inline round fill-darken1 search <%= inspector ? 'active' : '' %>'></a></span><!--
-    --><span class='pad0 inline layer-label'><a href='#refresh' class='icon xrayswatch x inline round fill-darken1
-    <%=disabled ? 'disabled' : ''%>
-    <%=obj.geometry||'unknown'%>' style='background-color:<%=this.xraycolor(obj.id)%>'></a></span><!--
-  --><% if (obj.Datasource && obj.Datasource.type) { %><span class='pad0 inline layer-label'><a href='#' id='del-<%=obj.id%>' class='inline round icon trash js-delete'></a></span><!--
---><% } %></div>
-  <small class='description'><%=obj.description||'No description.'%></small>
-  <% _(obj.help||{}).each(function(desc,name) { %>
-  <small class='field'><code><%=name%></code><%=desc||'No description.'%></small>
-  <% }); %>
+  <div class='center col6 pin-right small'>
+    <% if (obj.Datasource && obj.Datasource.type) { %>
+      <span class='pad0 col4 fr center layer-label'>
+        <a href='#' id='del-<%=obj.id%>' class='inline round icon trash js-delete'></a>
+      </span>
+    <% } %>
+    <span class='pad0 col4 fr center layer-label'>
+      <a href='#refresh' class='icon xrayswatch x inline round fill-darken1 <%=disabled ? 'disabled' : ''%> <%=obj.geometry||'unknown'%>' style='background-color:<%=this.xraycolor(obj.id)%>'></a>
+    </span>
+    <span class='pad0 col4 fr layer-label center'>
+      <a href='#refresh' class='icon xrayinspector inline round fill-darken1 search <%= inspector ? 'active' : '' %>'></a>
+    </span>
+  </div>
+
+  <div class='col12 fl description'>
+    <div class='keyline-top truncate keyline-bottom col12 pad1'><%=obj.description||'No description.'%></div>
+    <% if ('fields' in obj) { %>
+    <div class='small pad0y'>
+      <% _(obj.fields||{}).each(function(desc,name) { %>
+      <div class='field pad1x space-bottom0 clearfix'>
+        <span class='field-key break-word col3'><%=name%> </span>
+        <span class='quiet col9 pad1x'><%=desc||'No description.'%></span>
+      </div>
+      <% }); %>
+    </div>
+    <% } %>
+  </div>
+
 </div>
diff --git a/templates/layerremote._ b/templates/layerremote._
diff --git a/templates/source._ b/templates/source._
@@ -132,32 +132,34 @@ revlayers.reverse();
     <% } else { %>
     <div class='pin-topleft pad0'><a href='#addlayer' class='button quiet short icon plus'>Layers</a></div>
     <% } %>
-    <div class='center pin-right strong small'>
-      <span class='pad0x pad1y keyline-left inline layer-label'>Inspect</span><!--
-      --><span class='pad0x pad1y inline keyline-left layer-label'>Visibility</span><!--
-      --><% if (!remote) { %><!--
-      --><span class='pad0x pad1y keyline-left inline layer-label'>Delete</span><!--
-      --><% } %>
+    <div class='center pin-right col6 strong small'>
+      <% if (!remote) { %>
+      <span class='pad0x pad1y keyline-left col4 fr layer-label'>Delete</span>
+      <% } %>
+      <span class='pad0x pad1y col4 keyline-left fr layer-label'>Visibility</span>
+      <span class='pad0x pad1y keyline-left col4 fr layer-label'>Inspect</span>
+      <% if (remote) { %>
+      <span class='pad0x pad1y keyline-left col4 fr layer-label'>Zoom</span>
+      <% } %>
     </div>
   </nav>
   <div class='js-menu-content pin-left col12 top1 scroll-styled'>
-    <% _(revlayers).each(function(l) { %>
-      <% print(this.layeritem(_({_prefs:source._prefs}).extend(l))); %>
-    <% }.bind(this)); %>
+    <% _(revlayers).each(function(l) {
+      print(this.layeritem(_({_prefs:source._prefs}).extend(l)));
+    }.bind(this)); %>
   </div>
 </div>
+
 <div class='z10' id='editor'>
-<% _(revlayers).each(function(l) {
-  if (remote) {
-    print(this['layerremote'](l));
-  } else {
+<% if (!remote) {
+  _(revlayers).each(function(l) {
     var type = (l.Datasource && l.Datasource.type);
     if (this['layer' + type]) print(this['layer' + type](_({
         tm: tm,
         vt: source.vector_layers.filter(function(v) { return v.id === l.id })[0]
     }).extend(l)));
-  }
-}.bind(this)); %>
+  }.bind(this));
+} %>
 </div>
 
 <% if (!remote) print(this.modalbrowser({
@@ -303,6 +305,7 @@ Editor.prototype.events = {
   'click .layer .xrayinspector': 'toggleinspector',
   'click .js-browsefile': 'browsefile',
   'click #settings .js-tab': 'tabbed',
+  'click .layer .js-tab': 'tabbedFields',
   'click #settings .js-ref-delete': 'delstyle',
   'submit #addlayer': 'addlayer',
   'submit #addmapbox': 'addmapbox',
@@ -349,9 +352,15 @@ Editor.prototype.user = function() {
 };
 Editor.prototype.zoomin = function(out) {
   map.setZoom(map.getZoom()+1);
+  return false;
 };
 Editor.prototype.zoomout = function() {
   map.setZoom(map.getZoom()-1);
+  return false;
+};
+Editor.prototype.tabbedFields = function(ev) {
+  $(ev.currentTarget).parent('.layer').addClass('active').siblings('.layer').removeClass('active');
+  return false;
 };
 Editor.prototype.togglePane = function(name) {
   var loc = location.href;

diff --git a/templates/sourcelayers._ b/templates/sourcelayers._
@@ -38,7 +38,7 @@ with no sources. Once vector tile compositing is available revisit.
     <div class='pad1y'>
       <% _(l.fields||{}).each(function(desc,name) { %>
       <div class='field pad1x pad0y clearfix'>
-        <span class='field-key col4'><%=name%> </span>
+        <span class='field-key break-word col4'><%=name%> </span>
         <span class='quiet col8 pad1x'><%=desc||'No description.'%></span>
       </div>
       <% }); %>

diff --git a/templates/xraytemplate._ b/templates/xraytemplate._
@@ -1,9 +1,9 @@
 {{#__full__}}
 <% _(obj).each(function(field) { %>
 {{#<%=field%>}}
-<div class='clearfix tiny code xray-listing keyline-left keyline-right keyline-bottom'>
-    <div class='pad0y pad1x col4 xray'><%=field%></div>
-    <div class='quiet pad0y pad1x keyline-left col8'>{{<%=field%>}}</div>
+<div class='clearfix space-bottom0 xray-listing'>
+    <div class='col4 break-word xray'><%=field%></div>
+    <div class='quiet pad1x col8'>{{<%=field%>}}</div>
 </div>
 {{/<%=field%>}}
 <% }); %>