Added Darkmode for buttons

sfcta · Jan 2, 2022 · d3db3c8 · d3db3c8
1 parent 21ab2c4
commit d3db3c8
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/src/assets/images/sw_minus_dm.jpg b/src/assets/images/sw_minus_dm.jpg
diff --git a/src/assets/images/sw_north_arrow_dm.png b/src/assets/images/sw_north_arrow_dm.png
diff --git a/src/assets/images/sw_plus_dm.jpg b/src/assets/images/sw_plus_dm.jpg
diff --git a/src/components/DrawingTool/DrawingTool.vue b/src/components/DrawingTool/DrawingTool.vue
@@ -3,7 +3,11 @@
   .map(:id="mapID" v-show="showShapeDrawer")
 
   .map-actions
-    button.button.draw-button.is-tiny(title="Draw" @click="toggleShapeDrawer"
+    button.button.draw-button.is-tiny(v-if="isDark" title="Draw" @click="toggleShapeDrawer"
+      :class="{'is-drawing': showShapeDrawer}" :style="{background: `rgb(43,60,78)`}"
+    )
+      img(src="./images/draw-icon-dm.png" width=16)
+    button.button.draw-button.is-tiny(v-else title="Draw" @click="toggleShapeDrawer"
       :class="{'is-drawing': showShapeDrawer}"
     )
       img(src="./images/draw-icon.png" width=16)

diff --git a/src/components/ZoomButtons.vue b/src/components/ZoomButtons.vue
@@ -5,20 +5,32 @@
 
   .zoom-buttons
     .button-single.button-top
-      img.img-button(
+      img.img-button(v-if="globalState.isDarkMode"
+          :title="$t('in')"
+          @click="zoomIn()"
+          src="@/assets/images/sw_plus_dm.jpg")
+      img.img-button(v-else
           :title="$t('in')"
           @click="zoomIn()"
           src="@/assets/images/sw_plus.jpg")
     .button-single
-      img.img-button(@click="zoomOut()"
+      img.img-button(v-if="globalState.isDarkMode" @click="zoomOut()"
+          :title="$t('out')"
+          src="@/assets/images/sw_minus_dm.jpg")
+      img.img-button(v-else @click="zoomOut()"
           :title="$t('out')"
           src="@/assets/images/sw_minus.jpg")
     .button-single.button-bottom
-      img.img-button(@click="setNorth()"
+      img.img-button(v-if="globalState.isDarkMode" @click="setNorth()"
+          :title="$t('center')"
+          src="@/assets/images/sw_north_arrow_dm.png"
+          :style="{transform: `rotate(${arrowRotation}deg)`, background: `rgb(43,60,78)`}"
+      )
+      img.img-button(v-else @click="setNorth()"
           :title="$t('center')"
           src="@/assets/images/sw_north_arrow.png"
           :style="{transform: `rotate(${arrowRotation}deg)`}"
-    )
+      )
 
 
 </template>
@@ -139,6 +151,7 @@ export default class VueComponent extends Vue {
   border-bottom-width: 0px;
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
+  margin-bottom: -1px;
 }
 
 .button-bottom {