From 2f8c5b75c787ba1d8216af872ad087c43c4b932e Mon Sep 17 00:00:00 2001 From: dmail Date: Tue, 6 Dec 2022 10:53:54 +0100 Subject: [PATCH 01/41] start splitting toolbar core and ui --- .../toolbar_animation.js} | 2 +- .../src/client/core/toolbar_visibility.js | 5 ++ .../src/client/{ => core}/util/preferences.js | 0 .../src/client/toolbar_core.js | 20 +++++++ .../src/client/toolbar_injector.js | 4 +- .../src/client/{ => ui}/jsenv_logo.svg | 0 .../toolbar_animation_setting.js} | 4 +- .../src/client/{ => ui}/toolbar_main.css | 0 .../{toolbar_main.js => ui/toolbar_ui.js} | 56 ++++++------------- .../src/client/{ => ui}/util/animation.js | 0 .../src/client/{ => ui}/util/dom.js | 0 .../client/{ => ui}/util/fetch_using_xhr.js | 0 .../src/client/{ => ui}/util/fetching.js | 0 .../{ => ui}/util/iframe_to_parent_href.js | 0 .../src/client/{ => ui}/util/jsenv_logger.js | 0 .../src/client/{ => ui}/util/responsive.js | 0 .../src/client/{ => ui}/util/util.js | 0 .../src/jsenv_plugin_toolbar.js | 6 +- 18 files changed, 51 insertions(+), 46 deletions(-) rename packages/jsenv-plugin-toolbar/src/client/{animation/toolbar_animation_core.js => core/toolbar_animation.js} (92%) create mode 100644 packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js rename packages/jsenv-plugin-toolbar/src/client/{ => core}/util/preferences.js (100%) create mode 100644 packages/jsenv-plugin-toolbar/src/client/toolbar_core.js rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/jsenv_logo.svg (100%) rename packages/jsenv-plugin-toolbar/src/client/{animation/toolbar_animation_ui.js => ui/toolbar_animation_setting.js} (83%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/toolbar_main.css (100%) rename packages/jsenv-plugin-toolbar/src/client/{toolbar_main.js => ui/toolbar_ui.js} (75%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/animation.js (100%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/dom.js (100%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/fetch_using_xhr.js (100%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/fetching.js (100%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/iframe_to_parent_href.js (100%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/jsenv_logger.js (100%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/responsive.js (100%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/util/util.js (100%) diff --git a/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_core.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js similarity index 92% rename from packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_core.js rename to packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js index 96b4e9bbdf..573f6b4344 100644 --- a/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_core.js +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js @@ -1,5 +1,5 @@ import { toolbarState, updateToolbarState } from "../toolbar_state.js" -import { createPreference } from "../util/preferences.js" +import { createPreference } from "./util/preferences.js" const animationPreference = createPreference("jsenv_toolbar_animation") diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js new file mode 100644 index 0000000000..1de8b2c443 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js @@ -0,0 +1,5 @@ +import { createPreference } from "./util/preferences.js" + +export const toolbarVisibilityPreference = createPreference( + "jsenv_toolbar_visible", +) diff --git a/packages/jsenv-plugin-toolbar/src/client/util/preferences.js b/packages/jsenv-plugin-toolbar/src/client/core/util/preferences.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/preferences.js rename to packages/jsenv-plugin-toolbar/src/client/core/util/preferences.js diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js new file mode 100644 index 0000000000..d30a8c7195 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js @@ -0,0 +1,20 @@ +import { updateToolbarState } from "./toolbar_state.js" +import { addExternalCommandCallback } from "./communication/parent_window_communication.js" +import "./focus/toolbar_focus.js" +import { renderToolbar } from "./toolbar_ui.js" + +// const { currentScript } = document +addExternalCommandCallback("renderToolbar", ({ logs }) => { + renderToolbar({ + logs, + }) +}) +addExternalCommandCallback("showToolbar", () => { + showToolbar() +}) +addExternalCommandCallback("hideToolbar", () => { + hideToolbar() +}) +updateToolbarState({ + ready: true, +}) diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js index 18ee2844f9..79080a48c2 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js @@ -1,6 +1,6 @@ -import { setAttributes, setStyles } from "./util/dom.js" +import { setAttributes, setStyles } from "./ui/util/dom.js" -const jsenvLogoSvgUrl = new URL("./jsenv_logo.svg", import.meta.url) +const jsenvLogoSvgUrl = new URL("./ui/jsenv_logo.svg", import.meta.url) export const injectToolbar = async ({ toolbarUrl, logs = false }) => { if (document.readyState !== "complete") { diff --git a/packages/jsenv-plugin-toolbar/src/client/jsenv_logo.svg b/packages/jsenv-plugin-toolbar/src/client/ui/jsenv_logo.svg similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/jsenv_logo.svg rename to packages/jsenv-plugin-toolbar/src/client/ui/jsenv_logo.svg diff --git a/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_ui.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js similarity index 83% rename from packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_ui.js rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js index c31c329e3f..4f73ff4be3 100644 --- a/packages/jsenv-plugin-toolbar/src/client/animation/toolbar_animation_ui.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js @@ -2,9 +2,9 @@ import { animationsAreEnabled, enableAnimations, disableAnimations, -} from "./toolbar_animation_core.js" +} from "../core/toolbar_animation_core.js" -export const renderToolbarAnimation = () => { +export const renderToolbarAnimationSetting = () => { const animCheckbox = document.querySelector("#toggle-anims") animCheckbox.checked = animationsAreEnabled() animCheckbox.onchange = () => { diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_main.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_main.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/toolbar_main.css rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_main.css diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_main.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js similarity index 75% rename from packages/jsenv-plugin-toolbar/src/client/toolbar_main.js rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js index 3142e65e8f..4220e6a073 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_main.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js @@ -1,30 +1,26 @@ -import { updateToolbarState } from "./toolbar_state.js" -import { addExternalCommandCallback } from "./communication/parent_window_communication.js" -import { startJavaScriptAnimation } from "./util/animation.js" -import "./focus/toolbar_focus.js" +import { updateToolbarState } from "../toolbar_state.js" +import { animationsAreEnabled } from "../core/toolbar_animation.js" +import { toolbarVisibilityPreference } from "../core/toolbar_visibility.js" +import { hideAllTooltip, hideTooltip } from "../tooltip/tooltip.js" +import { + renderToolbarSettings, + hideSettings, +} from "../settings/toolbar_settings.js" +import { renderToolbarNotification } from "../notification/toolbar_notification.js" +import { renderToolbarTheme } from "../theme/toolbar_theme.js" +import { renderExecutionInToolbar } from "../execution/toolbar_execution.js" +import { initToolbarEventSource } from "../eventsource/toolbar_eventsource.js" +import { makeToolbarResponsive } from "../responsive/toolbar_responsive.js" import { setLinkHrefForParentWindow } from "./util/iframe_to_parent_href.js" import { getToolbarIframe, deactivateToolbarSection, setStyles, } from "./util/dom.js" -import { createPreference } from "./util/preferences.js" -import { hideTooltip, hideAllTooltip } from "./tooltip/tooltip.js" -import { - renderToolbarSettings, - hideSettings, -} from "./settings/toolbar_settings.js" -import { animationsAreEnabled } from "./animation/toolbar_animation_core.js" -import { renderToolbarNotification } from "./notification/toolbar_notification.js" -import { renderToolbarTheme } from "./theme/toolbar_theme.js" -import { renderToolbarAnimation } from "./animation/toolbar_animation_ui.js" -import { renderExecutionInToolbar } from "./execution/toolbar_execution.js" -import { initToolbarEventSource } from "./eventsource/toolbar_eventsource.js" -import { makeToolbarResponsive } from "./responsive/toolbar_responsive.js" - -const toolbarVisibilityPreference = createPreference("jsenv_toolbar_visible") - -const renderToolbar = async () => { +import { startJavaScriptAnimation } from "./util/animation.js" +import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js" + +export const renderToolbar = async () => { const toolbarOverlay = document.querySelector("#toolbar-overlay") toolbarOverlay.onclick = () => { hideAllTooltip() @@ -48,7 +44,7 @@ const renderToolbar = async () => { renderToolbarNotification() makeToolbarResponsive() renderToolbarSettings() - renderToolbarAnimation() + renderToolbarAnimationSetting() renderToolbarTheme() renderExecutionInToolbar() // this might become active but we need to detect this somehow @@ -156,19 +152,3 @@ window.toolbar = { show: showToolbar, hide: () => hideToolbar(), } - -// const { currentScript } = document -addExternalCommandCallback("renderToolbar", ({ logs }) => { - renderToolbar({ - logs, - }) -}) -addExternalCommandCallback("showToolbar", () => { - showToolbar() -}) -addExternalCommandCallback("hideToolbar", () => { - hideToolbar() -}) -updateToolbarState({ - ready: true, -}) diff --git a/packages/jsenv-plugin-toolbar/src/client/util/animation.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/animation.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/animation.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/animation.js diff --git a/packages/jsenv-plugin-toolbar/src/client/util/dom.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/dom.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/dom.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/dom.js diff --git a/packages/jsenv-plugin-toolbar/src/client/util/fetch_using_xhr.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/fetch_using_xhr.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/fetch_using_xhr.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/fetch_using_xhr.js diff --git a/packages/jsenv-plugin-toolbar/src/client/util/fetching.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/fetching.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/fetching.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/fetching.js diff --git a/packages/jsenv-plugin-toolbar/src/client/util/iframe_to_parent_href.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/iframe_to_parent_href.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/iframe_to_parent_href.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/iframe_to_parent_href.js diff --git a/packages/jsenv-plugin-toolbar/src/client/util/jsenv_logger.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/jsenv_logger.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/jsenv_logger.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/jsenv_logger.js diff --git a/packages/jsenv-plugin-toolbar/src/client/util/responsive.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/responsive.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/responsive.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/responsive.js diff --git a/packages/jsenv-plugin-toolbar/src/client/util/util.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/util.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/util/util.js rename to packages/jsenv-plugin-toolbar/src/client/ui/util/util.js diff --git a/packages/jsenv-plugin-toolbar/src/jsenv_plugin_toolbar.js b/packages/jsenv-plugin-toolbar/src/jsenv_plugin_toolbar.js index f91b7fd4ae..bb955d33bd 100644 --- a/packages/jsenv-plugin-toolbar/src/jsenv_plugin_toolbar.js +++ b/packages/jsenv-plugin-toolbar/src/jsenv_plugin_toolbar.js @@ -19,18 +19,18 @@ export const jsenvPluginToolbar = ({ logs = false } = {}) => { name: "jsenv:toolbar", appliesDuring: "dev", transformUrlContent: { - html: (urlInfo, { referenceUtils }) => { + html: (urlInfo, context) => { urlInfo.data.noribbon = true if (urlInfo.url === toolbarHtmlClientFileUrl) { return null } const htmlAst = parseHtmlString(urlInfo.content) - const [toolbarInjectorReference] = referenceUtils.inject({ + const [toolbarInjectorReference] = context.referenceUtils.inject({ type: "js_import", expectedType: "js_module", specifier: toolbarInjectorClientFileUrl, }) - const [toolbarClientFileReference] = referenceUtils.inject({ + const [toolbarClientFileReference] = context.referenceUtils.inject({ type: "iframe_src", expectedType: "html", specifier: toolbarHtmlClientFileUrl, From e3c6bd089bbc1ace751e4ada781c92b270cf3382 Mon Sep 17 00:00:00 2001 From: dmail Date: Tue, 6 Dec 2022 10:57:56 +0100 Subject: [PATCH 02/41] update toolbar imports and exports --- packages/jsenv-plugin-toolbar/.eslintignore | 3 ++ packages/jsenv-plugin-toolbar/package.json | 1 + .../client/eventsource/toolbar_eventsource.js | 2 +- .../src/client/execution/toolbar_execution.js | 2 +- .../notification/toolbar_notification.js | 2 +- .../client/responsive/toolbar_responsive.js | 4 +- .../src/client/settings/toolbar_settings.js | 2 +- .../src/client/theme/toolbar_theme.js | 2 +- .../src/client/toolbar_core.js | 2 +- .../src/client/tooltip/tooltip.js | 2 +- .../client/ui/toolbar_animation_setting.js | 2 +- .../src/client/ui/toolbar_ui.js | 42 +++++++++---------- 12 files changed, 33 insertions(+), 33 deletions(-) create mode 100644 packages/jsenv-plugin-toolbar/.eslintignore diff --git a/packages/jsenv-plugin-toolbar/.eslintignore b/packages/jsenv-plugin-toolbar/.eslintignore new file mode 100644 index 0000000000..09409b5e86 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/.eslintignore @@ -0,0 +1,3 @@ +.jsenv/ +dist/ +node_modules/ \ No newline at end of file diff --git a/packages/jsenv-plugin-toolbar/package.json b/packages/jsenv-plugin-toolbar/package.json index 538884dafa..bdfaf2cfa6 100644 --- a/packages/jsenv-plugin-toolbar/package.json +++ b/packages/jsenv-plugin-toolbar/package.json @@ -25,6 +25,7 @@ "@jsenv/ast": "1.4.7" }, "scripts": { + "eslint": "npx eslint . --ext=.js,.mjs,.cjs,.html", "build": "node ./scripts/build.mjs" } } diff --git a/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js b/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js index 68f059f2f2..e49e16f0d2 100644 --- a/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js +++ b/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js @@ -1,4 +1,4 @@ -import { removeForceHideElement } from "../util/dom.js" +import { removeForceHideElement } from "../ui/util/dom.js" import { enableVariant } from "../variant/variant.js" import { toggleTooltip, diff --git a/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js b/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js index 823cdef509..858d4e347b 100644 --- a/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js +++ b/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js @@ -1,4 +1,4 @@ -import { removeForceHideElement } from "../util/dom.js" +import { removeForceHideElement } from "../ui/util/dom.js" import { enableVariant } from "../variant/variant.js" import { toggleTooltip } from "../tooltip/tooltip.js" import { notifyExecutionResult } from "../notification/toolbar_notification.js" diff --git a/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js b/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js index 62712aaf7f..215c621a08 100644 --- a/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js +++ b/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js @@ -1,4 +1,4 @@ -import { createPreference } from "../util/preferences.js" +import { createPreference } from "../core/util/preferences.js" import { enableVariant } from "../variant/variant.js" const notificationAvailable = typeof window.Notification === "function" diff --git a/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js b/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js index d7effe893e..7b8b3c40b8 100644 --- a/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js +++ b/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js @@ -2,8 +2,8 @@ import { forceHideElement, removeForceHideElement, deactivateToolbarSection, -} from "../util/dom.js" -import { createHorizontalBreakpoint } from "../util/responsive.js" +} from "../ui/util/dom.js" +import { createHorizontalBreakpoint } from "../ui/util/responsive.js" import { hideTooltip } from "../tooltip/tooltip.js" const WINDOW_SMALL_WIDTH = 420 diff --git a/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js b/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js index 7e32741b4b..45d14830d1 100644 --- a/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js +++ b/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js @@ -3,7 +3,7 @@ import { deactivateToolbarSection, activateToolbarSection, updateIframeOverflowOnParentWindow, -} from "../util/dom.js" +} from "../ui/util/dom.js" import { enableVariant } from "../variant/variant.js" export const renderToolbarSettings = () => { diff --git a/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js b/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js index e819fe2a58..bba0c9695a 100644 --- a/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js +++ b/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js @@ -1,4 +1,4 @@ -import { createPreference } from "../util/preferences.js" +import { createPreference } from "../core/util/preferences.js" const DARK_THEME = "dark" const LIGHT_THEME = "light" diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js index d30a8c7195..fcedb8681f 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js @@ -1,7 +1,7 @@ import { updateToolbarState } from "./toolbar_state.js" import { addExternalCommandCallback } from "./communication/parent_window_communication.js" import "./focus/toolbar_focus.js" -import { renderToolbar } from "./toolbar_ui.js" +import { renderToolbar, showToolbar, hideToolbar } from "./ui/toolbar_ui.js" // const { currentScript } = document addExternalCommandCallback("renderToolbar", ({ logs }) => { diff --git a/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js b/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js index 5b11687a50..1015f42fee 100644 --- a/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js +++ b/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js @@ -1,4 +1,4 @@ -import { updateIframeOverflowOnParentWindow } from "../util/dom.js" +import { updateIframeOverflowOnParentWindow } from "../ui/util/dom.js" export const toggleTooltip = (element) => { if (element.hasAttribute("data-tooltip-visible")) { diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js index 4f73ff4be3..191cc3cc5e 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js @@ -2,7 +2,7 @@ import { animationsAreEnabled, enableAnimations, disableAnimations, -} from "../core/toolbar_animation_core.js" +} from "../core/toolbar_animation.js" export const renderToolbarAnimationSetting = () => { const animCheckbox = document.querySelector("#toggle-anims") diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js index 4220e6a073..7a4ea4b51b 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js @@ -69,8 +69,22 @@ const toogleToolbar = () => { const toolbarIsVisible = () => document.documentElement.hasAttribute("data-toolbar-visible") -let hideToolbar = () => { - // toolbar hidden by default, nothing to do to hide it by default +let restoreToolbarIframeParentStyles = () => {} +let restoreToolbarIframeStyles = () => {} + +export const hideToolbar = () => { + restoreToolbarIframeParentStyles() + restoreToolbarIframeStyles() + + hideTooltip(document.querySelector("#eventsource-indicator")) + hideTooltip(document.querySelector("#execution-indicator")) + toolbarVisibilityPreference.set(false) + if (animationsAreEnabled()) { + document.documentElement.setAttribute("data-toolbar-animation", "") + } else { + document.documentElement.removeAttribute("data-toolbar-animation") + } + document.documentElement.removeAttribute("data-toolbar-visible") updateToolbarState({ visible: false, }) @@ -78,7 +92,7 @@ let hideToolbar = () => { // (by the way it might be cool to have the toolbar auto show when) // it has something to say (being disconnected from server) -const showToolbar = () => { +export const showToolbar = () => { toolbarVisibilityPreference.set(true) if (animationsAreEnabled()) { document.documentElement.setAttribute("data-toolbar-animation", "") @@ -109,11 +123,11 @@ const showToolbar = () => { "transition-duration": animationsAreEnabled() ? "300ms" : "0s", }) // maybe we should use js animation here because we would not conflict with css - const restoreToolbarIframeParentStyles = setStyles(toolbarIframeParent, { + restoreToolbarIframeParentStyles = setStyles(toolbarIframeParent, { "scroll-padding-bottom": "40px", // same here we should add 40px "padding-bottom": "40px", // if there is already one we should add 40px }) - const restoreToolbarIframeStyles = setStyles(toolbarIframe, { + restoreToolbarIframeStyles = setStyles(toolbarIframe, { height: "40px", visibility: "visible", }) @@ -128,24 +142,6 @@ const showToolbar = () => { }, }) } - - hideToolbar = () => { - restoreToolbarIframeParentStyles() - restoreToolbarIframeStyles() - - hideTooltip(document.querySelector("#eventsource-indicator")) - hideTooltip(document.querySelector("#execution-indicator")) - toolbarVisibilityPreference.set(false) - if (animationsAreEnabled()) { - document.documentElement.setAttribute("data-toolbar-animation", "") - } else { - document.documentElement.removeAttribute("data-toolbar-animation") - } - document.documentElement.removeAttribute("data-toolbar-visible") - updateToolbarState({ - visible: false, - }) - } } window.toolbar = { From f5ea8aae1d8205518643d85fdf631295ff8b20a8 Mon Sep 17 00:00:00 2001 From: dmail Date: Tue, 6 Dec 2022 11:00:00 +0100 Subject: [PATCH 03/41] fix toolbar urls --- .../jsenv-plugin-toolbar/src/client/toolbar.html | 4 ++-- .../client/ui/{toolbar_main.css => toolbar.css} | 14 +++++++------- 2 files changed, 9 insertions(+), 9 deletions(-) rename packages/jsenv-plugin-toolbar/src/client/ui/{toolbar_main.css => toolbar.css} (89%) diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar.html b/packages/jsenv-plugin-toolbar/src/client/toolbar.html index 1ba12b48eb..9ddd2241b1 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar.html +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar.html @@ -5,7 +5,7 @@ - +
@@ -444,7 +444,7 @@

Settings

diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_main.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css similarity index 89% rename from packages/jsenv-plugin-toolbar/src/client/ui/toolbar_main.css rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css index 9758d77713..8b98676a94 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_main.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css @@ -1,10 +1,10 @@ -@import "./execution/execution.css"; -@import "./focus/focus.css"; -@import "./eventsource/eventsource.css"; -@import "./responsive/overflow_menu.css"; -@import "./settings/settings.css"; -@import "./theme/light_theme.css"; -@import "./tooltip/tooltip.css"; +@import "../execution/execution.css"; +@import "../focus/focus.css"; +@import "../eventsource/eventsource.css"; +@import "../responsive/overflow_menu.css"; +@import "../settings/settings.css"; +@import "../theme/light_theme.css"; +@import "../tooltip/tooltip.css"; html[data-animation-disabled] * { transition: none !important; From a68bcb73cb7289b7b2455a9d9233583696416fb3 Mon Sep 17 00:00:00 2001 From: dmail Date: Tue, 6 Dec 2022 11:03:16 +0100 Subject: [PATCH 04/41] reorg some files --- .../parent_window_communication.js | 0 .../src/client/core/{util => }/preferences.js | 0 .../src/client/core/toolbar_animation.js | 2 +- .../src/client/core/toolbar_visibility.js | 2 +- .../src/client/focus/toolbar_focus.js | 19 ------------- .../notification/toolbar_notification.js | 2 +- .../src/client/theme/toolbar_theme.js | 2 +- .../src/client/toolbar_core.js | 1 - .../src/client/{focus => ui}/focus.css | 27 +++++++------------ 9 files changed, 13 insertions(+), 42 deletions(-) rename packages/jsenv-plugin-toolbar/src/client/{communication => core}/parent_window_communication.js (100%) rename packages/jsenv-plugin-toolbar/src/client/core/{util => }/preferences.js (100%) delete mode 100644 packages/jsenv-plugin-toolbar/src/client/focus/toolbar_focus.js rename packages/jsenv-plugin-toolbar/src/client/{focus => ui}/focus.css (60%) diff --git a/packages/jsenv-plugin-toolbar/src/client/communication/parent_window_communication.js b/packages/jsenv-plugin-toolbar/src/client/core/parent_window_communication.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/communication/parent_window_communication.js rename to packages/jsenv-plugin-toolbar/src/client/core/parent_window_communication.js diff --git a/packages/jsenv-plugin-toolbar/src/client/core/util/preferences.js b/packages/jsenv-plugin-toolbar/src/client/core/preferences.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/core/util/preferences.js rename to packages/jsenv-plugin-toolbar/src/client/core/preferences.js diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js index 573f6b4344..458c03b93d 100644 --- a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js @@ -1,5 +1,5 @@ import { toolbarState, updateToolbarState } from "../toolbar_state.js" -import { createPreference } from "./util/preferences.js" +import { createPreference } from "./preferences.js" const animationPreference = createPreference("jsenv_toolbar_animation") diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js index 1de8b2c443..817f1bb97c 100644 --- a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js @@ -1,4 +1,4 @@ -import { createPreference } from "./util/preferences.js" +import { createPreference } from "./preferences.js" export const toolbarVisibilityPreference = createPreference( "jsenv_toolbar_visible", diff --git a/packages/jsenv-plugin-toolbar/src/client/focus/toolbar_focus.js b/packages/jsenv-plugin-toolbar/src/client/focus/toolbar_focus.js deleted file mode 100644 index c46b1b4093..0000000000 --- a/packages/jsenv-plugin-toolbar/src/client/focus/toolbar_focus.js +++ /dev/null @@ -1,19 +0,0 @@ -// handle data-last-interaction attr on html (focusring) -window.addEventListener("mousedown", (mousedownEvent) => { - if (mousedownEvent.defaultPrevented) { - return - } - document.documentElement.setAttribute("data-last-interaction", "mouse") -}) -window.addEventListener("touchstart", (touchstartEvent) => { - if (touchstartEvent.defaultPrevented) { - return - } - document.documentElement.setAttribute("data-last-interaction", "mouse") -}) -window.addEventListener("keydown", (keydownEvent) => { - if (keydownEvent.defaultPrevented) { - return - } - document.documentElement.setAttribute("data-last-interaction", "keyboard") -}) diff --git a/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js b/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js index 215c621a08..f242c345a7 100644 --- a/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js +++ b/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js @@ -1,4 +1,4 @@ -import { createPreference } from "../core/util/preferences.js" +import { createPreference } from "../core/preferences.js" import { enableVariant } from "../variant/variant.js" const notificationAvailable = typeof window.Notification === "function" diff --git a/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js b/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js index bba0c9695a..28c7c4a8b8 100644 --- a/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js +++ b/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js @@ -1,4 +1,4 @@ -import { createPreference } from "../core/util/preferences.js" +import { createPreference } from "../core/preferences.js" const DARK_THEME = "dark" const LIGHT_THEME = "light" diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js index fcedb8681f..4e26acdd21 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js @@ -1,6 +1,5 @@ import { updateToolbarState } from "./toolbar_state.js" import { addExternalCommandCallback } from "./communication/parent_window_communication.js" -import "./focus/toolbar_focus.js" import { renderToolbar, showToolbar, hideToolbar } from "./ui/toolbar_ui.js" // const { currentScript } = document diff --git a/packages/jsenv-plugin-toolbar/src/client/focus/focus.css b/packages/jsenv-plugin-toolbar/src/client/ui/focus.css similarity index 60% rename from packages/jsenv-plugin-toolbar/src/client/focus/focus.css rename to packages/jsenv-plugin-toolbar/src/client/ui/focus.css index 458cf29543..4c34df1668 100644 --- a/packages/jsenv-plugin-toolbar/src/client/focus/focus.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/focus.css @@ -11,20 +11,14 @@ input:focus, outline-offset: -2px; } -html[data-last-interaction="keyboard"] button:focus, -html[data-last-interaction="keyboard"] a:focus, -html[data-last-interaction="keyboard"] input:focus, -html[data-last-interaction="keyboard"] - *[data-contains-hidden-input] - input:focus - + * { +button:focus-visible, +a:focus-visible, +input:focus-visible, +*[data-contains-hidden-input] input:focus-visible + * { outline-style: auto; } -html[data-last-interaction="keyboard"] - *[data-contains-hidden-input] - input:focus - + * { +*[data-contains-hidden-input] input:focus-visible + * { outline-color: rgb(0, 150, 255); } @@ -38,13 +32,10 @@ Because firefox would take into account outline instead of -moz-outline Because for some element we set the focus outline on a div which would not match :focusring */ @-moz-document url-prefix() { - html[data-last-interaction="keyboard"] button:focus, - html[data-last-interaction="keyboard"] a:focus, - html[data-last-interaction="keyboard"] input:focus, - html[data-last-interaction="keyboard"] - *[data-input-customized] - input:focus - + * { + button:focus-visible, + a:focus-visible, + input:focus-visible, + *[data-input-customized] input:focus-visible + * { outline-width: 2px; outline-offset: 0; outline-style: solid; From cf1fb543e3b5345882e26f4049dccabc1a426932 Mon Sep 17 00:00:00 2001 From: dmail Date: Tue, 6 Dec 2022 11:16:27 +0100 Subject: [PATCH 05/41] use flexbox, split css --- .../src/client/toolbar.html | 2 +- .../src/client/toolbar_core.js | 6 +- .../src/client/toolbar_state.js | 2 +- .../src/client/ui/globals.css | 29 +++++ .../src/client/ui/layout.css | 26 +++++ .../src/client/ui/toolbar.css | 108 +----------------- .../src/client/ui/toolbar_trigger.css | 43 +++++++ .../src/client/ui/toolbar_ui.js | 3 +- src/plugins/explorer/client/explorer.html | 3 +- 9 files changed, 110 insertions(+), 112 deletions(-) create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/globals.css create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/layout.css create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger.css diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar.html b/packages/jsenv-plugin-toolbar/src/client/toolbar.html index 9ddd2241b1..0fb6757c0b 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar.html +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar.html @@ -382,7 +382,7 @@

Settings

-
+
diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js index 4e26acdd21..1ec202f682 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_core.js @@ -1,12 +1,10 @@ import { updateToolbarState } from "./toolbar_state.js" -import { addExternalCommandCallback } from "./communication/parent_window_communication.js" +import { addExternalCommandCallback } from "./core/parent_window_communication.js" import { renderToolbar, showToolbar, hideToolbar } from "./ui/toolbar_ui.js" // const { currentScript } = document addExternalCommandCallback("renderToolbar", ({ logs }) => { - renderToolbar({ - logs, - }) + renderToolbar({ logs }) }) addExternalCommandCallback("showToolbar", () => { showToolbar() diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js index b18452d143..473ed71be9 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js @@ -1,4 +1,4 @@ -import { sendEventToParent } from "./communication/parent_window_communication.js" +import { sendEventToParent } from "./core/parent_window_communication.js" export const toolbarState = { ready: false, diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/globals.css b/packages/jsenv-plugin-toolbar/src/client/ui/globals.css new file mode 100644 index 0000000000..fc47636624 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/globals.css @@ -0,0 +1,29 @@ +html[data-animation-disabled] * { + transition: none !important; + animation-duration: 0s !important; + animation-delay: 0s !important; +} + +[data-when] { + display: none !important; +} + +* { + box-sizing: border-box; +} + +html, +body { + margin: 0; + padding: 0; + height: 100%; +} + +html { + font-family: arial, sans; +} + +/* global utils */ +[data-force-hide] { + display: none !important; +} diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/layout.css b/packages/jsenv-plugin-toolbar/src/client/ui/layout.css new file mode 100644 index 0000000000..f28791aef2 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/layout.css @@ -0,0 +1,26 @@ +#toolbar-overlay { + position: fixed; + left: 0; + top: 0; + width: 100%; + height: 100%; + filter: url(#better-blur); + background-color: rgba(0, 0, 0, 0.2); +} + +#toolbar { + position: fixed; + bottom: 0; + height: 40px; + width: 100%; + background: #404040; +} + +#toolbar-wrapper { + display: flex; + justify-content: center; +} + +/* #toolbar-wrapper > * { + vertical-align: middle; +} */ diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css index 8b98676a94..2e07b7b4e7 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css @@ -1,70 +1,14 @@ +@import "./globals.css"; +@import "./layout.css"; +@import "./toolbar_trigger.css"; @import "../execution/execution.css"; -@import "../focus/focus.css"; +@import "./focus.css"; @import "../eventsource/eventsource.css"; @import "../responsive/overflow_menu.css"; @import "../settings/settings.css"; @import "../theme/light_theme.css"; @import "../tooltip/tooltip.css"; -html[data-animation-disabled] * { - transition: none !important; - animation-duration: 0s !important; - animation-delay: 0s !important; -} - -[data-when] { - display: none !important; -} - -* { - box-sizing: border-box; -} - -html, -body { - margin: 0; - padding: 0; - height: 100%; -} - -html { - font-family: arial, sans; -} - -/* global utils */ -[data-force-hide] { - display: none !important; -} - -#toolbar-overlay { - position: fixed; - left: 0; - top: 0; - width: 100%; - height: 100%; - filter: url(#better-blur); - background-color: rgba(0, 0, 0, 0.2); -} - -#toolbar { - position: fixed; - bottom: 0; - height: 40px; - width: 100%; - background: #404040; -} - -#toolbar-wrapper { - display: table; - width: 100%; - height: 100%; -} - -#toolbar-wrapper > * { - display: table-cell; - vertical-align: middle; -} - #toolbar button { background: none; border: none; @@ -120,50 +64,6 @@ html { width: 18px; } -/* re-open toolbar-trigger */ -#toolbar-trigger { - display: block; - overflow: hidden; - position: absolute; - bottom: -32px; - right: 20px; - height: 40px; - width: 40px; - padding: 0; - border-radius: 5px 5px 0 0; - border: 1px solid rgba(0, 0, 0, 0.33); - border-bottom: none; - box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46); - background: transparent; -} - -#toolbar-trigger[data-animate] { - transition: 600ms; -} - -#toolbar-trigger #jsenvLogoSvg { - width: 35px; - height: 35px; - opacity: 0; - transition: 600ms; -} - -html[data-toolbar-visible] #toolbar-trigger { - display: none; -} - -#toolbar-trigger:hover { - cursor: pointer; -} - -#toolbar-trigger[data-expanded] { - bottom: 0; -} - -#toolbar-trigger[data-expanded] #jsenvLogoSvg { - opacity: 1; -} - /* #jsenvLogo { transition: 600ms; } */ diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger.css new file mode 100644 index 0000000000..d50fdd23b4 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger.css @@ -0,0 +1,43 @@ +/* re-open toolbar-trigger */ +#toolbar-trigger { + display: block; + overflow: hidden; + position: absolute; + bottom: -32px; + right: 20px; + height: 40px; + width: 40px; + padding: 0; + border-radius: 5px 5px 0 0; + border: 1px solid rgba(0, 0, 0, 0.33); + border-bottom: none; + box-shadow: 0px 0px 6px 2px rgba(0, 0, 0, 0.46); + background: transparent; +} + +#toolbar-trigger[data-animate] { + transition: 600ms; +} + +#toolbar-trigger #jsenvLogoSvg { + width: 35px; + height: 35px; + opacity: 0; + transition: 600ms; +} + +html[data-toolbar-visible] #toolbar-trigger { + display: none; +} + +#toolbar-trigger:hover { + cursor: pointer; +} + +#toolbar-trigger[data-expanded] { + bottom: 0; +} + +#toolbar-trigger[data-expanded] #jsenvLogoSvg { + opacity: 1; +} diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js index 7a4ea4b51b..59d7d62981 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js @@ -54,8 +54,9 @@ export const renderToolbar = async () => { // if user click enter or space quickly while closing toolbar // it will cancel the closing // that's why I used toggleToolbar and not hideToolbar - document.querySelector("#button-close-toolbar").onclick = () => + document.querySelector("#button-close-toolbar").onclick = () => { toogleToolbar() + } } const toogleToolbar = () => { diff --git a/src/plugins/explorer/client/explorer.html b/src/plugins/explorer/client/explorer.html index 74b0dd4d77..767ed672db 100644 --- a/src/plugins/explorer/client/explorer.html +++ b/src/plugins/explorer/client/explorer.html @@ -175,6 +175,7 @@ padding-right: 25px; padding-top: 25px; background-color: #204143; + position: relative; } #explorables_header_bottom_spacing { @@ -325,7 +326,7 @@

-

+

Date: Tue, 6 Dec 2022 11:25:49 +0100 Subject: [PATCH 06/41] reorg toolbar notification --- .../src/client/core/toolbar_notification.js | 112 +++++++++++ .../notification/toolbar_notification.js | 181 ------------------ .../client/ui/toolbar_notification_setting.js | 83 ++++++++ .../src/client/ui/toolbar_ui.js | 7 +- .../src/client/{variant => ui}/variant.js | 0 5 files changed, 199 insertions(+), 184 deletions(-) create mode 100644 packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js delete mode 100644 packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/toolbar_notification_setting.js rename packages/jsenv-plugin-toolbar/src/client/{variant => ui}/variant.js (100%) diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js new file mode 100644 index 0000000000..d2d56b2dc0 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js @@ -0,0 +1,112 @@ +import { createPreference } from "./preferences.js" + +export const notificationAPIDetected = typeof window.Notification === "function" + +const arrayOfOpenedNotifications = [] +const notificationPreference = createPreference("notification") +export const notificationsAreEnabled = () => { + return notificationPreference.has() ? notificationPreference.get() : true +} +export const enableNotifications = () => { + notificationPreference.set(true) +} +export const disableNotifications = () => { + notificationPreference.set(false) + // slice because arrayOfOpenedNotifications can be mutated while looping + arrayOfOpenedNotifications.slice().forEach((notification) => { + notification.close() + }) +} + +export const notifyExecutionResult = ( + executedFileRelativeUrl, + execution, + previousExecution, +) => { + const notificationEnabled = notificationsAreEnabled() + if (!notificationEnabled) return + + const notificationOptions = { + lang: "en", + icon: getFaviconHref(), + clickToFocus: true, + clickToClose: true, + } + + if (execution.status === "errored") { + if (previousExecution) { + if (previousExecution.status === "completed") { + notify("Broken", { + ...notificationOptions, + body: `${executedFileRelativeUrl} execution now failing.`, + }) + } else { + notify("Still failing", { + ...notificationOptions, + body: `${executedFileRelativeUrl} execution still failing.`, + }) + } + } else { + notify("Failing", { + ...notificationOptions, + body: `${executedFileRelativeUrl} execution failed.`, + }) + } + } else if (previousExecution && previousExecution.status === "errored") { + notify("Fixed", { + ...notificationOptions, + body: `${executedFileRelativeUrl} execution fixed.`, + }) + } +} + +const getFaviconHref = () => { + const link = document.querySelector('link[rel="icon"]') + return link ? link.href : undefined +} + +let permission = "default" + +export const notify = notificationAPIDetected + ? async ( + title, + { clickToFocus = false, clickToClose = false, ...options } = {}, + ) => { + if (permission !== "granted") { + return null + } + + const notification = new Notification(title, options) + arrayOfOpenedNotifications.push(notification) + notification.onclick = () => { + // but if the user navigated inbetween + // focusing window will show something else + // in that case it could be great to do something + // maybe like showing a message saying this execution + // is no longer visible + // we could also navigauate to this file execution but + // there is no guarantee re-executing the file would give same output + // and it would also trigger an other notification + if (clickToFocus) window.focus() + if (clickToClose) notification.close() + } + notification.onclose = () => { + const index = arrayOfOpenedNotifications.indexOf(notification) + if (index > -1) { + arrayOfOpenedNotifications.splice(index, 1) + } + } + return notification + } + : () => {} + +let requestPromise +export const requestPermission = notificationAPIDetected + ? async () => { + if (requestPromise) return requestPromise + requestPromise = Notification.requestPermission() + permission = await requestPromise + requestPromise = undefined + return permission + } + : () => Promise.resolve("default") diff --git a/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js b/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js deleted file mode 100644 index f242c345a7..0000000000 --- a/packages/jsenv-plugin-toolbar/src/client/notification/toolbar_notification.js +++ /dev/null @@ -1,181 +0,0 @@ -import { createPreference } from "../core/preferences.js" -import { enableVariant } from "../variant/variant.js" - -const notificationAvailable = typeof window.Notification === "function" -const notificationPreference = createPreference("notification") - -const arrayOfOpenedNotifications = [] -export const renderToolbarNotification = () => { - if (!notificationAvailable) { - applyNotificationNotAvailableEffects() - return - } - updatePermission() -} - -const updatePermission = () => { - const notifPermission = Notification.permission - if (notifPermission === "default") { - applyNotificationDefaultEffects() - return - } - if (notifPermission === "denied") { - applyNotificationDeniedEffects() - return - } - if (notifPermission === "granted") { - applyNotificationGrantedEffects() - return - } -} - -const notifCheckbox = document.querySelector("#toggle-notifs") - -const applyNotificationNotAvailableEffects = () => { - const notifSetting = document.querySelector(".settings-notification") - notifSetting.setAttribute("data-disabled", "true") - notifSetting.setAttribute( - "title", - `Notification not available in the browser`, - ) - notifCheckbox.disabled = true -} -const applyNotificationDefaultEffects = () => { - applyNotificationNOTGrantedEffects() - const notifSetting = document.querySelector(".settings-notification") - notifSetting.removeAttribute("data-disabled") - notifSetting.removeAttribute("title") -} -const applyNotificationDeniedEffects = () => { - applyNotificationNOTGrantedEffects() - const notifSetting = document.querySelector(".settings-notification") - notifSetting.setAttribute("data-disabled", "true") - notifSetting.setAttribute("title", `Notification denied`) -} -const applyNotificationGrantedEffects = () => { - enableVariant(document.querySelector(".notification-text"), { - notif_granted: "yes", - }) - notifCheckbox.disabled = false - notifCheckbox.checked = getNotificationPreference() - notifCheckbox.onchange = () => { - setNotificationPreference(notifCheckbox.checked) - if (!notifCheckbox.checked) { - // slice because arrayOfOpenedNotifications can be mutated while looping - arrayOfOpenedNotifications.slice().forEach((notification) => { - notification.close() - }) - } - } -} -const applyNotificationNOTGrantedEffects = () => { - enableVariant(document.querySelector(".notification-text"), { - notif_granted: "no", - }) - notifCheckbox.disabled = true - notifCheckbox.checked = false - document.querySelector("a.request_notification_permission").onclick = () => { - requestPermission().then(() => { - setNotificationPreference(true) - updatePermission() - }) - } -} - -export const notifyExecutionResult = ( - executedFileRelativeUrl, - execution, - previousExecution, -) => { - const notificationEnabled = getNotificationPreference() - if (!notificationEnabled) return - - const notificationOptions = { - lang: "en", - icon: getFaviconHref(), - clickToFocus: true, - clickToClose: true, - } - - if (execution.status === "errored") { - if (previousExecution) { - if (previousExecution.status === "completed") { - notify("Broken", { - ...notificationOptions, - body: `${executedFileRelativeUrl} execution now failing.`, - }) - } else { - notify("Still failing", { - ...notificationOptions, - body: `${executedFileRelativeUrl} execution still failing.`, - }) - } - } else { - notify("Failing", { - ...notificationOptions, - body: `${executedFileRelativeUrl} execution failed.`, - }) - } - } else if (previousExecution && previousExecution.status === "errored") { - notify("Fixed", { - ...notificationOptions, - body: `${executedFileRelativeUrl} execution fixed.`, - }) - } -} - -const getNotificationPreference = () => - notificationPreference.has() ? notificationPreference.get() : true - -const setNotificationPreference = (value) => notificationPreference.set(value) - -const getFaviconHref = () => { - const link = document.querySelector('link[rel="icon"]') - return link ? link.href : undefined -} - -let permission = "default" - -const notify = notificationAvailable - ? async ( - title, - { clickToFocus = false, clickToClose = false, ...options } = {}, - ) => { - if (permission !== "granted") { - return null - } - - const notification = new Notification(title, options) - arrayOfOpenedNotifications.push(notification) - notification.onclick = () => { - // but if the user navigated inbetween - // focusing window will show something else - // in that case it could be great to do something - // maybe like showing a message saying this execution - // is no longer visible - // we could also navigauate to this file execution but - // there is no guarantee re-executing the file would give same output - // and it would also trigger an other notification - if (clickToFocus) window.focus() - if (clickToClose) notification.close() - } - notification.onclose = () => { - const index = arrayOfOpenedNotifications.indexOf(notification) - if (index > -1) { - arrayOfOpenedNotifications.splice(index, 1) - } - } - return notification - } - : () => {} - -let requestPromise -const requestPermission = notificationAvailable - ? async () => { - if (requestPromise) return requestPromise - requestPromise = Notification.requestPermission() - permission = await requestPromise - requestPromise = undefined - return permission - } - : () => Promise.resolve("default") diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_notification_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_notification_setting.js new file mode 100644 index 0000000000..a348b49ea7 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_notification_setting.js @@ -0,0 +1,83 @@ +import { + notificationAPIDetected, + notificationsAreEnabled, + enableNotifications, + disableNotifications, + requestPermission, +} from "../core/toolbar_notification.js" +import { enableVariant } from "./variant.js" + +export const renderToolbarNotificationSetting = () => { + if (!notificationAPIDetected) { + applyNotificationNotAvailableEffects() + return + } + updatePermission() +} + +const updatePermission = () => { + const notifPermission = Notification.permission + if (notifPermission === "default") { + applyNotificationDefaultEffects() + return + } + if (notifPermission === "denied") { + applyNotificationDeniedEffects() + return + } + if (notifPermission === "granted") { + applyNotificationGrantedEffects() + return + } +} + +const notifCheckbox = document.querySelector("#toggle-notifs") + +const applyNotificationNotAvailableEffects = () => { + const notifSetting = document.querySelector(".settings-notification") + notifSetting.setAttribute("data-disabled", "true") + notifSetting.setAttribute( + "title", + `Notification not available in the browser`, + ) + notifCheckbox.disabled = true +} +const applyNotificationDefaultEffects = () => { + applyNotificationNOTGrantedEffects() + const notifSetting = document.querySelector(".settings-notification") + notifSetting.removeAttribute("data-disabled") + notifSetting.removeAttribute("title") +} +const applyNotificationDeniedEffects = () => { + applyNotificationNOTGrantedEffects() + const notifSetting = document.querySelector(".settings-notification") + notifSetting.setAttribute("data-disabled", "true") + notifSetting.setAttribute("title", `Notification denied`) +} +const applyNotificationGrantedEffects = () => { + enableVariant(document.querySelector(".notification-text"), { + notif_granted: "yes", + }) + notifCheckbox.disabled = false + notifCheckbox.checked = notificationsAreEnabled() + notifCheckbox.onchange = () => { + if (notifCheckbox.checked) { + enableNotifications() + } else { + disableNotifications() + } + } +} +const applyNotificationNOTGrantedEffects = () => { + enableVariant(document.querySelector(".notification-text"), { + notif_granted: "no", + }) + notifCheckbox.disabled = true + notifCheckbox.checked = false + document.querySelector("a.request_notification_permission").onclick = () => { + requestPermission().then(() => { + enableNotifications() + updatePermission() + }) + } +} diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js index 59d7d62981..85a54c2043 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js @@ -6,7 +6,6 @@ import { renderToolbarSettings, hideSettings, } from "../settings/toolbar_settings.js" -import { renderToolbarNotification } from "../notification/toolbar_notification.js" import { renderToolbarTheme } from "../theme/toolbar_theme.js" import { renderExecutionInToolbar } from "../execution/toolbar_execution.js" import { initToolbarEventSource } from "../eventsource/toolbar_eventsource.js" @@ -19,6 +18,7 @@ import { } from "./util/dom.js" import { startJavaScriptAnimation } from "./util/animation.js" import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js" +import { renderToolbarNotificationSetting } from "./toolbar_notification_setting.js" export const renderToolbar = async () => { const toolbarOverlay = document.querySelector("#toolbar-overlay") @@ -41,11 +41,12 @@ export const renderToolbar = async () => { document.querySelector(".toolbar-icon-wrapper"), "/", ) - renderToolbarNotification() + makeToolbarResponsive() + renderToolbarTheme() renderToolbarSettings() renderToolbarAnimationSetting() - renderToolbarTheme() + renderToolbarNotificationSetting() renderExecutionInToolbar() // this might become active but we need to detect this somehow deactivateToolbarSection(document.querySelector("#file-list-link")) diff --git a/packages/jsenv-plugin-toolbar/src/client/variant/variant.js b/packages/jsenv-plugin-toolbar/src/client/ui/variant.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/variant/variant.js rename to packages/jsenv-plugin-toolbar/src/client/ui/variant.js From 51b167f9120bec599a1805a5636130407ebb9346 Mon Sep 17 00:00:00 2001 From: dmail Date: Tue, 6 Dec 2022 11:37:43 +0100 Subject: [PATCH 07/41] organizing files --- .../src/client/core/toolbar_theme.js | 23 +++++++++++++ .../src/client/theme/toolbar_theme.js | 34 ------------------- .../src/client/{theme => ui}/jsenv_theme.css | 0 .../server_indicator/server_indicator.css} | 0 .../server_indicator/server_indicator.js} | 8 ++--- .../src/client/{ => ui}/settings/settings.css | 0 .../toolbar_animation_setting.js | 2 +- .../toolbar_notification_setting.js | 4 +-- .../{ => ui}/settings/toolbar_settings.js | 11 ++++-- .../ui/settings/toolbar_theme_setting.js | 17 ++++++++++ .../light_theme.css => ui/theme_light.css} | 0 .../src/client/ui/toolbar.css | 4 +-- .../src/client/ui/toolbar_ui.js | 14 +++----- .../src/client/{tooltip => ui}/tooltip.css | 0 .../src/client/{tooltip => ui}/tooltip.js | 0 15 files changed, 62 insertions(+), 55 deletions(-) create mode 100644 packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js delete mode 100644 packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js rename packages/jsenv-plugin-toolbar/src/client/{theme => ui}/jsenv_theme.css (100%) rename packages/jsenv-plugin-toolbar/src/client/{eventsource/eventsource.css => ui/server_indicator/server_indicator.css} (100%) rename packages/jsenv-plugin-toolbar/src/client/{eventsource/toolbar_eventsource.js => ui/server_indicator/server_indicator.js} (90%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/settings/settings.css (100%) rename packages/jsenv-plugin-toolbar/src/client/ui/{ => settings}/toolbar_animation_setting.js (92%) rename packages/jsenv-plugin-toolbar/src/client/ui/{ => settings}/toolbar_notification_setting.js (96%) rename packages/jsenv-plugin-toolbar/src/client/{ => ui}/settings/toolbar_settings.js (73%) create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_theme_setting.js rename packages/jsenv-plugin-toolbar/src/client/{theme/light_theme.css => ui/theme_light.css} (100%) rename packages/jsenv-plugin-toolbar/src/client/{tooltip => ui}/tooltip.css (100%) rename packages/jsenv-plugin-toolbar/src/client/{tooltip => ui}/tooltip.js (100%) diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js new file mode 100644 index 0000000000..c8bf9dfb2c --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js @@ -0,0 +1,23 @@ +import { createPreference } from "./preferences.js" + +const THEME_DARK = "dark" +const THEME_LIGHT = "light" +const themePreference = createPreference("jsenv_toolbar_theme") + +export const getCurrentTheme = () => { + return themePreference.has() ? themePreference.get() : THEME_DARK +} + +export const switchToLightTheme = () => { + themePreference.set(THEME_LIGHT) + setTheme(THEME_LIGHT) +} + +export const switchToDefaultTheme = () => { + themePreference.set(THEME_DARK) + setTheme(THEME_DARK) +} + +const setTheme = (theme) => { + document.querySelector("html").setAttribute("data-theme", theme) +} diff --git a/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js b/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js deleted file mode 100644 index 28c7c4a8b8..0000000000 --- a/packages/jsenv-plugin-toolbar/src/client/theme/toolbar_theme.js +++ /dev/null @@ -1,34 +0,0 @@ -import { createPreference } from "../core/preferences.js" - -const DARK_THEME = "dark" -const LIGHT_THEME = "light" -const themePreference = createPreference("jsenv_toolbar_theme") - -export const renderToolbarTheme = () => { - const theme = getThemePreference() - const checkbox = document.querySelector("#checkbox-dark-theme") - checkbox.checked = theme === DARK_THEME - setTheme(theme) - checkbox.onchange = () => { - if (checkbox.checked) { - setThemePreference(DARK_THEME) - setTheme(DARK_THEME) - } else { - setThemePreference(LIGHT_THEME) - setTheme(LIGHT_THEME) - } - } -} - -const getThemePreference = () => { - return themePreference.has() ? themePreference.get() : DARK_THEME -} - -const setThemePreference = (value) => { - themePreference.set(value) - setTheme(value) -} - -const setTheme = (theme) => { - document.querySelector("html").setAttribute("data-theme", theme) -} diff --git a/packages/jsenv-plugin-toolbar/src/client/theme/jsenv_theme.css b/packages/jsenv-plugin-toolbar/src/client/ui/jsenv_theme.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/theme/jsenv_theme.css rename to packages/jsenv-plugin-toolbar/src/client/ui/jsenv_theme.css diff --git a/packages/jsenv-plugin-toolbar/src/client/eventsource/eventsource.css b/packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/eventsource/eventsource.css rename to packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.css diff --git a/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js b/packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.js similarity index 90% rename from packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js rename to packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.js index e49e16f0d2..3776c7ff5f 100644 --- a/packages/jsenv-plugin-toolbar/src/client/eventsource/toolbar_eventsource.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.js @@ -1,14 +1,14 @@ -import { removeForceHideElement } from "../ui/util/dom.js" -import { enableVariant } from "../variant/variant.js" +import { removeForceHideElement } from "../util/dom.js" +import { enableVariant } from "../variant.js" import { toggleTooltip, removeAutoShowTooltip, autoShowTooltip, -} from "../tooltip/tooltip.js" +} from "../tooltip.js" const parentEventSourceClient = window.parent.__jsenv_event_source_client__ -export const initToolbarEventSource = () => { +export const renderServerIndicator = () => { removeForceHideElement(document.querySelector("#eventsource-indicator")) if (!parentEventSourceClient) { disableAutoreloadSetting() diff --git a/packages/jsenv-plugin-toolbar/src/client/settings/settings.css b/packages/jsenv-plugin-toolbar/src/client/ui/settings/settings.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/settings/settings.css rename to packages/jsenv-plugin-toolbar/src/client/ui/settings/settings.css diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_animation_setting.js similarity index 92% rename from packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js rename to packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_animation_setting.js index 191cc3cc5e..322da4e486 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_animation_setting.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_animation_setting.js @@ -2,7 +2,7 @@ import { animationsAreEnabled, enableAnimations, disableAnimations, -} from "../core/toolbar_animation.js" +} from "../../core/toolbar_animation.js" export const renderToolbarAnimationSetting = () => { const animCheckbox = document.querySelector("#toggle-anims") diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_notification_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_notification_setting.js similarity index 96% rename from packages/jsenv-plugin-toolbar/src/client/ui/toolbar_notification_setting.js rename to packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_notification_setting.js index a348b49ea7..61ecbde517 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_notification_setting.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_notification_setting.js @@ -4,8 +4,8 @@ import { enableNotifications, disableNotifications, requestPermission, -} from "../core/toolbar_notification.js" -import { enableVariant } from "./variant.js" +} from "../../core/toolbar_notification.js" +import { enableVariant } from "../variant.js" export const renderToolbarNotificationSetting = () => { if (!notificationAPIDetected) { diff --git a/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_settings.js similarity index 73% rename from packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js rename to packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_settings.js index 45d14830d1..a6a63785d9 100644 --- a/packages/jsenv-plugin-toolbar/src/client/settings/toolbar_settings.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_settings.js @@ -3,13 +3,20 @@ import { deactivateToolbarSection, activateToolbarSection, updateIframeOverflowOnParentWindow, -} from "../ui/util/dom.js" -import { enableVariant } from "../variant/variant.js" +} from "../util/dom.js" +import { enableVariant } from "../variant.js" +import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js" +import { renderToolbarNotificationSetting } from "./toolbar_notification_setting.js" +import { renderToolbarThemeSetting } from "./toolbar_theme_setting.js" export const renderToolbarSettings = () => { document.querySelector("#settings-button").onclick = toggleSettings document.querySelector("#button-close-settings").onclick = toggleSettings disableWarningStyle() + + renderToolbarAnimationSetting() + renderToolbarNotificationSetting() + renderToolbarThemeSetting() } const toggleSettings = () => { diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_theme_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_theme_setting.js new file mode 100644 index 0000000000..983d7da01d --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_theme_setting.js @@ -0,0 +1,17 @@ +import { + getCurrentTheme, + switchToDefaultTheme, + switchToLightTheme, +} from "../../core/toolbar_theme.js" + +export const renderToolbarThemeSetting = () => { + const checkbox = document.querySelector("#checkbox-dark-theme") + checkbox.checked = getCurrentTheme() === "dark" + checkbox.onchange = () => { + if (checkbox.checked) { + switchToDefaultTheme() + } else { + switchToLightTheme() + } + } +} diff --git a/packages/jsenv-plugin-toolbar/src/client/theme/light_theme.css b/packages/jsenv-plugin-toolbar/src/client/ui/theme_light.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/theme/light_theme.css rename to packages/jsenv-plugin-toolbar/src/client/ui/theme_light.css diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css index 2e07b7b4e7..c11701f1cb 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css @@ -1,13 +1,13 @@ @import "./globals.css"; @import "./layout.css"; +@import "./theme_light.css"; @import "./toolbar_trigger.css"; @import "../execution/execution.css"; @import "./focus.css"; @import "../eventsource/eventsource.css"; @import "../responsive/overflow_menu.css"; @import "../settings/settings.css"; -@import "../theme/light_theme.css"; -@import "../tooltip/tooltip.css"; +@import "./tooltip.css"; #toolbar button { background: none; diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js index 85a54c2043..9085bc2eaf 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js @@ -1,14 +1,13 @@ import { updateToolbarState } from "../toolbar_state.js" import { animationsAreEnabled } from "../core/toolbar_animation.js" import { toolbarVisibilityPreference } from "../core/toolbar_visibility.js" -import { hideAllTooltip, hideTooltip } from "../tooltip/tooltip.js" +import { hideAllTooltip, hideTooltip } from "./tooltip.js" import { renderToolbarSettings, hideSettings, -} from "../settings/toolbar_settings.js" -import { renderToolbarTheme } from "../theme/toolbar_theme.js" +} from "./settings/toolbar_settings.js" import { renderExecutionInToolbar } from "../execution/toolbar_execution.js" -import { initToolbarEventSource } from "../eventsource/toolbar_eventsource.js" +import { renderServerIndicator } from "./server_indicator/server_indicator.js" import { makeToolbarResponsive } from "../responsive/toolbar_responsive.js" import { setLinkHrefForParentWindow } from "./util/iframe_to_parent_href.js" import { @@ -17,8 +16,6 @@ import { setStyles, } from "./util/dom.js" import { startJavaScriptAnimation } from "./util/animation.js" -import { renderToolbarAnimationSetting } from "./toolbar_animation_setting.js" -import { renderToolbarNotificationSetting } from "./toolbar_notification_setting.js" export const renderToolbar = async () => { const toolbarOverlay = document.querySelector("#toolbar-overlay") @@ -43,14 +40,11 @@ export const renderToolbar = async () => { ) makeToolbarResponsive() - renderToolbarTheme() renderToolbarSettings() - renderToolbarAnimationSetting() - renderToolbarNotificationSetting() renderExecutionInToolbar() // this might become active but we need to detect this somehow deactivateToolbarSection(document.querySelector("#file-list-link")) - initToolbarEventSource() + renderServerIndicator() // if user click enter or space quickly while closing toolbar // it will cancel the closing diff --git a/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.css b/packages/jsenv-plugin-toolbar/src/client/ui/tooltip.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.css rename to packages/jsenv-plugin-toolbar/src/client/ui/tooltip.css diff --git a/packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js b/packages/jsenv-plugin-toolbar/src/client/ui/tooltip.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/tooltip/tooltip.js rename to packages/jsenv-plugin-toolbar/src/client/ui/tooltip.js From 1f921755e6962ee05b57f7cd7943bb7d843aa386 Mon Sep 17 00:00:00 2001 From: dmail Date: Tue, 6 Dec 2022 14:38:11 +0100 Subject: [PATCH 08/41] reorg files --- .../src/client/core/preferences.js | 10 -- .../src/client/core/toolbar_animation.js | 15 +-- .../src/client/core/toolbar_notification.js | 21 +-- .../src/client/core/toolbar_opening.js | 30 +++++ .../src/client/core/toolbar_state.js | 52 ++++++++ .../src/client/core/toolbar_theme.js | 15 ++- .../src/client/core/toolbar_visibility.js | 5 - .../src/client/toolbar.html | 34 +++-- .../src/client/toolbar_core.js | 26 ++-- .../src/client/toolbar_injector.js | 6 +- .../src/client/toolbar_state.js | 16 --- .../document_execution_indicator.css} | 23 ++-- .../document_execution_indicator.js} | 18 ++- .../document_index_link.js | 8 ++ .../src/client/ui/jsenv_theme.css | 6 +- .../server_connection_indicator.css} | 0 .../server_connection_indicator.js} | 2 +- .../src/client/ui/theme_light.css | 9 +- .../src/client/ui/toolbar.css | 22 ++-- .../toolbar_close_button.js | 15 +++ .../toolbar_menu_overflow.css} | 0 .../toolbar_menu_overflow.js} | 13 +- .../ui/toolbar_overlay/toolbar_overlay.js | 10 ++ .../settings.css | 0 .../toolbar_animation_setting.js | 0 .../toolbar_notification_setting.js | 4 +- .../toolbar_settings.js | 0 .../toolbar_theme_setting.js | 4 +- .../toolbar_trigger/render_toolbar_trigger.js | 0 .../{ => toolbar_trigger}/toolbar_trigger.css | 0 .../src/client/ui/toolbar_ui.js | 123 +++++------------- .../src/client/ui/tooltip.js | 2 +- src/plugins/explorer/client/explorer.html | 4 +- 33 files changed, 265 insertions(+), 228 deletions(-) delete mode 100644 packages/jsenv-plugin-toolbar/src/client/core/preferences.js create mode 100644 packages/jsenv-plugin-toolbar/src/client/core/toolbar_opening.js create mode 100644 packages/jsenv-plugin-toolbar/src/client/core/toolbar_state.js delete mode 100644 packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js delete mode 100644 packages/jsenv-plugin-toolbar/src/client/toolbar_state.js rename packages/jsenv-plugin-toolbar/src/client/{execution/execution.css => ui/document_execution_indicator/document_execution_indicator.css} (73%) rename packages/jsenv-plugin-toolbar/src/client/{execution/toolbar_execution.js => ui/document_execution_indicator/document_execution_indicator.js} (85%) create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/document_index_link/document_index_link.js rename packages/jsenv-plugin-toolbar/src/client/ui/{server_indicator/server_indicator.css => server_connection_indicator/server_connection_indicator.css} (100%) rename packages/jsenv-plugin-toolbar/src/client/ui/{server_indicator/server_indicator.js => server_connection_indicator/server_connection_indicator.js} (97%) create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/toolbar_close_button/toolbar_close_button.js rename packages/jsenv-plugin-toolbar/src/client/{responsive/overflow_menu.css => ui/toolbar_menu_overflow/toolbar_menu_overflow.css} (100%) rename packages/jsenv-plugin-toolbar/src/client/{responsive/toolbar_responsive.js => ui/toolbar_menu_overflow/toolbar_menu_overflow.js} (92%) create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/toolbar_overlay/toolbar_overlay.js rename packages/jsenv-plugin-toolbar/src/client/ui/{settings => toolbar_settings}/settings.css (100%) rename packages/jsenv-plugin-toolbar/src/client/ui/{settings => toolbar_settings}/toolbar_animation_setting.js (100%) rename packages/jsenv-plugin-toolbar/src/client/ui/{settings => toolbar_settings}/toolbar_notification_setting.js (96%) rename packages/jsenv-plugin-toolbar/src/client/ui/{settings => toolbar_settings}/toolbar_settings.js (100%) rename packages/jsenv-plugin-toolbar/src/client/ui/{settings => toolbar_settings}/toolbar_theme_setting.js (83%) create mode 100644 packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger/render_toolbar_trigger.js rename packages/jsenv-plugin-toolbar/src/client/ui/{ => toolbar_trigger}/toolbar_trigger.css (100%) diff --git a/packages/jsenv-plugin-toolbar/src/client/core/preferences.js b/packages/jsenv-plugin-toolbar/src/client/core/preferences.js deleted file mode 100644 index 71b76a7ce4..0000000000 --- a/packages/jsenv-plugin-toolbar/src/client/core/preferences.js +++ /dev/null @@ -1,10 +0,0 @@ -export const createPreference = (name) => { - return { - has: () => localStorage.hasOwnProperty(name), - get: () => - localStorage.hasOwnProperty(name) - ? JSON.parse(localStorage.getItem(name)) - : undefined, - set: (value) => localStorage.setItem(name, JSON.stringify(value)), - } -} diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js index 458c03b93d..8d4e966b4c 100644 --- a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_animation.js @@ -1,9 +1,6 @@ -import { toolbarState, updateToolbarState } from "../toolbar_state.js" -import { createPreference } from "./preferences.js" +import { toolbarState, updateToolbarState } from "./toolbar_state.js" -const animationPreference = createPreference("jsenv_toolbar_animation") - -export const animationsAreEnabled = () => { +export const getAnimationsEnabled = () => { return toolbarState.animationsEnabled } @@ -11,7 +8,6 @@ export const enableAnimations = () => { updateToolbarState({ animationsEnabled: true, }) - animationPreference.set(true) document.documentElement.removeAttribute("data-animation-disabled") } @@ -19,12 +15,5 @@ export const disableAnimations = () => { updateToolbarState({ animationsEnabled: false, }) - animationPreference.set(false) document.documentElement.setAttribute("data-animation-disabled", "") } - -updateToolbarState({ - animationsEnabled: animationPreference.has() - ? animationPreference.get() - : true, -}) diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js index d2d56b2dc0..ab0752572a 100644 --- a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_notification.js @@ -1,17 +1,22 @@ -import { createPreference } from "./preferences.js" +import { toolbarState, updateToolbarState } from "./toolbar_state.js" + +export const getNotificationsEnabled = () => { + return toolbarState.notificationsEnabled +} export const notificationAPIDetected = typeof window.Notification === "function" const arrayOfOpenedNotifications = [] -const notificationPreference = createPreference("notification") -export const notificationsAreEnabled = () => { - return notificationPreference.has() ? notificationPreference.get() : true -} + export const enableNotifications = () => { - notificationPreference.set(true) + updateToolbarState({ + notificationsEnabled: true, + }) } export const disableNotifications = () => { - notificationPreference.set(false) + updateToolbarState({ + notificationsEnabled: false, + }) // slice because arrayOfOpenedNotifications can be mutated while looping arrayOfOpenedNotifications.slice().forEach((notification) => { notification.close() @@ -23,7 +28,7 @@ export const notifyExecutionResult = ( execution, previousExecution, ) => { - const notificationEnabled = notificationsAreEnabled() + const notificationEnabled = toolbarState.notificationsEnabled if (!notificationEnabled) return const notificationOptions = { diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_opening.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_opening.js new file mode 100644 index 0000000000..776ddcbeb4 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_opening.js @@ -0,0 +1,30 @@ +import { toolbarState, updateToolbarState } from "./toolbar_state.js" +import { addExternalCommandCallback } from "./parent_window_communication.js" + +export const getToolbarIsOpened = () => { + return toolbarState.opened +} + +export const getToolbarIsClosed = () => { + return !toolbarState.opened +} + +export const openToolbar = () => { + updateToolbarState({ + opened: true, + }) +} + +export const closeToolbar = () => { + updateToolbarState({ + opened: false, + }) +} + +addExternalCommandCallback("openToolbar", openToolbar) +addExternalCommandCallback("closeToolbar", closeToolbar) + +window.__jsenv__.toolbar = { + open: openToolbar, + close: closeToolbar, +} diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_state.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_state.js new file mode 100644 index 0000000000..1fca4b5711 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_state.js @@ -0,0 +1,52 @@ +import { sendEventToParent } from "./parent_window_communication.js" + +const stateFromLocalStorage = localStorage.hasItem("jsenv_toolbar") + ? JSON.parse(localStorage.getItem("jsenv_toolbar")) + : {} + +export const toolbarState = { + opened: false, + theme: "dark", + animationsEnabled: false, + notificationsEnabled: false, + ...stateFromLocalStorage, + ready: false, +} + +const stateChangeCallbackSet = new Set() +export const onStateChange = (callback) => { + stateChangeCallbackSet.add(callback) + return () => { + stateChangeCallbackSet.delete(callback) + } +} + +export const effect = (callback) => { + callback(toolbarState) + onStateChange(callback) +} + +export const onStateTransition = (predicate, callback) => { + return onStateChange((state, prevState) => { + if (typeof predicate === "string") { + if (prevState[predicate] !== state[predicate]) { + callback(state, prevState) + } + } else if (predicate(prevState, state)) { + callback(state) + } + }) +} + +export const updateToolbarState = (properties) => { + const previousState = { ...toolbarState } + Object.assign(toolbarState, properties) + stateChangeCallbackSet.forEach((callback) => { + callback(toolbarState, previousState) + }) + localStorage.set("jsenv_toolbar", JSON.stringify(toolbarState)) + if (!toolbarState.ready) { + return + } + sendEventToParent("toolbar_state_change", toolbarState) +} diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js index c8bf9dfb2c..2ba61f2d51 100644 --- a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js +++ b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_theme.js @@ -1,20 +1,23 @@ -import { createPreference } from "./preferences.js" +import { toolbarState, updateToolbarState } from "./toolbar_state.js" const THEME_DARK = "dark" const THEME_LIGHT = "light" -const themePreference = createPreference("jsenv_toolbar_theme") -export const getCurrentTheme = () => { - return themePreference.has() ? themePreference.get() : THEME_DARK +export const getToolbarTheme = () => { + return toolbarState.theme } export const switchToLightTheme = () => { - themePreference.set(THEME_LIGHT) + updateToolbarState({ + theme: THEME_LIGHT, + }) setTheme(THEME_LIGHT) } export const switchToDefaultTheme = () => { - themePreference.set(THEME_DARK) + updateToolbarState({ + theme: THEME_DARK, + }) setTheme(THEME_DARK) } diff --git a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js b/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js deleted file mode 100644 index 817f1bb97c..0000000000 --- a/packages/jsenv-plugin-toolbar/src/client/core/toolbar_visibility.js +++ /dev/null @@ -1,5 +0,0 @@ -import { createPreference } from "./preferences.js" - -export const toolbarVisibilityPreference = createPreference( - "jsenv_toolbar_visible", -) diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar.html b/packages/jsenv-plugin-toolbar/src/client/toolbar.html index 0fb6757c0b..ce5f5ce88f 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar.html +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar.html @@ -12,11 +12,11 @@

viewBox="0 0 24 24" width="24px" height="24px" - class="iconToolbar" + class="toolbar_icon" > Settings

xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="crossIconSvg" - class="iconToolbar" + class="toolbar_icon" width="35px" height="35px" > @@ -393,7 +401,7 @@

Settings

width="35px" height="35px" id="dotsIconSvg" - class="iconToolbar" + class="toolbar_icon" > { - renderToolbar({ logs }) -}) -addExternalCommandCallback("showToolbar", () => { - showToolbar() -}) -addExternalCommandCallback("hideToolbar", () => { - hideToolbar() -}) +addExternalCommandCallback( + "initToolbar", + ({ logs = false, visible = false, animationsEnabled = true }) => { + updateToolbarState({ + firstRender: true, + logs, + visible, + animationsEnabled: false, + }) + initToolbarUI() + updateToolbarState({ animationsEnabled }) + }, +) updateToolbarState({ ready: true, }) diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js index 79080a48c2..25045d89ee 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js @@ -2,7 +2,7 @@ import { setAttributes, setStyles } from "./ui/util/dom.js" const jsenvLogoSvgUrl = new URL("./ui/jsenv_logo.svg", import.meta.url) -export const injectToolbar = async ({ toolbarUrl, logs = false }) => { +export const injectToolbar = async ({ toolbarUrl, ...toolbarParams }) => { if (document.readyState !== "complete") { await new Promise((resolve) => { window.addEventListener("load", resolve) @@ -55,7 +55,7 @@ export const injectToolbar = async ({ toolbarUrl, logs = false }) => { }) const cleanupRenderOnFirstStateChange = listenToolbarStateChange(() => { cleanupRenderOnFirstStateChange() - sendCommandToToolbar(iframe, "renderToolbar", { logs }) + sendCommandToToolbar(iframe, "initToolbar", toolbarParams) }) await iframeLoadedPromise @@ -130,7 +130,7 @@ export const injectToolbar = async ({ toolbarUrl, logs = false }) => { collapseToolbarTrigger() } toolbarTrigger.onclick = () => { - sendCommandToToolbar(iframe, "showToolbar") + sendCommandToToolbar(iframe, "openToolbar") } const showToolbarTrigger = () => { diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js deleted file mode 100644 index 473ed71be9..0000000000 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_state.js +++ /dev/null @@ -1,16 +0,0 @@ -import { sendEventToParent } from "./core/parent_window_communication.js" - -export const toolbarState = { - ready: false, - visible: false, - animationsEnabled: - window.localStorage.getItem("jsenv_toolbar_animation") === "true", -} - -export const updateToolbarState = (properties) => { - Object.assign(toolbarState, properties) - if (!toolbarState.ready) { - return - } - sendEventToParent("toolbar_state_change", toolbarState) -} diff --git a/packages/jsenv-plugin-toolbar/src/client/execution/execution.css b/packages/jsenv-plugin-toolbar/src/client/ui/document_execution_indicator/document_execution_indicator.css similarity index 73% rename from packages/jsenv-plugin-toolbar/src/client/execution/execution.css rename to packages/jsenv-plugin-toolbar/src/client/ui/document_execution_indicator/document_execution_indicator.css index d5fafadfaa..e1b3635843 100644 --- a/packages/jsenv-plugin-toolbar/src/client/execution/execution.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/document_execution_indicator/document_execution_indicator.css @@ -1,12 +1,11 @@ -/* Loader icon */ -#loader-icon { +#execution_pending_icon { width: 20px; height: 20px; margin: 10px; transform: scaleX(-1); color: #cecece; } -#loader-icon[data-animate] { +#execution_pending_icon[data-animate] { opacity: 0; transform-origin: center; animation: rotateLoader 1s linear infinite !important; @@ -25,18 +24,17 @@ } } -/* Check icon */ -#check-icon { +#execution_completed_icon { width: 25px; height: 25px; margin: 7px; opacity: 0; stroke-width: 5; } -#check-icon[data-animate] { +#execution_completed_icon[data-animate] { opacity: 1; } -#check-icon[data-animate] path { +#execution_completed_icon[data-animate] path { transform-origin: 50% 50%; stroke-dasharray: 48; stroke-dashoffset: 48; @@ -49,26 +47,25 @@ } } -/* Cross icon */ -#cross-icon { +#execution_failed_icon { width: 20px; height: 20px; margin: 10px; opacity: 0; stroke-width: 5; } -#cross-icon rect { +#execution_failed_icon rect { width: 33px; height: 0; fill: #d74640; } -#cross-icon[data-animate] { +#execution_failed_icon[data-animate] { opacity: 1; } -#cross-icon[data-animate] #cross_p1 { +#execution_failed_icon[data-animate] #cross_p1 { animation: draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards; } -#cross-icon[data-animate] #cross_p2 { +#execution_failed_icon[data-animate] #cross_p2 { animation: draw 0.5s cubic-bezier(0.65, 0, 0.45, 1) forwards 0.2s; } @keyframes draw { diff --git a/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js b/packages/jsenv-plugin-toolbar/src/client/ui/document_execution_indicator/document_execution_indicator.js similarity index 85% rename from packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js rename to packages/jsenv-plugin-toolbar/src/client/ui/document_execution_indicator/document_execution_indicator.js index 858d4e347b..5ba9ad9675 100644 --- a/packages/jsenv-plugin-toolbar/src/client/execution/toolbar_execution.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/document_execution_indicator/document_execution_indicator.js @@ -1,12 +1,14 @@ -import { removeForceHideElement } from "../ui/util/dom.js" -import { enableVariant } from "../variant/variant.js" -import { toggleTooltip } from "../tooltip/tooltip.js" -import { notifyExecutionResult } from "../notification/toolbar_notification.js" +import { notifyExecutionResult } from "../../core/toolbar_notification.js" +import { removeForceHideElement } from "../util/dom.js" +import { enableVariant } from "../variant.js" +import { toggleTooltip } from "../tooltip.js" -export const renderExecutionInToolbar = async () => { +export const renderDocumentExecutionIndicator = async () => { // reset file execution indicator ui applyExecutionIndicator() - removeForceHideElement(document.querySelector("#execution-indicator")) + removeForceHideElement( + document.querySelector("#document_execution_indicator"), + ) const { status, startTime, endTime } = await window.parent.__supervisor__.getDocumentExecutionResult() @@ -61,7 +63,9 @@ const applyExecutionIndicator = ({ startTime, endTime, } = {}) => { - const executionIndicator = document.querySelector("#execution-indicator") + const executionIndicator = document.querySelector( + "#document_execution_indicator", + ) enableVariant(executionIndicator, { execution: status }) const variantNode = executionIndicator.querySelector("[data-when-active]") variantNode.querySelector("button").onclick = () => diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/document_index_link/document_index_link.js b/packages/jsenv-plugin-toolbar/src/client/ui/document_index_link/document_index_link.js new file mode 100644 index 0000000000..2a971fc02c --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/document_index_link/document_index_link.js @@ -0,0 +1,8 @@ +import { setLinkHrefForParentWindow } from "../util/iframe_to_parent_href.js" + +export const renderToolbarDocumentIndexLink = () => { + setLinkHrefForParentWindow( + document.querySelector(".document_index_link"), + "/", + ) +} diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/jsenv_theme.css b/packages/jsenv-plugin-toolbar/src/client/ui/jsenv_theme.css index 2b298cbe9c..d42f6e2cb6 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/jsenv_theme.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/jsenv_theme.css @@ -1,8 +1,8 @@ /* icons */ -html[data-theme="jsenv"] .iconToolbar { +html[data-theme="jsenv"] .toolbar_icon { fill: #de5600; } -html[data-theme="jsenv"] .iconToolbar:hover { +html[data-theme="jsenv"] .toolbar_icon:hover { fill: #9a5300 !important; } @@ -69,7 +69,7 @@ html[data-theme="jsenv"] .tooltip::after { html[data-theme="jsenv"] h2 { color: orange; } -html[data-theme="jsenv"] #fileIconSvgConfig { +html[data-theme="jsenv"] #explorables_icon { fill: orange; } html[data-theme="jsenv"] #explorables h2 span { diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.css b/packages/jsenv-plugin-toolbar/src/client/ui/server_connection_indicator/server_connection_indicator.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.css rename to packages/jsenv-plugin-toolbar/src/client/ui/server_connection_indicator/server_connection_indicator.css diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.js b/packages/jsenv-plugin-toolbar/src/client/ui/server_connection_indicator/server_connection_indicator.js similarity index 97% rename from packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.js rename to packages/jsenv-plugin-toolbar/src/client/ui/server_connection_indicator/server_connection_indicator.js index 3776c7ff5f..d61b94c676 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/server_indicator/server_indicator.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/server_connection_indicator/server_connection_indicator.js @@ -8,7 +8,7 @@ import { const parentEventSourceClient = window.parent.__jsenv_event_source_client__ -export const renderServerIndicator = () => { +export const renderServerConnectionIndicator = () => { removeForceHideElement(document.querySelector("#eventsource-indicator")) if (!parentEventSourceClient) { disableAutoreloadSetting() diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/theme_light.css b/packages/jsenv-plugin-toolbar/src/client/ui/theme_light.css index 01c1e233ad..f1b44576c9 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/theme_light.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/theme_light.css @@ -4,10 +4,10 @@ html[data-theme="light"] #toolbar { } /* icons */ -html[data-theme="light"] .iconToolbar { +html[data-theme="light"] .toolbar_icon { fill: #404040; } -html[data-theme="light"] .iconToolbar:hover { +html[data-theme="light"] .toolbar_icon:hover { fill: #757575 !important; } @@ -82,14 +82,13 @@ html[data-theme="light"] h2, html[data-theme="light"] h4 { color: #076570; } -html[data-theme="light"] #fileIconSvgConfig { +html[data-theme="light"] #explorables_icon { fill: #076570; } html[data-theme="light"] #explorables h2 span { color: #ff8d00; } -html[data-theme="light"] article[data-page="file-list"], -html[data-theme="light"] #file-list-link[data-active] a { +html[data-theme="light"] article[data-page="file-list"] { background: #bbd5ea; } html[data-theme="light"] #explorables fieldset input:checked + * { diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css index c11701f1cb..033d41b572 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar.css @@ -1,13 +1,13 @@ @import "./globals.css"; @import "./layout.css"; -@import "./theme_light.css"; @import "./toolbar_trigger.css"; -@import "../execution/execution.css"; -@import "./focus.css"; -@import "../eventsource/eventsource.css"; -@import "../responsive/overflow_menu.css"; -@import "../settings/settings.css"; +@import "./theme_light.css"; @import "./tooltip.css"; +@import "./focus.css"; +@import "./execution_indicator/execution_indiactor.css"; +@import "./server_indicator/server_indicator.css"; +@import "./settings/settings.css"; +@import "./responsivness/menu_overflow.css"; #toolbar button { background: none; @@ -25,18 +25,18 @@ } /* file and settings icons */ -#fileIconSvg, +#document_index_icon, .settings-icon { width: 20px; } -.iconToolbar { +.toolbar_icon { height: 40px; fill: #cecece; color: #cecece; } -.iconToolbar:hover { +.toolbar_icon:hover { fill: #909090 !important; } @@ -47,10 +47,6 @@ display: inline-block; } -#file-list-link[data-active] a { - background: #1f262c; -} - #file[data-active] { background: rgba(31, 38, 44, 0.72); } diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_close_button/toolbar_close_button.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_close_button/toolbar_close_button.js new file mode 100644 index 0000000000..1a9b2f2fb0 --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_close_button/toolbar_close_button.js @@ -0,0 +1,15 @@ +import { toolbarState } from "../../core/toolbar_state.js" +import { openToolbar, closeToolbar } from "../../core/toolbar_opening.js" + +export const renderToolbarCloseButton = () => { + // if user click enter or space quickly while closing toolbar + // it will cancel the closing + // that's why I used toggleToolbar and not hideToolbar + document.querySelector("#button-close-toolbar").onclick = () => { + if (toolbarState.opened) { + closeToolbar() + } else { + openToolbar() + } + } +} diff --git a/packages/jsenv-plugin-toolbar/src/client/responsive/overflow_menu.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_menu_overflow/toolbar_menu_overflow.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/responsive/overflow_menu.css rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_menu_overflow/toolbar_menu_overflow.css diff --git a/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_menu_overflow/toolbar_menu_overflow.js similarity index 92% rename from packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_menu_overflow/toolbar_menu_overflow.js index 7b8b3c40b8..447307e6da 100644 --- a/packages/jsenv-plugin-toolbar/src/client/responsive/toolbar_responsive.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_menu_overflow/toolbar_menu_overflow.js @@ -2,13 +2,13 @@ import { forceHideElement, removeForceHideElement, deactivateToolbarSection, -} from "../ui/util/dom.js" -import { createHorizontalBreakpoint } from "../ui/util/responsive.js" -import { hideTooltip } from "../tooltip/tooltip.js" +} from "../util/dom.js" +import { createHorizontalBreakpoint } from "../util/responsive.js" +import { hideTooltip } from "../tooltip.js" const WINDOW_SMALL_WIDTH = 420 -export const makeToolbarResponsive = () => { +export const initToolbarMenuOverflow = () => { // apply responsive design on toolbar icons if needed + add listener on resize screen // ideally we should listen breakpoint once, for now restore toolbar const overflowMenuBreakpoint = createHorizontalBreakpoint(WINDOW_SMALL_WIDTH) @@ -19,14 +19,15 @@ export const makeToolbarResponsive = () => { overflowMenuBreakpoint.changed.listen(handleOverflowMenuBreakpoint) // overflow menu - document.querySelector("#overflow-menu-button").onclick = () => + document.querySelector("#overflow-menu-button").onclick = () => { toggleOverflowMenu() + } } const responsiveToolbar = (overflowMenuBreakpoint) => { // close all tooltips in case opened hideTooltip(document.querySelector("#eventsource-indicator")) - hideTooltip(document.querySelector("#execution-indicator")) + hideTooltip(document.querySelector("#document_execution_indicator")) // close settings box in case opened deactivateToolbarSection(document.querySelector("#settings")) diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_overlay/toolbar_overlay.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_overlay/toolbar_overlay.js new file mode 100644 index 0000000000..9583aa733e --- /dev/null +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_overlay/toolbar_overlay.js @@ -0,0 +1,10 @@ +import { hideAllTooltip } from "../tooltip.js" +import { hideSettings } from "../toolbar_settings/toolbar_settings.js" + +export const renderToolbarOverlay = () => { + const toolbarOverlay = document.querySelector("#toolbar-overlay") + toolbarOverlay.onclick = () => { + hideAllTooltip() + hideSettings() + } +} diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/settings/settings.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/settings.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/ui/settings/settings.css rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/settings.css diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_animation_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_animation_setting.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_animation_setting.js rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_animation_setting.js diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_notification_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_notification_setting.js similarity index 96% rename from packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_notification_setting.js rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_notification_setting.js index 61ecbde517..89b977fd31 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_notification_setting.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_notification_setting.js @@ -1,6 +1,6 @@ import { + getNotificationsEnabled, notificationAPIDetected, - notificationsAreEnabled, enableNotifications, disableNotifications, requestPermission, @@ -59,7 +59,7 @@ const applyNotificationGrantedEffects = () => { notif_granted: "yes", }) notifCheckbox.disabled = false - notifCheckbox.checked = notificationsAreEnabled() + notifCheckbox.checked = getNotificationsEnabled() notifCheckbox.onchange = () => { if (notifCheckbox.checked) { enableNotifications() diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_settings.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_settings.js similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_settings.js rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_settings.js diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_theme_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_theme_setting.js similarity index 83% rename from packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_theme_setting.js rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_theme_setting.js index 983d7da01d..a8baab84dc 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/settings/toolbar_theme_setting.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_theme_setting.js @@ -1,12 +1,12 @@ import { - getCurrentTheme, + getToolbarTheme, switchToDefaultTheme, switchToLightTheme, } from "../../core/toolbar_theme.js" export const renderToolbarThemeSetting = () => { const checkbox = document.querySelector("#checkbox-dark-theme") - checkbox.checked = getCurrentTheme() === "dark" + checkbox.checked = getToolbarTheme() === "dark" checkbox.onchange = () => { if (checkbox.checked) { switchToDefaultTheme() diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger/render_toolbar_trigger.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger/render_toolbar_trigger.js new file mode 100644 index 0000000000..e69de29bb2 diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger.css b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger/toolbar_trigger.css similarity index 100% rename from packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger.css rename to packages/jsenv-plugin-toolbar/src/client/ui/toolbar_trigger/toolbar_trigger.css diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js index 9085bc2eaf..0d5d9397e4 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js @@ -1,106 +1,58 @@ -import { updateToolbarState } from "../toolbar_state.js" +import { effect } from "../core/toolbar_state.js" import { animationsAreEnabled } from "../core/toolbar_animation.js" -import { toolbarVisibilityPreference } from "../core/toolbar_visibility.js" -import { hideAllTooltip, hideTooltip } from "./tooltip.js" -import { - renderToolbarSettings, - hideSettings, -} from "./settings/toolbar_settings.js" -import { renderExecutionInToolbar } from "../execution/toolbar_execution.js" -import { renderServerIndicator } from "./server_indicator/server_indicator.js" -import { makeToolbarResponsive } from "../responsive/toolbar_responsive.js" -import { setLinkHrefForParentWindow } from "./util/iframe_to_parent_href.js" -import { - getToolbarIframe, - deactivateToolbarSection, - setStyles, -} from "./util/dom.js" +import { getToolbarIframe, setStyles } from "./util/dom.js" import { startJavaScriptAnimation } from "./util/animation.js" +import { hideTooltip } from "./tooltip.js" +import { initToolbarMenuOverflow } from "./toolbar_menu_overflow/toolbar_menu_overflow.js" +import { renderToolbarOverlay } from "./toolbar_overlay/toolbar_overlay.js" +import { renderToolbarDocumentIndexButton } from "./document_index_button/document_index_button.js" +import { renderDocumentExecutionIndicator } from "./document_execution_indicator/document_execution_indicator.js" +import { renderServerConnectionIndicator } from "./server_connection_indicator/server_connection_indicator.js" +import { renderToolbarSettings } from "./toolbar_settings/toolbar_settings.js" +import { renderToolbarCloseButton } from "./toolbar_close_button/toolbar_close_button.js" + +export const initToolbarUI = () => { + effect(({ animationsEnabled }) => { + if (animationsEnabled) { + document.documentElement.setAttribute("data-toolbar-animation", "") + } else { + document.documentElement.removeAttribute("data-toolbar-animation") + } + }) -export const renderToolbar = async () => { - const toolbarOverlay = document.querySelector("#toolbar-overlay") - toolbarOverlay.onclick = () => { - hideAllTooltip() - hideSettings() - } - - const toolbarVisible = toolbarVisibilityPreference.has() - ? toolbarVisibilityPreference.get() - : true - - if (toolbarVisible) { - showToolbar({ animate: false }) - } else { - hideToolbar({ animate: false }) - } - - setLinkHrefForParentWindow( - document.querySelector(".toolbar-icon-wrapper"), - "/", - ) + effect(({ opened }) => { + if (opened) { + showToolbar() + } else { + hideToolbar() + } + }) - makeToolbarResponsive() + initToolbarMenuOverflow() + renderToolbarOverlay() + renderToolbarDocumentIndexButton() + renderDocumentExecutionIndicator() + renderServerConnectionIndicator() renderToolbarSettings() - renderExecutionInToolbar() - // this might become active but we need to detect this somehow - deactivateToolbarSection(document.querySelector("#file-list-link")) - renderServerIndicator() - - // if user click enter or space quickly while closing toolbar - // it will cancel the closing - // that's why I used toggleToolbar and not hideToolbar - document.querySelector("#button-close-toolbar").onclick = () => { - toogleToolbar() - } + renderToolbarCloseButton() } -const toogleToolbar = () => { - if (toolbarIsVisible()) { - hideToolbar() - } else { - showToolbar() - } -} - -const toolbarIsVisible = () => - document.documentElement.hasAttribute("data-toolbar-visible") - let restoreToolbarIframeParentStyles = () => {} let restoreToolbarIframeStyles = () => {} -export const hideToolbar = () => { +const hideToolbar = () => { restoreToolbarIframeParentStyles() restoreToolbarIframeStyles() - hideTooltip(document.querySelector("#eventsource-indicator")) - hideTooltip(document.querySelector("#execution-indicator")) - toolbarVisibilityPreference.set(false) - if (animationsAreEnabled()) { - document.documentElement.setAttribute("data-toolbar-animation", "") - } else { - document.documentElement.removeAttribute("data-toolbar-animation") - } + hideTooltip(document.querySelector("#document_execution_indicator")) document.documentElement.removeAttribute("data-toolbar-visible") - updateToolbarState({ - visible: false, - }) } // (by the way it might be cool to have the toolbar auto show when) // it has something to say (being disconnected from server) -export const showToolbar = () => { - toolbarVisibilityPreference.set(true) - if (animationsAreEnabled()) { - document.documentElement.setAttribute("data-toolbar-animation", "") - } else { - document.documentElement.removeAttribute("data-toolbar-animation") - } +const showToolbar = () => { document.documentElement.setAttribute("data-toolbar-visible", "") - updateToolbarState({ - visible: true, - }) - const toolbarIframe = getToolbarIframe() const toolbarIframeParent = toolbarIframe.parentNode const parentWindow = window.parent @@ -139,8 +91,3 @@ export const showToolbar = () => { }) } } - -window.toolbar = { - show: showToolbar, - hide: () => hideToolbar(), -} diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/tooltip.js b/packages/jsenv-plugin-toolbar/src/client/ui/tooltip.js index 1015f42fee..49bebb6d55 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/tooltip.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/tooltip.js @@ -1,4 +1,4 @@ -import { updateIframeOverflowOnParentWindow } from "../ui/util/dom.js" +import { updateIframeOverflowOnParentWindow } from "./util/dom.js" export const toggleTooltip = (element) => { if (element.hasAttribute("data-tooltip-visible")) { diff --git a/src/plugins/explorer/client/explorer.html b/src/plugins/explorer/client/explorer.html index 767ed672db..2f22d28965 100644 --- a/src/plugins/explorer/client/explorer.html +++ b/src/plugins/explorer/client/explorer.html @@ -221,7 +221,7 @@ fill: #24b1b0; } - #fileIconSvgConfig { + #explorables_icon { width: 25px; height: 25px; stroke: none; @@ -328,7 +328,7 @@

Date: Tue, 6 Dec 2022 14:44:39 +0100 Subject: [PATCH 09/41] rework overflow menu --- .../src/client/toolbar.html | 14 +++--- .../src/client/ui/theme_light.css | 8 ++-- .../src/client/ui/toolbar.css | 2 +- .../toolbar_menu_overflow.css | 21 ++++---- .../toolbar_menu_overflow.js | 48 ++++++++----------- 5 files changed, 43 insertions(+), 50 deletions(-) diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar.html b/packages/jsenv-plugin-toolbar/src/client/toolbar.html index ce5f5ce88f..504033f6c1 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar.html +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar.html @@ -334,7 +334,7 @@

Settings

-

Settings

-
-
-
+
+
+
@@ -234,18 +234,18 @@

Settings

Autoreload
-
+
Auto reload when a file is modified, deleted or created.
-
-
+
+
Settings Notifications
-
+
Send system notification when execution fails or is fixed. -
+
Settings
-
-
+
+
Settings Animations
-
+
Play toolbar animations and transitions.
-
-
+
+
Settings Dark mode
-
+
Choose between light and dark theme for jsenv toolbar.
- -
- @@ -97,25 +97,27 @@
-
-
+
+
Unknown state
-
+
Connecting to server...
-
+
@@ -130,27 +132,26 @@
-
+
Disconnected from server
-
+
-
+
Connected to server
-
+
Connecting to server...
@@ -140,7 +140,7 @@
-
+
Disconnected from server
@@ -172,7 +172,7 @@
-
Connected to server
+
Connected to server
diff --git a/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js b/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js index 4911dcef2d..a1cc64a7f7 100644 --- a/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js +++ b/packages/jsenv-plugin-toolbar/src/client/toolbar_injector.js @@ -39,7 +39,7 @@ export const injectToolbar = async ({ "height": 0, /* ensure toolbar children are not focusable when hidden */ "visibility": "hidden", - "transition-duration": "300ms", + "transition-duration": "0", "transition-property": "height, visibility", "border": "none", }) @@ -60,19 +60,21 @@ export const injectToolbar = async ({ return addToolbarEventCallback(iframe, "toolbar_state_change", callback) } - listenToolbarStateChange(({ animationsEnabled }) => { - if (animationsEnabled) { - iframe.style.transitionDuration = "300ms" - } else { - iframe.style.transitionDuration = "0s" - } - }) const cleanupInitOnReady = addToolbarEventCallback( iframe, "toolbar_ready", () => { cleanupInitOnReady() sendCommandToToolbar(iframe, "initToolbar") + setTimeout(() => { + listenToolbarStateChange(({ animationsEnabled }) => { + if (animationsEnabled) { + iframe.style.transitionDuration = "300ms" + } else { + iframe.style.transitionDuration = "0s" + } + }) + }) }, ) diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_animation_setting.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_animation_setting.js index cc47b2c0e5..ffeb7bec22 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_animation_setting.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_animation_setting.js @@ -1,3 +1,5 @@ +import { effect } from "@preact/signals" + import { animationsEnabledSignal } from "../../core/animation_signals.js" import { enableAnimations, @@ -6,7 +8,11 @@ import { export const renderToolbarAnimationSetting = () => { const animCheckbox = document.querySelector("#toggle_anims") - animCheckbox.checked = animationsEnabledSignal.value + + effect(() => { + const animationsEnabled = animationsEnabledSignal.value + animCheckbox.checked = animationsEnabled + }) animCheckbox.onchange = () => { if (animCheckbox.checked) { enableAnimations() diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_settings.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_settings.js index 93ee1b7fa8..6281972992 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_settings.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_settings/toolbar_settings.js @@ -40,15 +40,15 @@ export const disableWarningStyle = () => { } export const settingsAreVisible = () => { - return toolbarSectionIsActive(document.querySelector(`#settings`)) + return toolbarSectionIsActive(document.querySelector("#settings")) } export const hideSettings = () => { - deactivateToolbarSection(document.querySelector(`#settings`)) + deactivateToolbarSection(document.querySelector("#settings")) updateIframeOverflowOnParentWindow() } export const showSettings = () => { - activateToolbarSection(document.querySelector(`#settings`)) + activateToolbarSection(document.querySelector("#settings")) updateIframeOverflowOnParentWindow() } diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js index 71fd0afd19..1dfe059337 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/toolbar_ui.js @@ -3,7 +3,11 @@ import { effect } from "@preact/signals" import { logger } from "../core/toolbar_logger.js" import { animationsEnabledSignal } from "../core/animation_signals.js" import { openedSignal } from "../core/toolbar_open_signals.js" -import { getToolbarIframe, setStyles } from "./util/dom.js" +import { + getToolbarIframe, + setStyles, + updateIframeOverflowOnParentWindow, +} from "./util/dom.js" import { startJavaScriptAnimation } from "./util/animation.js" import { hideAllTooltips } from "./tooltips/tooltips.js" import { initToolbarMenuOverflow } from "./toolbar_menu_overflow/toolbar_menu_overflow.js" @@ -19,6 +23,7 @@ export const initToolbarUI = () => { const opened = openedSignal.value if (opened) { showToolbar() + updateIframeOverflowOnParentWindow() } else { hideToolbar() } @@ -48,7 +53,6 @@ const hideToolbar = () => { // it has something to say (being disconnected from server) const showToolbar = () => { const animationsEnabled = animationsEnabledSignal.peek() - logger.debug("show toolbar", { animationsEnabled }) document.documentElement.setAttribute("data-toolbar-visible", "") const toolbarIframe = getToolbarIframe() diff --git a/packages/jsenv-plugin-toolbar/src/client/ui/util/dom.js b/packages/jsenv-plugin-toolbar/src/client/ui/util/dom.js index bc05752368..70e3c8945d 100644 --- a/packages/jsenv-plugin-toolbar/src/client/ui/util/dom.js +++ b/packages/jsenv-plugin-toolbar/src/client/ui/util/dom.js @@ -3,12 +3,10 @@ export const updateIframeOverflowOnParentWindow = () => { // can happen while parent iframe reloads return } - const aTooltipIsOpened = document.querySelector("[data-tooltip-visible]") || document.querySelector("[data-tooltip-auto-visible]") const settingsAreOpened = document.querySelector("#settings[data-active]") - if (aTooltipIsOpened || settingsAreOpened) { enableIframeOverflowOnParentWindow() } else { @@ -16,14 +14,16 @@ export const updateIframeOverflowOnParentWindow = () => { } } -let iframeOverflowEnabled = false const enableIframeOverflowOnParentWindow = () => { - if (iframeOverflowEnabled) return - iframeOverflowEnabled = true - const iframe = getToolbarIframe() + const transitionDuration = iframe.style.transitionDuration - setStyles(iframe, { "height": "100%", "transition-duration": "0ms" }) + setStyles(iframe, { + "height": "100%", + // we don't want to animate height transition + // but if it was enabled, we'll restore it afterwards + "transition-duration": "0ms", + }) if (transitionDuration) { setTimeout(() => { setStyles(iframe, { "transition-duration": transitionDuration }) @@ -32,12 +32,14 @@ const enableIframeOverflowOnParentWindow = () => { } const disableIframeOverflowOnParentWindow = () => { - if (!iframeOverflowEnabled) return - iframeOverflowEnabled = false - const iframe = getToolbarIframe() const transitionDuration = iframe.style.transitionDuration - setStyles(iframe, { "height": "40px", "transition-duration": "0ms" }) + setStyles(iframe, { + "height": "40px", + // we don't want to animate height transition + // but if it was enabled, we'll restore it afterwards + "transition-duration": "0ms", + }) if (transitionDuration) { setTimeout(() => { setStyles(iframe, { "transition-duration": transitionDuration }) From fcfc689a1c8319a80dfb1b0815f5de5283f2f396 Mon Sep 17 00:00:00 2001 From: dmail Date: Wed, 7 Dec 2022 14:11:08 +0100 Subject: [PATCH 21/41] rebuild jsenv toolbar dist --- .../css/{toolbar_main.css => toolbar.css} | 585 +++--- .../dist/html/toolbar.html | 138 +- .../dist/js/toolbar_core.js | 1631 +++++++++++++++++ .../dist/js/toolbar_injector.js | 167 +- .../dist/js/toolbar_main.js | 900 --------- .../dist/jsenv_plugin_toolbar.js | 28 +- packages/jsenv-plugin-toolbar/package.json | 7 +- .../src/client/toolbar_injector.js | 14 +- 8 files changed, 2046 insertions(+), 1424 deletions(-) rename packages/jsenv-plugin-toolbar/dist/css/{toolbar_main.css => toolbar.css} (69%) create mode 100644 packages/jsenv-plugin-toolbar/dist/js/toolbar_core.js delete mode 100644 packages/jsenv-plugin-toolbar/dist/js/toolbar_main.js diff --git a/packages/jsenv-plugin-toolbar/dist/css/toolbar_main.css b/packages/jsenv-plugin-toolbar/dist/css/toolbar.css similarity index 69% rename from packages/jsenv-plugin-toolbar/dist/css/toolbar_main.css rename to packages/jsenv-plugin-toolbar/dist/css/toolbar.css index 4b01c8b7f3..eeb2c24a44 100644 --- a/packages/jsenv-plugin-toolbar/dist/css/toolbar_main.css +++ b/packages/jsenv-plugin-toolbar/dist/css/toolbar.css @@ -1,4 +1,79 @@ -#loader-icon { +* { + box-sizing: border-box; +} + +html, body { + height: 100%; + margin: 0; + padding: 0; +} + +html { + font-family: arial, sans; +} + +html[data-animation-disabled] * { + transition: none !important; + animation-duration: 0s !important; + animation-delay: 0s !important; +} + +[data-when], [data-force-hide] { + display: none !important; +} + +button:focus, a:focus, input:focus, [data-contains-hidden-input] input:focus + * { + outline-offset: -2px; + outline-style: none; +} + +[data-contains-hidden-input] input:focus + * { + outline-offset: -2px; + outline-width: 4px; +} + +button:focus-visible, a:focus-visible, input:focus-visible, [data-contains-hidden-input] input:focus-visible + * { + outline-style: auto; +} + +[data-contains-hidden-input] input:focus-visible + * { + outline-color: #0096ff; +} + +@-moz-document url-prefix() { + button:focus-visible, a:focus-visible, input:focus-visible, [data-input-customized] input:focus-visible + * { + outline-offset: 0; + outline: 2px solid #0096ff; + } +} + +::-moz-focus-inner { + border: 0; +} + +#toolbar_wrapper { + justify-content: center; + display: flex; +} + +#toolbar_overlay { + width: 100%; + height: 100%; + filter: url(#better-blur); + background-color: #0003; + position: fixed; + top: 0; + left: 0; +} + +#toolbar { + height: 40px; + width: 100%; + background: #404040; + position: fixed; + bottom: 0; +} +#execution_pending_icon { width: 20px; height: 20px; color: #cecece; @@ -6,7 +81,7 @@ transform: scaleX(-1); } -#loader-icon[data-animate] { +#execution_pending_icon[data-animate] { opacity: 0; transform-origin: center; animation: 1s linear infinite rotateLoader !important; @@ -28,7 +103,7 @@ } } -#check-icon { +#execution_completed_icon { width: 25px; height: 25px; opacity: 0; @@ -36,11 +111,11 @@ margin: 7px; } -#check-icon[data-animate] { +#execution_completed_icon[data-animate] { opacity: 1; } -#check-icon[data-animate] path { +#execution_completed_icon[data-animate] path { transform-origin: 50%; stroke-dasharray: 48; stroke-dashoffset: 48px; @@ -54,7 +129,7 @@ } } -#cross-icon { +#execution_failed_icon { width: 20px; height: 20px; opacity: 0; @@ -62,21 +137,21 @@ margin: 10px; } -#cross-icon rect { +#execution_failed_icon rect { width: 33px; height: 0; fill: #d74640; } -#cross-icon[data-animate] { +#execution_failed_icon[data-animate] { opacity: 1; } -#cross-icon[data-animate] #cross_p1 { +#execution_failed_icon[data-animate] #cross_p1 { animation: .5s cubic-bezier(.65, 0, .45, 1) forwards draw; } -#cross-icon[data-animate] #cross_p2 { +#execution_failed_icon[data-animate] #cross_p2 { animation: .5s cubic-bezier(.65, 0, .45, 1) .2s forwards draw; } @@ -86,44 +161,16 @@ width: 45px; } } -button:focus, a:focus, input:focus, [data-contains-hidden-input] input:focus + * { - outline-offset: -2px; - outline-style: none; -} - -[data-contains-hidden-input] input:focus + * { - outline-offset: -2px; - outline-width: 4px; -} - -html[data-last-interaction="keyboard"] button:focus, html[data-last-interaction="keyboard"] a:focus, html[data-last-interaction="keyboard"] input:focus, html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus + * { - outline-style: auto; -} - -html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus + * { - outline-color: #0096ff; -} - -@-moz-document url-prefix() { - html[data-last-interaction="keyboard"] button:focus, html[data-last-interaction="keyboard"] a:focus, html[data-last-interaction="keyboard"] input:focus, html[data-last-interaction="keyboard"] [data-input-customized] input:focus + * { - outline-offset: 0; - outline: 2px solid #0096ff; - } -} - -::-moz-focus-inner { - border: 0; -} -#eventsource-indicator button { +#server_indicator button { position: relative; } -#eventsource-indicator button svg { +#server_indicator button svg { width: 40px; height: 40px; } -#eventsource-indicator .event-source-autoreload { +#server_indicator .autoreload { width: 32px; height: 32px; margin: 4px; @@ -132,25 +179,25 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus left: 0; } -.event-source-autoreload[data-variant="enabled"] { +.autoreload[data-variant="enabled"] { color: green; } -#eventsource-indicator .event-source-icon { +#server_indicator .icon { width: 40px; height: 40px; } -.eventsource-circle { +.server_indicator_circle { stroke: #000; stroke-width: 0; } -.eventsource-circle[data-variant="off"] { +.server_indicator_circle[data-variant="off"] { fill: #cecece; } -.eventsource-circle[data-variant="connecting"] { +.server_indicator_circle[data-variant="connecting"] { fill: #cecece; transform-origin: center; animation: 1.2s ease-out infinite wink; @@ -170,7 +217,15 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus } } -.eventsource-ring { +.server_indicator_circle[data-variant="connected"] { + fill: green; +} + +.server_indicator_circle[data-variant="failed"] { + fill: #c00; +} + +.server_indicator_ring { stroke: #cecece75; stroke-width: 4px; fill: #0000; @@ -193,87 +248,130 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus transform: scale(1); } } +html[data-theme="light"] #toolbar { + background: #e8eff3; +} -.eventsource-circle[data-variant="connected"] { - fill: green; +html[data-theme="light"] .toolbar_icon { + fill: #404040; } -.eventsource-circle[data-variant="failed"] { - fill: #c00; +html[data-theme="light"] .toolbar_icon:hover { + fill: #757575 !important; } -#overflow-menu-button { - width: 40px; - background: #404040; - display: none; - position: absolute; - top: 0; - right: 0; + +html[data-theme="light"] #loader-icon { + color: #404040; } -#dotsIconSvg { - width: 25px; +html[data-theme="light"] #settings-box, html[data-theme="light"] #settings[data-active] button { + background: #87acd3; } -#overflow-menu { - visibility: hidden; - width: 100%; - height: 100%; - opacity: 0; - background: #404040; - display: none; - position: absolute; - top: 0; - bottom: 0; - left: 100%; +html[data-theme="light"] .settings-box-item { + background: #97b9da; } -#overflow-menu[data-animate] { - transition-property: left, opacity; - transition-duration: .3s; +html[data-theme="light"] #settings-box-header .settings-icon { + stroke: #076570; } -#overflow-menu > * { - vertical-align: middle; - text-align: center; - display: table-cell; +html[data-theme="light"] #button-close-settings { + fill: #076570; } -#toolbar[data-overflow-menu-enabled] #overflow-menu-button { - display: block; +html[data-theme="light"] #settings-box h3, html[data-theme="light"] #settings-box .category-title { + color: #076570; } -#toolbar[data-overflow-menu-visible] #overflow-menu-button { - background: #030713; +html[data-theme="light"] #settings-box .category-title svg { + fill: #076570; } -#toolbar[data-overflow-menu-enabled][data-overflow-menu-visible] #toolbar-wrapper { - visibility: hidden; +html[data-theme="light"] #settings-box .category-subtitle { + color: #5d5d5d; } -#toolbar[data-overflow-menu-visible] #overflow-menu { - visibility: visible; - opacity: 1; - margin-left: -40px; - display: block; - left: 0; +html[data-theme="light"] label { + color: #002e33; } -#toolbar[data-overflow-menu-enabled] #settings-box { - right: -40px; +html[data-theme="light"] .switch input + * .slider, html[data-theme="light"] .switch input + * .square { + background-color: gray; +} + +html[data-theme="light"] .switch input:checked + * .slider, html[data-theme="light"] .switch input:checked + * .square { + background-color: #076570; +} + +html[data-theme="light"] .tooltip { + color: #fff; + background-color: #8a919a; +} + +html[data-theme="light"] .tooltip_action { + border-color: #fff; +} + +html[data-theme="light"] .tooltip:after { + border-color: #8a919a #0000 #0000; +} + +html[data-theme="light"] #menu_overflow_button { + background: #e8eff3; +} + +html[data-theme="light"] #toolbar[data-menu-overflow-opened] #menu_overflow_button { + background: #a5a9ad; } -#settings-button { + +html[data-theme="light"] #menu_overflow { + background: #dfe4e7; +} + +html[data-theme="light"] h2, html[data-theme="light"] h4 { + color: #076570; +} + +html[data-theme="light"] #explorables_icon { + fill: #076570; +} + +html[data-theme="light"] #explorables h2 span { + color: #ff8d00; +} + +html[data-theme="light"] article[data-page="file-list"] { + background: #bbd5ea; +} + +html[data-theme="light"] #explorables fieldset input:checked + * { + color: #ff8d00; + background: #bbd5ea; +} + +html[data-theme="light"] #explorables #explorables-header, html[data-theme="light"] #explorables fieldset label input + * { + background: #ddf0ff; +} + +html[data-theme="light"] .execution-link { + color: #076570; + background: #ddf0ff; +} + +#settings_button { position: relative; } -#settings-button[data-warning] svg { +#settings_button[data-warning] svg { fill: #cb5909; } -#settings-button[data-warning] svg:hover { +#settings_button[data-warning] svg:hover { fill: #ff8c00 !important; } -#settings-box { +#settings_box { text-align: center; color: #fff; min-width: 250px; @@ -289,7 +387,7 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus right: 0; } -[data-active] #settings-box { +[data-active] #settings_box { animation: .3s comeUp; display: block; } @@ -306,7 +404,7 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus } } -#settings-box-body { +#settings_box_body { text-align: left; max-height: 80vh; width: 100vw; @@ -316,21 +414,21 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus overflow: auto; } -.settings-box-items-wrapper { +.settings_box_items_wrapper { max-width: 700px; flex-wrap: wrap; justify-content: center; display: flex; } -.settings-box-item { +.settings_box_item { width: 250px; background: #0c111b; margin: 9px 18px; padding: 15px; } -#settings-box-header .settings-icon { +#settings_box_header .settings_icon { fill: none; stroke: #24b1b0; stroke-width: 2px; @@ -341,19 +439,19 @@ html[data-last-interaction="keyboard"] [data-contains-hidden-input] input:focus top: 4px; } -#settings-box h3 { +#settings_box h3 { color: #24b1b0; margin: 10px 0; font-size: 20px; display: inline-block; } -#button-close-settings { +#settings_close_button { float: right; fill: #24b1b0; } -#button-close-settings:hover { +#settings_close_button:hover { opacity: .6; } @@ -364,7 +462,7 @@ label { display: block; } -#settings-box .category-title { +#settings_box .category_title { color: #24b1b0; margin-top: 4px; margin-bottom: 15px; @@ -372,7 +470,7 @@ label { display: inline-block; } -#settings-box .category-title svg { +#settings_box .category_title svg { fill: currentColor; vertical-align: top; width: 18px; @@ -380,7 +478,7 @@ label { margin-right: 5px; } -#settings-box .category-subtitle { +#settings_box .category_subtitle { color: #a9a8a8; max-width: 220px; font-size: 14px; @@ -445,131 +543,80 @@ label { transform: translateX(1.6em); } -.settings-box-item[data-disabled] { +.settings_box_item[data-disabled] { cursor: default; background-color: #0c111b66; } -.settings-box-item[data-disabled] .category-title, .settings-box-item[data-disabled] .switch, .settings-box-item[data-disabled] .category-subtitle { +.settings_box_item[data-disabled] .category_title, .settings_box_item[data-disabled] .switch, .settings_box_item[data-disabled] .category_subtitle { opacity: .4; } -.settings-box-item[data-disabled] .category-title span, .settings-box-item[data-disabled] .category-subtitle { +.settings_box_item[data-disabled] .category_title span, .settings_box_item[data-disabled] .category_subtitle { text-decoration: line-through; } -.settings-box-item[data-disabled] .switch { +.settings_box_item[data-disabled] .switch { cursor: default; } -html[data-theme="light"] #toolbar { - background: #e8eff3; -} - -html[data-theme="light"] .iconToolbar { - fill: #404040; -} - -html[data-theme="light"] .iconToolbar:hover { - fill: #757575 !important; -} - -html[data-theme="light"] #loader-icon { - color: #404040; -} - -html[data-theme="light"] #settings-box, html[data-theme="light"] #settings[data-active] button { - background: #87acd3; -} - -html[data-theme="light"] .settings-box-item { - background: #97b9da; -} - -html[data-theme="light"] #settings-box-header .settings-icon { - stroke: #076570; -} - -html[data-theme="light"] #button-close-settings { - fill: #076570; -} - -html[data-theme="light"] #settings-box h3, html[data-theme="light"] #settings-box .category-title { - color: #076570; -} - -html[data-theme="light"] #settings-box .category-title svg { - fill: #076570; -} - -html[data-theme="light"] #settings-box .category-subtitle { - color: #5d5d5d; -} - -html[data-theme="light"] label { - color: #002e33; -} - -html[data-theme="light"] .switch input + * .slider, html[data-theme="light"] .switch input + * .square { - background-color: gray; -} - -html[data-theme="light"] .switch input:checked + * .slider, html[data-theme="light"] .switch input:checked + * .square { - background-color: #076570; -} - -html[data-theme="light"] .tooltip { - color: #fff; - background-color: #8a919a; -} - -html[data-theme="light"] .tooltipAction { - border-color: #fff; -} - -html[data-theme="light"] .tooltip:after { - border-color: #8a919a #0000 #0000; -} - -html[data-theme="light"] #overflow-menu-button { - background: #e8eff3; +#menu_overflow_button { + width: 40px; + background: #404040; + display: none; + position: absolute; + top: 0; + right: 0; } -html[data-theme="light"] #toolbar[data-overflow-menu-visible] #overflow-menu-button { - background: #a5a9ad; +#menu_overflow_icon { + width: 25px; } -html[data-theme="light"] #overflow-menu { - background: #dfe4e7; +#menu_overflow { + visibility: hidden; + width: 100%; + height: 100%; + opacity: 0; + background: #404040; + display: none; + position: absolute; + top: 0; + bottom: 0; + left: 100%; } -html[data-theme="light"] h2, html[data-theme="light"] h4 { - color: #076570; +#menu_overflow[data-animate] { + transition-property: left, opacity; + transition-duration: .3s; } -html[data-theme="light"] #fileIconSvgConfig { - fill: #076570; +#menu_overflow > * { + vertical-align: middle; + text-align: center; } -html[data-theme="light"] #explorables h2 span { - color: #ff8d00; +#toolbar[data-menu-overflow-enabled] #menu_overflow_button { + display: block; } -html[data-theme="light"] article[data-page="file-list"], html[data-theme="light"] #file-list-link[data-active] a { - background: #bbd5ea; +#toolbar[data-menu-overflow-opened] #menu_overflow_button { + background: #030713; } -html[data-theme="light"] #explorables fieldset input:checked + * { - color: #ff8d00; - background: #bbd5ea; +#toolbar[data-menu-overflow-enabled][data-menu-overflow-opened] #toolbar-wrapper { + visibility: hidden; } -html[data-theme="light"] #explorables #explorables-header, html[data-theme="light"] #explorables fieldset label input + * { - background: #ddf0ff; +#toolbar[data-menu-overflow-opened] #menu_overflow { + visibility: visible; + opacity: 1; + margin-left: -40px; + display: block; + left: 0; } -html[data-theme="light"] .execution-link { - color: #076570; - background: #ddf0ff; +#toolbar[data-menu-overflow-enabled] #settings_box { + right: -40px; } .tooltip { color: #fff; @@ -578,22 +625,29 @@ html[data-theme="light"] .execution-link { cursor: default; background-color: #5e5e5e; border-radius: 6px; - margin-left: -40px; + margin-bottom: 6px; padding: 10px; font-size: 14px; display: none; position: absolute; - bottom: 120%; + bottom: 100%; } .tooltip:after { content: ""; border: 5px solid #0000; border-top-color: #5e5e5e; - margin-left: -5px; position: absolute; top: 100%; - left: 60px; + left: 14px; +} + +.tooltip[data-toolip-left] { + margin-right: 5px; +} + +.tooltip[data-toolip-left]:after { + left: 15px; } [data-tooltip-visible] .tooltip, [data-tooltip-auto-visible] .tooltip { @@ -611,7 +665,7 @@ html[data-theme="light"] .execution-link { } } -.tooltipAction { +.tooltip_action { border: 1px solid #a0a0a0; border-radius: 3px; margin-top: 6px; @@ -619,75 +673,19 @@ html[data-theme="light"] .execution-link { display: inline-block; } -.tooltipAction a { +.tooltip_action a { vertical-align: middle; color: #fff; text-decoration: none; } -.tooltipIcon { +.tooltip_icon { fill: #fff; width: 20px; height: 20px; vertical-align: middle; } -html[data-animation-disabled] * { - transition: none !important; - animation-duration: 0s !important; - animation-delay: 0s !important; -} - -[data-when] { - display: none !important; -} - -* { - box-sizing: border-box; -} - -html, body { - margin: 0; - padding: 0; -} - -html { - font-family: arial, sans; -} - -[data-force-hide] { - display: none !important; -} - -#toolbar-overlay { - width: 100%; - height: 100%; - filter: url(#better-blur); - background-color: #0003; - position: fixed; - top: 0; - left: 0; -} - -#toolbar { - height: 40px; - width: 100%; - background: #404040; - position: fixed; - bottom: 0; -} - -#toolbar-wrapper { - width: 100%; - height: 100%; - display: table; -} - -#toolbar-wrapper > * { - vertical-align: middle; - display: table-cell; -} - #toolbar button { height: 100%; background: none; @@ -699,31 +697,27 @@ html { cursor: pointer; } -#fileIconSvg, .settings-icon { +#document_index_icon, .settings-icon { width: 20px; } -.iconToolbar { +.toolbar_icon { height: 40px; fill: #cecece; color: #cecece; } -.iconToolbar:hover { +.toolbar_icon:hover { fill: #909090 !important; } -.toolbar-icon-wrapper { +.toolbar_icon_wrapper { height: 100%; text-align: center; width: 40px; display: inline-block; } -#file-list-link[data-active] a { - background: #1f262c; -} - #file[data-active] { background: #1f262cb8; } @@ -732,51 +726,16 @@ html { background: #030713; } -#crossIconSvg { +#toolbar_close_button_icon { width: 18px; } -#toolbar-trigger { - height: 40px; - width: 40px; - background: none; - border: 1px solid #00000054; - border-bottom: none; - border-radius: 5px 5px 0 0; - padding: 0; - display: block; - position: absolute; - bottom: -32px; - right: 20px; - overflow: hidden; - box-shadow: 0 0 6px 2px #00000075; -} - -#toolbar-trigger[data-animate] { - transition: all .6s; -} - -#toolbar-trigger #jsenvLogoSvg { - width: 35px; - height: 35px; - opacity: 0; - transition: all .6s; -} - -html[data-toolbar-visible] #toolbar-trigger { - display: none; -} - -#toolbar-trigger:hover { - cursor: pointer; -} - -#toolbar-trigger[data-expanded] { - bottom: 0; +#document_index_link { + display: flex; } -#toolbar-trigger[data-expanded] #jsenvLogoSvg { - opacity: 1; +#document_index_icon { + margin-left: 10px; } #toolbar a { diff --git a/packages/jsenv-plugin-toolbar/dist/html/toolbar.html b/packages/jsenv-plugin-toolbar/dist/html/toolbar.html index af2e41a247..2a1c40578b 100644 --- a/packages/jsenv-plugin-toolbar/dist/html/toolbar.html +++ b/packages/jsenv-plugin-toolbar/dist/html/toolbar.html @@ -3,30 +3,30 @@ - + -
+
-
-
-
-
Execution completed in X ms
-
-
-
Connected to server
-
-