diff --git a/docs/dev/ui_style_guide.rst b/docs/dev/ui_style_guide.rst index af2edf7960..ca43d7bb2f 100644 --- a/docs/dev/ui_style_guide.rst +++ b/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 ````) if multiple +* Only use ``v-col`` components (within a ````) 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 ```` to align content to the right (such as action buttons). +* Action buttons should use ```` 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 ````. -* Use ```` to align content to the right (such as action buttons). * Use new ``Header Text`` to separate content within a plugin (instead of nested cards, ``v-card-subtitle``, etc). +* Plugin settings should use ```` immediately at the top of the plugin. + Optional "sections" of a plugin or editing dynamically-created components should use + ```` to make most use of horizontal and vertical space. * Number entries should use a ```` component *unless* requiring support for scientific notation (in which case ```` 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 ````, 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 `` + WARNING: warning message``. + 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 ```` 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 diff --git a/jdaviz/components/plugin_add_results.vue b/jdaviz/components/plugin_add_results.vue index 2660f84d7d..693da081ee 100644 --- a/jdaviz/components/plugin_add_results.vue +++ b/jdaviz/components/plugin_add_results.vue @@ -55,7 +55,8 @@ {{action_label}}{{label_overwrite ? ' (Overwrite)' : ''}} diff --git a/jdaviz/configs/default/plugins/export_plot/export_plot.vue b/jdaviz/configs/default/plugins/export_plot/export_plot.vue index 67408e4451..2344453128 100644 --- a/jdaviz/configs/default/plugins/export_plot/export_plot.vue +++ b/jdaviz/configs/default/plugins/export_plot/export_plot.vue @@ -12,26 +12,26 @@ />
- - + Export to PNG - - + + Export to SVG - - + @@ -95,9 +95,25 @@ + + + Interrupt recording and delete movie file + + diff --git a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue index 638385be9a..70f1b1c05c 100644 --- a/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue +++ b/jdaviz/configs/specviz2d/plugins/spectral_extraction/spectral_extraction.vue @@ -159,7 +159,7 @@
- + Export Trace @@ -273,7 +273,7 @@ - + Export Background Image @@ -297,7 +297,7 @@ - + Export Background Spectrum @@ -321,7 +321,7 @@ - + Export Background-Subtracted Image