Skip to content

Commit

Permalink
fix: sub popout elements are missing styles (#2580)
Browse files Browse the repository at this point in the history 
* fix: sub popout elements are missing styles
* rename set_style_template_file to _add_style
* docs updates to point to main_styles

---------

Co-authored-by: Kyle Conroy <kyleconroy@gmail.com>
  • Loading branch information
@mariobuikhuizen @kecnry
mariobuikhuizen and kecnry authored Dec 1, 2023
1 parent c9daae8 commit b715b32
Show file tree
Hide file tree
Showing 9 changed files with 335 additions and 276 deletions.
2 changes: 2 additions & 0 deletions docs/dev/ui_style_guide.rst
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,8 @@ Tray Plugins
In order to be consistent with layout, styling, and spacing, UI development on plugins should
try to adhere to the following principles:

* CSS intended to be applied app-wide should live in ``main_styles.vue`` so that they are available
to all popout instances via ``PopoutStyleWrapper`` (exists on anything that inherits ``TemplateMixin``).
* Any tray plugin should utilize ``<j-tray-plugin :disabled_msg='disabled_msg' :popout_button="popout_button">`` as the
outer-container (which provides consistent styling rules). If the plugin makes use of active status
(live-preview marks or viewer callbacks), then also pass `` :uses_active_status="uses_active_status" @plugin-ping="plugin_ping($event)"``.
Expand Down
18 changes: 11 additions & 7 deletions jdaviz/app.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@
from ipyvuetify import VuetifyTemplate

from jdaviz import __version__
from jdaviz import style_registry
from jdaviz.core.config import read_configuration, get_configuration
from jdaviz.core.events import (LoadDataMessage, NewViewerMessage, AddDataMessage,
SnackbarMessage, RemoveDataMessage,
AddDataToViewerMessage, RemoveDataFromViewerMessage,
ViewerAddedMessage, ViewerRemovedMessage,
ViewerRenamedMessage)
from jdaviz.core.style_widget import StyleWidget
from jdaviz.core.registries import (tool_registry, tray_registry, viewer_registry,
data_parser_registry)
from jdaviz.core.tools import ICON_DIR
Expand Down Expand Up @@ -154,6 +154,9 @@ def to_unit(self, data, cid, values, original_units, target_units):
ipyvue.register_component_from_file('g-viewer-tab', "container.vue", __file__)


style_registry.instance.add((__file__, 'main_styles.vue'))


class ApplicationState(State):
"""
The application state object contains all the current front-end state,
Expand Down Expand Up @@ -252,13 +255,15 @@ class Application(VuetifyTemplate, HubListener):
vdocs = Unicode("").tag(sync=True)
docs_link = Unicode("").tag(sync=True)
popout_button = Any().tag(sync=True, **widget_serialization)
style_registry_instance = Any().tag(sync=True, **widget_serialization)

def __init__(self, configuration=None, *args, **kwargs):
super().__init__(*args, **kwargs)
self._jdaviz_helper = None
self._verbosity = 'warning'
self._history_verbosity = 'info'
self.popout_button = PopoutButton(self)
self.style_registry_instance = style_registry.instance

# Generate a state object for this application to maintain the state of
# the user interface.
Expand Down Expand Up @@ -407,19 +412,18 @@ def history_verbosity(self, val):
raise ValueError(f'Invalid verbosity: {val}')
self._history_verbosity = val

def set_style_template_file(self, path):
def _add_style(self, path):
"""
Sets the path to a vue file containing a <style> tag that will be applied on top of the
style defined in ``app.vue``. This is useful for config-specific or downstream styling
at the app-level.
Appends an addition vue file containing a <style> tag that will be applied on top of the
style defined in ``main_styles.vue``. This is useful for config-specific or downstream
styling at the app-level.
Parameters
----------
path : str or tuple
Path to a ``.vue`` file containing style rules to inject into the app.
"""
style_widget = StyleWidget(path)
self.state.style_widget = "IPY_MODEL_" + style_widget.model_id
style_registry.instance.add(path)

def _on_snackbar_message(self, msg):
"""
Expand Down
265 changes: 1 addition & 264 deletions jdaviz/app.vue
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<template>
<v-app id="web-app" :style="checkNotebookContext() ? 'display: inline' : 'display: flex'" :class="'jdaviz ' + config" ref="mainapp">
<jupyter-widget
v-if="state.style_widget"
:widget="state.style_widget"
style="display: none"
></jupyter-widget>
<jupyter-widget :widget="style_registry_instance"></jupyter-widget>
<v-overlay v-if="state.logger_overlay"
absolute
opacity="0.7">
Expand Down Expand Up @@ -183,36 +179,6 @@ export default {
window.dispatchEvent(new Event('resize'));
}
},
created() {
this.$vuetify.theme.themes.light = {
toolbar: "#153A4B",
primary: "#00617E",
secondary: "#007DA4",
accent: "#C75109",
turquoise: "#007BA1",
lightblue: "#E3F2FD", // matches highlighted row in MOS table
spinner: "#163C4C",
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107',
gray: '#F8F8F8',
};
this.$vuetify.theme.themes.dark = {
toolbar: "#153A4B",
primary: "#00617E",
secondary: "#007DA4",
accent: "#C75109",
turquoise: "#007BA1",
lightblue: "#E3F2FD",
spinner: "#ACE1FF",
error: '#FF5252',
info: '#2196F3',
success: '#4CAF50',
warning: '#FFC107',
gray: '#141414',
};
},
mounted() {
/* Workaround for https://github.com/jupyter-widgets/ipywidgets/issues/2499, can be removed when ipywidgets 8 is
* released */
Expand All @@ -223,232 +189,3 @@ export default {
}
};
</script>

<style id="web-app">
* {
/* otherwise, voila will override box-sizing to unset which screws up layouts */
box-sizing: border-box !important;
}
/* fix for loading overlay z-index */
div.output_wrapper {
z-index: auto;
}
.jd-loading-overlay {
position: absolute;
inset: 0;
background-color: white;
z-index: 100;
opacity: 0.5;
}
.v-toolbar__content,
.vuetify-styles .v-toolbar__content {
padding: 0px;
}
.plugin-expansion-panel-content .row {
/* override -12px margins */
margin-left: 0px;
margin-right: 0px;
}
.glue__subset-select {
display: flex;
align-items: center;
}
.v-tabs-items {
height: 100%;
}
.splitpanes {
background-color: #f8f8f8;
}
.splitpanes__splitter {
background-color: #e2e4e8;
position: relative;
width: 5px;
}
.lm_goldenlayout {
background: #f8f8f8;
}
.lm_content {
background: #ffffff;
border: none;
/*border-top: 1px solid #cccccc;*/
}
.lm_splitter {
background: #e2e4e8;
opacity: 1;
z-index: 1;
}
/* .lm_splitter.lm_vertical {
height: 1px !important;
}
.lm_splitter.lm_horizontal {
width: 1px !important;
} */
.lm_header .lm_tab {
padding-top: 0px;
margin-top: 0px;
}
.lm_header ul {
padding-left: 0;
}
.lm_popout {
display: none;
}
.cubeviz .lm_close {
display: none !important;
}
.cubeviz .lm_close_tab {
display: none;
}
.imviz .lm_close {
/* hide the close button on the right to prevent closing the default viewer
since we cannot easily discriminate between different viewers in the filter here */
display: none !important;
}
.imviz .lm_tab[title="imviz-0"] > .lm_close_tab {
/* hide the close button on the tab for imviz-0 only to
prevent closing the default viewer */
display: none;
}
.v-toolbar__items .v-btn {
/* allow v-toolbar-items styling to pass through tooltip wrapping span */
/* css is copied from .v-toolbar__items>.v-btn */
border-radius: 0;
height: 100% !important;
max-height: none;
}
.v-tooltip__content {
background-color: white !important;
border-radius: 2px !important;
border: 1px #003B4D solid !important;
color: black !important;
}
.v-expansion-panel-content__wrap {
padding-left: 12px !important;
padding-right: 12px !important;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
.invert, .invert-if-dark.theme--dark {
filter: invert(1) saturate(1) brightness(100);
color: white;
}
.jdaviz-nested-toolbar, .plugin-nested-toolbar {
/* height of nested toolbar to match viewer toolbar height */
height: 42px;
margin-right: 4px;
}
.jdaviz-nested-toolbar .v-icon, .jdaviz-nested-toolbar img {
/* icons from dark to (consistently) light */
filter: invert(1) saturate(1) brightness(100);
}
.jdaviz-nested-toolbar .v-btn, .plugin-nested-toolbar .v-btn {
height: 42px !important;
border: none !important;
min-width: 42px !important;
/* remove "dimming" since we use orange background for active */
color: transparent ! important;
}
.suboptions-carrot {
/* tweak margins for different toolbar size */
margin-bottom: -28px !important;
}
.jdaviz-nested-toolbar .v-btn--active, .jdaviz-nested-toolbar .v-btn:focus, .v-toolbar .active, .jdaviz-viewer-toolbar .active {
/* active color (orange) */
background-color: #c75109 !important;
}
.plugin-nested-toolbar .v-btn--active, .plugin-nested-toolbar .v-btn:focus {
/* semi-transparent active color (orange) */
background-color: #c7510996 !important;
}
.v-divider.theme--dark {
/* make the v-divider standout more */
border-color: hsla(0,0%,100%,.35) !important;
}
.no-hint .v-text-field__details {
display: none !important;
}
.color-to-accent {
/* https://codepen.io/sosuke/pen/Pjoqqp for #C75109 */
filter: brightness(0) saturate(100%) invert(31%) sepia(84%) saturate(1402%) hue-rotate(1deg) brightness(95%) contrast(94%);
}
.v-overlay__content {
position: unset !important;
}
.jdaviz__content--not-in-notebook {
max-height: calc(100% - 48px);
}
#popout-widget-container .v-application.jdaviz {
min-height: 100vh;
max-height: 100vh;
}
#popout-widget-container .jdaviz__content--not-in-notebook {
max-height: 100%;
}
.jupyter-widgets.bqplot.figure {
/* When a viewport is resized, a scrollbar can appear, which will impact the
* render size of bqplot and results in unused space when the newly rendered
* figure is displayed. Using overflow hidden will prevent the scrollbar from
* appearing */
overflow: hidden;
}
.jupyter-widgets.bqplot.figure .axislabel {
/* consistent with other labels (legend, buttons, plugin expansion menu labels, etc)*/
font-size: 15px !important;
font-family: Roboto, sans-serif !important;
font-weight: 500 !important;
}
</style>
2 changes: 1 addition & 1 deletion jdaviz/configs/default/plugins/line_lists/line_lists.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@
<j-docs-link>Shift spectral lines according to a specific redshift. Only enabled if at least one line is plotted.</j-docs-link>
</v-row>
<v-row style='margin-bottom: 0px'>
<!-- colors are app.vue primary and toolbar colors -->
<!-- colors are main_style.vue primary and toolbar colors -->
<v-slider
:value="rs_slider"
@input="throttledSlider"
Expand Down
2 changes: 1 addition & 1 deletion jdaviz/core/launcher.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ def show_launcher(configs=ALL_JDAVIZ_CONFIGS, filepath='', height='450px'):
by the selected configuration. Applies to the launcher and all instances of the same
application in the notebook.
'''
# Color defined manually due to the custom theme not being defined yet (in app.vue)
# Color defined manually due to the custom theme not being defined yet (in main_styles.vue)
height = f"{height}px" if isinstance(height, int) else height
main = v.Sheet(class_="mx-25",
attributes={"id": "popout-widget-container"},
Expand Down
2 changes: 1 addition & 1 deletion jdaviz/core/marks.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,7 +339,7 @@ def _slice_to_x(self, slice=0):
return self._x_all[slice]

def _update_colors_opacities(self):
# orange (accent) if active, import button blue otherwise (see css in app.vue)
# orange (accent) if active, import button blue otherwise (see css in main_styles.vue)
if not self._show_if_inactive and not self._active:
self.label.visible = False
self.visible = False
Expand Down
Loading

0 comments on commit b715b32

Please sign in to comment.