update style guide for consistency between plugins (#2286)

* update style guide for consistence between plugins

docs/dev/ui_style_guide.rst

@@ -14,28 +14,37 @@ try to adhere to the following principles:
   ``j-tray-plugin`` stylesheet (``jdaviz/components/tray_plugin.vue``).
 * Each item should be wrapped in a ``v-row``, but avoid any unnecessary additional wrapping-components
   (``v-card-*``, ``v-container``, etc).
-* Only use ``v-col`` components (within the ``<v-row class="row-no-outside-padding">``) if multiple
+* Only use ``v-col`` components (within a ``<v-row class="row-no-outside-padding">``) if multiple
   components are necessary in a single row.  Always emphasize readability at the default/minimum
   width of the plugin tray, rather than using columns that result in a ton of text overflow.
-* Action buttons should have ``color="primary"`` if it loads something into the plugin, or
-  ``color="accent"`` if applying something to the viewers/apps/data.
+* Use ``<v-row justify="end">`` to align content to the right (such as action buttons).
+* Action buttons should use ``<v-btn text></v-btn>`` with ``color="accent"`` if applying something
+  to the viewers/apps/data, and ``color="primary"`` otherwise.
 * To remove vertical padding from rows (i.e., two successive buttons stacked vertically), use
   ``<v-row class="row-min-bottom-padding">``.
-* Use ``<v-row justify="end">`` to align content to the right (such as action buttons).
 * Use new ``<j-plugin-section-header>Header Text</j-plugin-section-header>`` to separate content
   within a plugin (instead of nested cards, ``v-card-subtitle``, etc).
+* Plugin settings should use ``<v-expansion-panels popout>`` immediately at the top of the plugin.
+  Optional "sections" of a plugin or editing dynamically-created components should use
+  ``<v-expansion-panels accordion>`` to make most use of horizontal and vertical space.
 * Number entries should use a ``<v-text-field type="number" v-model="traitlet_name">`` component
   *unless* requiring support for scientific notation (in which case
   ``<v-text-field @change="python_method">`` can be used with stripping invalid characters and
   type-casting in python).  To handle emptying the input component without raising a traceback,
-  use an ``IntHandleEmpty`` traitlet instead, along with form-validation (see below) and/or
-  checks on the python-side to handle the case of an empty string.
+  use an ``IntHandleEmpty`` or ``FloatHandleEmpty`` traitlet instead, along with form-validation
+  (see below) and/or checks on the python-side to handle the case of an empty string.
 * Use form validation wherever possible, and disable action buttons if the relevant validation
   does not pass.  This is preferred to raising errors through snackbars after pressing an action
   button.  To do this, wrap the relevant section in a ``<v-form v-model="form_valid_section_name">``,
   create a ``form_valid_section_name = Bool(False).tag(sync=True)`` in the python class for the
   plugin, add rules to any relevant inputs, and set ``:disabled="!form_valid_section_name"`` to any
   action buttons.
+* When validation requires checking multiple inputs simultaneously, the validation error message
+  can be displayed as its own element using ``<v-row v-if="condition"><span class="v-messages v-messages__message text--secondary">
+  <b style="color: red !important">WARNING:</b> warning message</span></v-row>``.
+  This should be positioned where the error makes most sense in the flow of the input elements
+  and/or immediately above the action button to explain why it is disabled.
+  For warnings/errors that require more attention, use a ``<v-alert>`` instead.
 * Select input elements should default whenever possible (not start as empty), and self-hide if only
   one valid option. Whenever possible, inputs should use form validation rules with red text
   explaining the error and disabling action buttons. When one selection/check makes others

jdaviz/components/plugin_add_results.vue

@@ -55,7 +55,8 @@
     <v-row justify="end">
       <j-tooltip :tooltipcontent="label_overwrite ? action_tooltip+' and replace existing entry' : action_tooltip">
         <v-btn :disabled="label_invalid_msg.length > 0 || action_disabled"
-          color="accent" text
+          text
+          color="accent"
           @click="$emit('click:action')"
         >{{action_label}}{{label_overwrite ? ' (Overwrite)' : ''}}
         </v-btn>

jdaviz/configs/default/plugins/export_plot/export_plot.vue

@@ -12,26 +12,26 @@
     />
 
     <div v-if="viewer_selected">
-      <v-list>
-       <v-list-item>
+      <v-row justify="end" class="row-min-bottom-padding">
         <v-btn
+         text
          color="primary"
          @click="() => save_figure('png')"
          :disabled="movie_recording"
         >
          Export to PNG
         </v-btn>
-       </v-list-item>
-       <v-list-item>
+      </v-row>
+      <v-row justify="end">
         <v-btn
+         text
          color="primary"
          @click="() => save_figure('svg')"
          :disabled="movie_recording"
         >
          Export to SVG
         </v-btn>
-       </v-list-item>
-      </v-list>
+      </v-row>
 
       <v-row v-if="config==='cubeviz' && viewer_selected!=='spectrum-viewer'">
         <v-expansion-panels accordion>
@@ -95,9 +95,25 @@
                 </v-col>
               </v-row>
               <v-row v-if="movie_msg===''" justify='end'>
+                <v-tooltip top v-if="movie_recording">
+                  <template v-slot:activator="{ on, attrs }">
+                    <v-btn
+                     color="primary"
+                     icon
+                     @click="interrupt_recording"
+                     v-bind="attrs"
+                     v-on="on"
+                     :disabled="!movie_recording">
+                      <v-icon>stop</v-icon>
+                    </v-btn>
+                  </template>
+                  <span>Interrupt recording and delete movie file</span>
+                </v-tooltip>
+
                 <v-tooltip top>
                   <template v-slot:activator="{ on, attrs }">
                     <v-btn
+                     text
                      color="primary"
                      @click="() => save_movie('mp4')"
                      v-bind="attrs"
@@ -109,22 +125,6 @@
                   </template>
                   <span>Start movie recording</span>
                 </v-tooltip>
-                <div v-if="movie_recording">
-                  <v-tooltip top>
-                    <template v-slot:activator="{ on, attrs }">
-                      <v-btn
-                       color="primary"
-                       icon
-                       @click="interrupt_recording"
-                       v-bind="attrs"
-                       v-on="on"
-                       :disabled="!movie_recording">
-                        <v-icon>stop</v-icon>
-                      </v-btn>
-                    </template>
-                    <span>Interrupt recording and delete movie file</span>
-                  </v-tooltip>
-                </div>
               </v-row>
             </v-expansion-panel-content>
           </v-expansion-panel>

jdaviz/configs/default/plugins/subset_plugin/subset_plugin.vue

@@ -88,11 +88,11 @@
       </v-row>
     </div>
 
-      <v-row justify="end" no-gutters>
-        <j-tooltip v-if="can_simplify" tooltipcontent="Convert composite subset to use only add mode to connect subregions">
-          <v-btn color="primary" text @click="simplify_subset">Simplify</v-btn>
-        </j-tooltip>
-        <v-btn color="primary" text @click="update_subset">Update</v-btn>
-      </v-row>
+    <v-row justify="end">
+      <j-tooltip v-if="can_simplify" tooltipcontent="Convert composite subset to use only add mode to connect subregions">
+        <v-btn color="primary" text @click="simplify_subset">Simplify</v-btn>
+      </j-tooltip>
+      <v-btn color="primary" text @click="update_subset">Update</v-btn>
+    </v-row>
   </j-tray-plugin>
 </template>

jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue

@@ -159,7 +159,7 @@
       </div>
 
       <v-row>
-        <v-expansion-panels popout>
+        <v-expansion-panels accordion>
           <v-expansion-panel>
             <v-expansion-panel-header v-slot="{ open }">
               <span style="padding: 6px">Export Trace</span>
@@ -273,7 +273,7 @@
       </v-row>
 
       <v-row>
-        <v-expansion-panels popout>
+        <v-expansion-panels accordion>
           <v-expansion-panel>
             <v-expansion-panel-header v-slot="{ open }">
               <span style="padding: 6px">Export Background Image</span>
@@ -297,7 +297,7 @@
         </v-expansion-panels>
       </v-row>
       <v-row>
-        <v-expansion-panels popout>
+        <v-expansion-panels accordion>
           <v-expansion-panel>
             <v-expansion-panel-header v-slot="{ open }">
               <span style="padding: 6px">Export Background Spectrum</span>
@@ -321,7 +321,7 @@
         </v-expansion-panels>
       </v-row>
       <v-row>
-        <v-expansion-panels popout>
+        <v-expansion-panels accordion>
           <v-expansion-panel>
             <v-expansion-panel-header v-slot="{ open }">
               <span style="padding: 6px">Export Background-Subtracted Image</span>