styling updates

* update styling for mixed state * move multiselect/advanced toggle into same row as plugin description and add tooltip * use same icon as in data menu to toggle multiselect
spacetelescope · May 25, 2022 · 6819ecb · 6819ecb
1 parent 393b42f
commit 6819ecb
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 13 deletions.
diff --git a/jdaviz/components/glue_state_sync_wrapper.vue b/jdaviz/components/glue_state_sync_wrapper.vue
@@ -20,13 +20,12 @@
                margin-left: -24px;
                margin-right: -24px;
                cursor: pointer;
-               border: 1px solid rgb(21 58 75);
-               border-radius: 4px;
+               border: 2px solid #00617E;
                background-color: rgb(245 245 245 / 70%);">
         <v-icon
           large 
           dark
-          color="rgb(21 58 75 / 70%)"
+          color="#00617E"
           style="height: 100%"
           >mdi-link-off</v-icon>
       </div> 

diff --git a/jdaviz/components/tooltip.vue b/jdaviz/components/tooltip.vue
@@ -56,6 +56,7 @@ const tooltips = {
   'table-next': 'Select next row in table',
   'table-play-pause-toggle': 'Toggle cycling through rows of table',
   'table-play-pause-delay': 'Set delay before cycling to next entry',
+  'plugin-plot-options-multiselect-toggle': 'Toggle between simple (single-select) and advanced (multiselect)',
   'plugin-plot-options-mixed-state': 'Current values are mixed, click to sync at shown value',
   'plugin-model-fitting-add-model': 'Create model component',
   'plugin-model-fitting-param-fixed': 'Check the box to freeze parameter value',

diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.py b/jdaviz/configs/default/plugins/plot_options/plot_options.py
@@ -1,11 +1,15 @@
+import os
+
 from traitlets import Any, Dict, Float, Bool, Int, List, Unicode
 from ipywidgets.widgets import widget_serialization
 
 from glue.viewers.profile.state import ProfileViewerState, ProfileLayerState
+from glue_jupyter.common.toolbar_vuetify import read_icon
 
 from jdaviz.core.registries import tray_registry
 from jdaviz.core.template_mixin import (TemplateMixin, ViewerSelect, LayerSelect,
                                         PlotOptionsSyncState)
+from jdaviz.core.tools import ICON_DIR
 
 __all__ = ['PlotOptions']
 
@@ -97,6 +101,9 @@ class PlotOptions(TemplateMixin):
     show_axes_value = Bool().tag(sync=True)
     show_axes_sync = Dict().tag(sync=True)
 
+    icon_radialtocheck = Unicode(read_icon(os.path.join(ICON_DIR, 'radialtocheck.svg'), 'svg+xml')).tag(sync=True)  # noqa
+    icon_checktoradial = Unicode(read_icon(os.path.join(ICON_DIR, 'checktoradial.svg'), 'svg+xml')).tag(sync=True)  # noqa
+
     def __init__(self, *args, **kwargs):
         super().__init__(*args, **kwargs)
         self.viewer = ViewerSelect(self, 'viewer_items', 'viewer_selected', 'multiselect')

diff --git a/jdaviz/configs/default/plugins/plot_options/plot_options.vue b/jdaviz/configs/default/plugins/plot_options/plot_options.vue
@@ -1,16 +1,20 @@
 <template>
   <j-tray-plugin>
     <v-row>
-      <j-docs-link :link="'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#plot-options'">Viewer and data/layer options.</j-docs-link>
-    </v-row>
-
-    <v-row justify="end">
-      <v-btn
-        icon
-        @click="() => {multiselect = !multiselect}"
-      >
-        <v-icon>{{multiselect ? 'mdi-checkbox-multiple-marked-outline' : 'mdi-checkbox-marked-outline'}}</v-icon>
-      </v-btn>
+      <div style="width: calc(100% - 32px)">
+        <j-docs-link :link="'https://jdaviz.readthedocs.io/en/'+vdocs+'/'+config+'/plugins.html#plot-options'">Viewer and data/layer options.</j-docs-link>
+      </div>
+      <div style="width: 32px">
+        <j-tooltip tipid='plugin-plot-options-multiselect-toggle'>
+          <v-btn
+            icon
+            style="opacity: 0.7"
+            @click="() => {multiselect = !multiselect}"
+          >
+            <img :src="multiselect ? icon_checktoradial : icon_radialtocheck" width="24"/>
+          </v-btn>
+        </j-tooltip>
+      </div>
     </v-row>
 
     <plugin-viewer-select