Mercurial > gemma

changeset 1267:29036b3916ab

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
several UI improvements changed accent color (active buttons, etc... now same as in administration) colored box headers (for better look n feel and to reduce header size even more -> color contrast instead of big font-size) button colors changed from black to dark grey added transparency to boxes and buttons
author Markus Kottlaender <markus@intevation.de>
date Wed, 21 Nov 2018 15:05:09 +0100
parents c7db47e5f71d
children aca692e73028
files client/src/application/Contextbox.vue client/src/application/Search.vue client/src/application/Sidebar.vue client/src/application/assets/application.sass client/src/bottlenecks/Bottlenecks.vue client/src/fairway/Surveys.vue client/src/identify/Identify.vue client/src/imports/Imports.vue client/src/layers/Layers.vue client/src/pdftool/Pdftool.vue client/src/staging/Staging.vue client/src/toolbar/Toolbar.vue client/src/zoom/zoom.vue
diffstat 13 files changed, 41 insertions(+), 17 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/application/Contextbox.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/application/Contextbox.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -37,10 +37,12 @@
     ...mapState("application", ["showSearchbarLastState", "showInContextBox"]),
     style() {
       return [
-        "ui-element shadow-xs contextbox pt-3 ml-3 rounded-bottom border-top",
+        "ui-element shadow-xs contextbox ml-3",
         {
           contextboxcollapsed: !this.showInContextBox,
-          contextboxextended: this.showInContextBox
+          contextboxextended: this.showInContextBox,
+          "rounded-bottom": this.showInContextBox !== "imports",
+          rounded: this.showInContextBox === "imports"
         }
       ];
     }
@@ -82,6 +84,7 @@
   height: $icon-width
   width: $icon-height
   display: none
+  color: #fff
 
 .contextboxextended .close-contextbox
   display: block
--- a/client/src/application/Search.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/application/Search.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -26,6 +26,7 @@
 <style lang="sass" scoped>
   .searchcontainer
     height: $icon-height
+    opacity: $slight-transparent
 
   .searchbar-expanded
     min-width: 600px
@@ -53,6 +54,10 @@
     height: $icon-height
     width: $icon-width
 
+  .input-group-prepend
+    .fa-search
+      color: #666
+
   .searchresults
     margin-left: -31px
     max-height: 20rem
--- a/client/src/application/Sidebar.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/application/Sidebar.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -157,12 +157,14 @@
   width: $icon-width
   top: 0
   left: 0
+  color: #666
 
 .router-link-exact-active
   background-color: #f2f2f2
 
 .navicon
   margin-right: $small-offset
+  color: #666
 
 .menu
   padding-top: $small-offset
--- a/client/src/application/assets/application.sass	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/application/assets/application.sass	Wed Nov 21 15:05:09 2018 +0100
@@ -26,6 +26,10 @@
 $transition-fast: 0.3s
 $x-large-offset: 3rem
 $xx-large-offset: 5rem
+$color-info: #17a2b8
+
+a
+  color: $color-info
 
 .w-90
   width: 90%
--- a/client/src/bottlenecks/Bottlenecks.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/bottlenecks/Bottlenecks.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -1,7 +1,9 @@
 <template>
     <div>
-        <h4>Bottlenecks</h4>
-        <hr class="mb-0">
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+          <i class="fa fa-ship mr-2"></i>
+          Bottlenecks
+        </h6>
         <div class="row p-2 text-left small">
             <div class="col-5">
                 <a href="#" @click="sortBy('name')" class="sort-link">Name</a>
--- a/client/src/fairway/Surveys.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/fairway/Surveys.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -1,10 +1,10 @@
 <template>
     <div class="box expanded ui-element rounded bg-white ml-auto mr-3 mb-3 text-nowrap" v-if="selectedBottleneck && surveys && !selectedSurvey">
         <div style="width: 15rem">
-            <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
               {{ selectedBottleneck }}
               <i class="fa fa-times ml-auto" @click="$store.dispatch('fairwayprofile/clearSelection');"></i>
-            </h5>
+            </h6>
             <div class="p-3">
                 <div
                     v-for="(survey, i) of surveys"
--- a/client/src/identify/Identify.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/identify/Identify.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -1,11 +1,11 @@
 <template>
     <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showIdentify }]">
         <div style="width: 20rem">
-            <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
               <i class="fa fa-info mr-2"></i>
               Identified
               <i class="fa fa-times ml-auto" @click="$store.commit('application/showIdentify', false)"></i>
-            </h5>
+            </h6>
             <div class="d-flex flex-column features p-3 flex-grow-1 text-left">
                 <div v-if="currentMeasurement">
                     <b>
--- a/client/src/imports/Imports.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/imports/Imports.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -1,6 +1,9 @@
 <template>
     <div>
-        <h4>Import soundingresults</h4>
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+          <i class="fa fa-upload mr-2"></i>
+          Import Soundingresults
+        </h6>
         <hr class="mr-auto ml-auto mb-0 w-90">
         <div v-if="editState" class="ml-auto mr-auto mt-4 w-90">
             <div class="d-flex flex-row input-group mb-4">
--- a/client/src/layers/Layers.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/layers/Layers.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -1,11 +1,11 @@
 <template>
     <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showLayers }]">
         <div style="width: 20rem">
-            <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
               <i class="fa fa-th-list mr-2"></i>
               Layers
               <i class="fa fa-times ml-auto" @click="$store.commit('application/showLayers', false)"></i>
-            </h5>
+            </h6>
             <div class="d-flex flex-column p-3 small">
                 <Layerselect
                     v-for="(layer, index) in layersForLegend"
--- a/client/src/pdftool/Pdftool.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/pdftool/Pdftool.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -1,14 +1,14 @@
 <template>
     <div :class="['box ui-element rounded bg-white mb-auto text-nowrap', { expanded: showPdfTool }]">
         <div style="width: 15rem">
-            <h5 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
+            <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
               <i class="fa fa-file-pdf-o mr-2"></i>
               Generate PDF
               <i class="fa fa-times ml-auto" @click="$store.commit('application/showPdfTool', false)"></i>
-            </h5>
+            </h6>
             <div class="p-3">
                 <b>Chose format:</b>
-                <select v-model="form.format" class="d-block w-100">
+                <select v-model="form.format" class="form-control d-block w-100">
                     <option>landscape</option>
                     <option>portrait</option>
                 </select>
--- a/client/src/staging/Staging.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/staging/Staging.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -1,7 +1,9 @@
 <template>
     <div>
-        <h4>Staging area</h4>
-        <hr>
+        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center bg-info text-white">
+          <i class="fa fa-list-ol mr-2"></i>
+          Staging Area
+        </h6>
         <table class="table mb-0">
             <thead>
                 <tr>
--- a/client/src/toolbar/Toolbar.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/toolbar/Toolbar.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -28,6 +28,8 @@
   max-height: 100%
 
 .toolbar-button
+  opacity: $slight-transparent
+  color: #666
   height: $icon-width
   width: $icon-height
   align-items: center
@@ -40,7 +42,7 @@
   z-index: 2
   pointer-events: auto
   .inverted
-    color: #17a2b8
+    color: $color-info
   .grey
     color: #ddd
 </style>
--- a/client/src/zoom/zoom.vue	Wed Nov 21 13:53:38 2018 +0100
+++ b/client/src/zoom/zoom.vue	Wed Nov 21 15:05:09 2018 +0100
@@ -20,6 +20,7 @@
   min-width: $icon-width
   z-index: 2
   outline: none
+  color: #666
 </style>
 <script>
 import { mapState } from "vuex";