custom API icons

Co-authored-by: Jennifer Kotler <jkotler@stsci.edu>

jdaviz/app.py

@@ -232,7 +232,9 @@ class ApplicationState(State):
         'radialtocheck': read_icon(os.path.join(ICON_DIR, 'radialtocheck.svg'), 'svg+xml'),
         'checktoradial': read_icon(os.path.join(ICON_DIR, 'checktoradial.svg'), 'svg+xml'),
         'nuer': read_icon(os.path.join(ICON_DIR, 'right-east.svg'), 'svg+xml'),
-        'nuel': read_icon(os.path.join(ICON_DIR, 'left-east.svg'), 'svg+xml')
+        'nuel': read_icon(os.path.join(ICON_DIR, 'left-east.svg'), 'svg+xml'),
+        'api': read_icon(os.path.join(ICON_DIR, 'api.svg'), 'svg+xml'),
+        'api-lock': read_icon(os.path.join(ICON_DIR, 'api_lock.svg'), 'svg+xml'),
     }, docstring="Custom application icons")
 
     viewer_icons = DictCallbackProperty({}, docstring="Indexed icons (numbers) for viewers across the app")  # noqa

jdaviz/app.vue

@@ -57,7 +57,7 @@
         </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons && checkNotebookContext()" tipid="app-api-hints">
           <v-btn icon @click="state.show_api_hints = !state.show_api_hints" :class="{active : state.show_api_hints}">
-            <v-icon medium style="padding-top: 2px">mdi-code-tags</v-icon>
+            <img :src="state.icons['api']" width="24" class="invert-if-dark" style="opacity: 1.0"/>
           </v-btn>
         </j-tooltip>
         <j-tooltip v-if="state.show_toolbar_buttons" tipid="app-snackbar-history">

jdaviz/components/data_menu_add.vue

@@ -66,6 +66,7 @@
         v-if="api_hints_enabled"
         :hover_api_hint.sync="hover_api_hint"
         :lock_hover_api_hint.sync="lock_hover_api_hint"
+        :icons="icons"
       />
     </v-list>
   </v-menu>
@@ -80,6 +81,6 @@ module.exports = {
         lock_hover_api_hint: false,
       }
     },
-  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled'],
+  props: ['dataset_items', 'subset_tools', 'loaded_n_data', 'api_hints_enabled', 'icons'],
 };
 </script>

jdaviz/components/hover_api_hint.vue

@@ -6,35 +6,29 @@
         {{ hover_api_hint }}
         </span>
     </v-list-item-content>
-    <v-list-item-action>
+    <v-list-item-action style="margin-right: -8px">
       <j-tooltip
         tooltipcontent="toggle whether API hints persist after hovering to allow for copying text"
       >
-        <v-badge
-          overlap
-          bottom
-          color="#007BA1"
-          :icon="lock_hover_api_hint ? 'mdi-lock-outline' : 'mdi-lock-open-outline'"
+        <v-btn
+          small
+          text
+          width="24"
+          :style="lock_hover_api_hint ? 'background-color: #c7510996 !important' : null"
+          @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
         >
-          <v-btn
-            icon
-            small
-            @click="(e) => {e.stopPropagation(); $emit('update:lock_hover_api_hint', !lock_hover_api_hint); $emit('update:hover_api_hint', '')}"
-          >
-            <v-icon
-              :color="lock_hover_api_hint ? '#007BA1' : null"
-            >
-              mdi-code-tags
-            </v-icon>
-          </v-btn>
-        </v-badge>
+          <img
+            :src="icons['api-lock']"
+            width="20"
+            class="invert-if-dark"/>
+        </v-btn>
       </j-tooltip>
     </v-list-item-action>
   </v-list-item>
 </template>
 
 <script>
   module.exports = {
-    props: ['hover_api_hint', 'lock_hover_api_hint'],
+    props: ['hover_api_hint', 'lock_hover_api_hint', 'icons'],
   };
 </script>

jdaviz/configs/default/plugins/data_menu/data_menu.vue

@@ -141,6 +141,7 @@
                   :subset_tools="subset_tools"
                   :loaded_n_data="loaded_n_data"
                   :api_hints_enabled="api_hints_enabled"
+                  :icons="icons"
                   @add-data="(data_label) => {add_data_to_viewer({data_label: data_label})}"
                   @create-subset="(subset_type) => {create_subset({subset_type: subset_type}); data_menu_open = false}"
                 >
@@ -208,6 +209,7 @@
               v-if="api_hints_enabled" 
               :hover_api_hint.sync="hover_api_hint" 
               :lock_hover_api_hint.sync="lock_hover_api_hint" 
+              :icons="icons"
             /> 
             <v-list-item class="dm-footer" v-if="loaded_n_data > 0">
               <v-list-item-content style="display: inline-block">