From 3c1bcec0efca954a0785b781ef58c47c4a78ef16 Mon Sep 17 00:00:00 2001 From: John Date: Tue, 18 Jun 2024 12:19:04 +0100 Subject: [PATCH] Added support for saving the layout as well as title and icons. Also added extra layouts --- .../client/src/content/settings-dialog.ts | 86 ++ .../client/src/platform/apps/apps.ts | 21 +- .../src/platform/layout/layout-override.ts | 39 +- .../client/src/platform/settings.ts | 67 +- .../client/src/provider.ts | 174 +++- .../client/src/shapes/layout-shapes.ts | 3 +- .../client/src/shapes/setting-shapes.ts | 72 ++ .../client/webpack.config.js | 14 + .../package.json | 3 +- .../public/apps.json | 209 ----- .../public/common/apps.json | 213 +++++ .../public/images/gear.svg | 8 + .../public/layouts/default.layout.fin.json | 447 ++++++++- .../public/manifest.json | 41 +- .../public/platform/provider.html | 12 +- .../platform/settings/settings-dialog.html | 92 ++ .../public/settings.json | 48 + .../public/style/core-web-styles.css | 857 +++++++++--------- how-to/web-interop/public/manifest.json | 25 +- package-lock.json | 1 + 20 files changed, 1634 insertions(+), 798 deletions(-) create mode 100644 how-to/web-interop-support-context-and-intents/client/src/content/settings-dialog.ts create mode 100644 how-to/web-interop-support-context-and-intents/public/common/apps.json create mode 100644 how-to/web-interop-support-context-and-intents/public/images/gear.svg create mode 100644 how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html create mode 100644 how-to/web-interop-support-context-and-intents/public/settings.json diff --git a/how-to/web-interop-support-context-and-intents/client/src/content/settings-dialog.ts b/how-to/web-interop-support-context-and-intents/client/src/content/settings-dialog.ts new file mode 100644 index 0000000..964805b --- /dev/null +++ b/how-to/web-interop-support-context-and-intents/client/src/content/settings-dialog.ts @@ -0,0 +1,86 @@ +import { getSettings } from "../platform/settings"; + +window.addEventListener("DOMContentLoaded", async () => { + if (window.fdc3) { + await init(); + } else { + window.addEventListener("fdc3Ready", async () => { + await init(); + }); + } +}); + +/** + * Initialize the settings. + */ +async function init(): Promise { + const settings = await getSettings(); + if (settings === undefined) { + console.error("Unable to run the example as we have been unable to load the web manifest and it's settings from the currently running html page. Please ensure that the web manifest is being served and that it contains the custom_settings section."); + return; + } + + // platform settings + const title = document.querySelector("#title"); + const subTitle = document.querySelector("#subTitle"); + const logo = document.querySelector("#logo"); + + // cloud settings + const userId = document.querySelector("#userId"); + const password = document.querySelector("#password"); + const platformId = document.querySelector("#platformId"); + const cloudUrl = document.querySelector("#cloudUrl"); + const sourceId = document.querySelector("#sourceId"); + const sourceDisplayName = document.querySelector("#sourceDisplayName"); + + const saveButton = document.querySelector("#save"); + const resetButton = document.querySelector("#reset"); + const cancelButton = document.querySelector("#cancel"); + + // assign returned settings to the input fields + if(title === null || subTitle === null || logo === null || + userId === null || password === null || platformId === null || + cloudUrl === null || sourceId === null || sourceDisplayName === null || + saveButton === null || resetButton === null || cancelButton === null) { + console.error("Unable to use settings as there are missing input fields/buttons."); + return; + } + + title.value = settings?.platform?.ui?.title; + subTitle.value = settings?.platform?.ui?.subTitle; + logo.value = settings?.platform?.ui?.logo; + userId.value = settings?.platform.cloudInterop?.connectParams?.userId; + password.value = settings?.platform.cloudInterop?.connectParams?.password; + platformId.value = settings?.platform.cloudInterop?.connectParams?.platformId; + cloudUrl.value = settings?.platform.cloudInterop?.connectParams?.url; + sourceId.value = settings?.platform.cloudInterop?.connectParams.sourceId ?? ""; + sourceDisplayName.value = settings?.platform.cloudInterop?.connectParams.sourceDisplayName ?? ""; + + const channel = "platform/settings/dialog"; + const appChannel = await window.fdc3.getOrCreateChannel(channel); + + saveButton.addEventListener("click", async () => { + settings.platform.ui.title = title.value; + settings.platform.ui.subTitle = subTitle.value; + settings.platform.ui.logo = logo.value; + settings.platform.cloudInterop.connectParams.userId = userId.value; + settings.platform.cloudInterop.connectParams.password = password.value; + settings.platform.cloudInterop.connectParams.platformId = platformId.value; + settings.platform.cloudInterop.connectParams.url = cloudUrl.value; + settings.platform.cloudInterop.connectParams.sourceId = sourceId.value; + settings.platform.cloudInterop.connectParams.sourceDisplayName = sourceDisplayName.value; + + // an example of using an app channel. + await appChannel.broadcast({ type: "platform.settings.dialog.action", id: { action: "save-reload" }, settings }); + }); + + resetButton.addEventListener("click", async () => { + // an example of using an app channel. + await appChannel.broadcast({ type: "platform.settings.dialog.action", id: { action: "reset-reload" } }); + }); + + cancelButton.addEventListener("click", async () => { + // an example of using an app channel. + await appChannel.broadcast({ type: "platform.settings.dialog.action", id: { action: "close" } }); + }); +} diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts index cc818f1..d9cf93e 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/platform/apps/apps.ts @@ -27,12 +27,21 @@ export async function getApps(): Promise { return cachedApps; } const settings = await getSettings(); - if (settings?.platform?.app?.directory) { - const response = await fetch(settings.platform.app.directory); - const appDirectory = (await response.json()) as { applications: PlatformApp[] }; - cachedApps = appDirectory.applications; - return cachedApps; - } + if (Array.isArray(settings?.platform?.app?.directory)) { + // Fetch data from all URLs concurrently + const responses = await Promise.all( + settings.platform.app.directory.map(async (url) => fetch(url)) + ); + // Parse the JSON from all responses + const appDirectories = await Promise.all( + responses.map(async (response) => response.json()) + ); + // Combine all applications into a single array + cachedApps = appDirectories.flatMap( + (appDirectory) => appDirectory.applications + ); + return cachedApps; + } cachedApps = []; return cachedApps; } diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts index cc5dbd6..0a75280 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/platform/layout/layout-override.ts @@ -50,6 +50,25 @@ export function makeOverride( } } + /** + * Our implementation of getLayoutSnapshot that contains titles. + * @returns Promise + */ + public async getLayoutSnapshot(): Promise { + const layoutSnapshot = await super.getLayoutSnapshot(); + const platformLayoutSnapshot: PlatformLayoutSnapshot = { + layouts: layoutSnapshot.layouts, + layoutTitles: {}, + layoutSelected: this._selectedLayout + }; + for (const layout of this._layoutMapArray) { + if(layout.layoutTitle !== undefined) { + platformLayoutSnapshot.layoutTitles[layout.layoutName] = layout.layoutTitle; + } + } + return platformLayoutSnapshot; + } + /** * Override for applying multiple snapshots. * @param snapshot The layouts object containing the fixed set of available layouts. @@ -57,22 +76,25 @@ export function makeOverride( public async applyLayoutSnapshot(snapshot: WebLayoutSnapshot): Promise { console.log(`[Apply Layout] Does this exist? ${Boolean(this._layoutContainer)}`); if (this._layoutContainer !== null && this._layoutContainer !== undefined) { - const snapShotWithTitles = snapshot as PlatformLayoutSnapshot; + const platformLayoutSnapshot = snapshot as PlatformLayoutSnapshot; for (const [key, value] of Object.entries(snapshot.layouts)) { + const layoutTitle = platformLayoutSnapshot?.layoutTitles === undefined + ? undefined : platformLayoutSnapshot.layoutTitles[key]; this._layoutMapArray.push({ layoutName: key, - layoutTitle: snapShotWithTitles?.layoutTitles[key], + layoutTitle, layout: value, container: this._layoutContainer }); } setTimeout(async () => { - const entries = Object.entries(snapshot.layouts); + const entries = Object.entries(platformLayoutSnapshot.layouts); let entryInstance = 0; for (const entry of entries) { entryInstance++; const layoutName = entry[0]; - await this.createLayout(layoutName, entry[1], entryInstance, entries.length); + await this.createLayout(layoutName, entry[1], entryInstance, entries.length, + platformLayoutSnapshot.layoutSelected); } }, 1000); console.log("[Apply Layout] Layouts loaded"); @@ -178,12 +200,14 @@ export function makeOverride( * @param layout LayoutOptions. * @param entry the entry from the batch that is being created. * @param length the total number of layouts to create. + * @param selectedLayout the layout that is selected. */ private async createLayout( layoutName: string, layout: OpenFin.LayoutOptions, entry: number, - length: number + length: number, + selectedLayout: string | undefined ): Promise { // Create a new div container for the layout. const container = document.createElement("div"); @@ -192,8 +216,9 @@ export function makeOverride( container.style.display = "none"; this._layoutContainer?.append(container); if (entry === length) { - this.bindLayoutSelector(layoutName); - await this.showLayout({ layoutName, uuid: fin.me.uuid, name: fin.me.name }); + this.bindLayoutSelector(selectedLayout ?? layoutName); + await this.showLayout({ layoutName: selectedLayout ?? layoutName, + uuid: fin.me.uuid, name: fin.me.name }); } // Finally, call the Layout.create() function to apply the snapshot layout to the div we just created. await fin.Platform.Layout.create({ layoutName, layout, container }); diff --git a/how-to/web-interop-support-context-and-intents/client/src/platform/settings.ts b/how-to/web-interop-support-context-and-intents/client/src/platform/settings.ts index 964e81b..69adc69 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/platform/settings.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/platform/settings.ts @@ -1,18 +1,33 @@ import type { WebLayoutSnapshot } from "@openfin/core-web"; -import type { Settings } from "../shapes/setting-shapes"; +import type { ManifestSettings, Settings } from "../shapes/setting-shapes"; /** * Fetches the settings for the application. * @returns The settings for the application. */ export async function getSettings(): Promise { + const savedSettings = await getSavedSettings(); + if (savedSettings) { + return savedSettings; + } const settings = await getManifestSettings(); - if (settings === undefined) { + if (!Array.isArray(settings?.endpointProvider?.endpoints)) { console.error( "Unable to run the example as settings are required and we fetch them from the link web manifest from the html page that is being served. It should exist in the customSettings section of the web manifest." ); + return; + } + const settingsEndpoint = settings.endpointProvider.endpoints.find((endpoint) => endpoint.id === "platform-settings"); + + if(settingsEndpoint === undefined || settingsEndpoint.type !== "fetch" || settingsEndpoint.options.method !== "GET" || settingsEndpoint.options.url === undefined) { + console.error( + "Unable to run the example as settings are required and we fetch them from the endpoint defined with the id: 'platform-settings' in the manifest. It needs to be of type fetch, performing a GET and it must have a url defined." + ); + return; } - return settings; + const platformSettings = await fetch(settingsEndpoint?.options.url); + const settingsJson = (await platformSettings.json()) as Settings; + return settingsJson; } /** @@ -39,12 +54,54 @@ export async function getDefaultLayout(): Promise * Returns the settings from the manifest file. * @returns customSettings for this example */ -async function getManifestSettings(): Promise { +async function getManifestSettings(): Promise { // Get the manifest link const link = document.querySelector('link[rel="manifest"]'); if (link !== null) { const manifestResponse = await fetch(link.href); - const manifestJson = (await manifestResponse.json()) as { custom_settings: Settings }; + const manifestJson = (await manifestResponse.json()) as { custom_settings: ManifestSettings }; return manifestJson.custom_settings; } } + +/** + * Clears any saved settings. + * @returns The saved settings. + */ +export async function clearSettings(): Promise { + const settingsId = getSavedSettingsId(); + localStorage.removeItem(settingsId); +} + +/** + * Saves the settings. + * @param settings The settings to save. + */ +export async function saveSettings(settings: Settings): Promise { + const settingsId = getSavedSettingsId(); + localStorage.setItem(settingsId, JSON.stringify(settings)); +} + +/** + * Retrieves saved settings from local storage. + * @returns The saved settings. + */ +async function getSavedSettings(): Promise { + const settingsId = getSavedSettingsId(); + const settings = localStorage.getItem(settingsId); + if (settings !== null) { + return JSON.parse(settings); + } +} + +/** + * Get the Id used for saving and fetching settings from storage. + * @returns The settings id. + */ +function getSavedSettingsId(): string { + const urlParams = new URLSearchParams(window.location.search); + const env = urlParams.get("env"); + + const settingsKey = env ? `${env}-settings` : "settings"; + return settingsKey; +} diff --git a/how-to/web-interop-support-context-and-intents/client/src/provider.ts b/how-to/web-interop-support-context-and-intents/client/src/provider.ts index 9a31295..ac169f4 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/provider.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/provider.ts @@ -1,13 +1,19 @@ +import type { OpenFin } from "@openfin/core"; import { connect } from "@openfin/core-web"; import { AppResolverHelper } from "./platform/apps/app-resolver-helper"; import { getConstructorOverride } from "./platform/broker/interop-override"; import { makeOverride } from "./platform/layout/layout-override"; -import { getDefaultLayout, getSettings } from "./platform/settings"; +import { clearSettings, getDefaultLayout, getSettings, saveSettings } from "./platform/settings"; +import type { PlatformLayoutSnapshot } from "./shapes/layout-shapes"; +import type { Settings } from "./shapes/setting-shapes"; +import { sanitizeString } from "./utils"; +import { cloudInteropOverride } from "@openfin/cloud-interop"; /** * Attach listeners to elements. + * @param fin passing the fin api for use. */ -async function attachListeners(): Promise { +async function attachListeners(fin: OpenFin.Fin): Promise { // Get the required settings const settings = await getSettings(); if (settings !== undefined) { @@ -16,6 +22,7 @@ async function attachListeners(): Promise { const addLayoutId = `#${settings.platform.layout.addLayoutId}`; const addLayoutButton = document.querySelector(addLayoutId); const deleteButton = document.querySelector(deleteLayoutId); + const settingsButton = document.querySelector("#settings"); const layoutSelector = document.querySelector(layoutSelectorId); if (deleteButton !== null && layoutSelector !== null) { deleteButton?.addEventListener("click", async () => { @@ -36,54 +43,80 @@ async function attachListeners(): Promise { await addResolverHelper.launchAppResolver(); }); } - } -} + if(settingsButton !== null) { + const dialogElement = document.createElement("dialog"); + dialogElement.id = "settings-dialog"; + dialogElement.style.height = `${settings?.platform?.ui?.settingsResolver?.height ?? 700}px`; + dialogElement.style.width = `${settings?.platform?.ui?.settingsResolver?.width ?? 600}px`; + dialogElement.style.padding = "0px"; + dialogElement.style.backgroundColor = "var(--brand-background)"; + // Create a new iframe element + const settingsUI = document.createElement("iframe"); -/** - * Delete the current layout. - */ -async function deleteCurrentLayout(): Promise { - const currentLayout = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); - if (currentLayout) { - const selectedLayout = currentLayout.resolveLayoutIdentity(); - if (selectedLayout) { - await currentLayout.removeLayout(selectedLayout); + // Set the source of the iframe + settingsUI.src = settings.platform.ui.settingsResolver.url; + settingsUI.style.height = "99%"; + settingsUI.style.width = "100%"; + + // Append the iframe to the dialog + dialogElement.append(settingsUI); + + // Append the dialog to the body + document.body.append(dialogElement); + settingsButton.addEventListener("click", async () => { + dialogElement.showModal(); + }); + const platformDialogSettings = await fin.me.interop.joinSessionContextGroup("platform/settings/dialog"); + await platformDialogSettings.addContextHandler(async (context) => { + if (context.type === "platform.settings.dialog.action" && context?.id?.action === "close") { + dialogElement.close(); + } + if (context.type === "platform.settings.dialog.action" && context?.id?.action === "save-reload") { + const settingsToSave: Settings = (context as unknown as { settings: Settings }).settings; + // get the current layout + const currentLayout = fin.Platform.Layout.getCurrentLayoutManagerSync(); + settingsToSave.platform.layout.defaultLayout = await currentLayout?.getLayoutSnapshot(); + await saveSettings(settingsToSave); + location.reload(); + } + if (context.type === "platform.settings.dialog.action" && context?.id?.action === "reset-reload") { + await clearSettings(); + location.reload(); + } + }); } } } /** - * Initializes the OpenFin Web Broker connection. + * Update the DOM with the settings. + * @param settings passing the settings for use. */ -async function init(): Promise { - // Get the required settings - const settings = await getSettings(); - // Get the default layout - const layoutSnapshot = await getDefaultLayout(); - - if (settings === undefined || layoutSnapshot === undefined) { - console.error( - "Unable to run the sample as we have been unable to load the web manifest and it's settings from the currently running html page. Please ensure that the web manifest is being served and that it contains the custom_settings section." - ); +function updateDOM(settings: Settings | undefined): void { + const title = document.querySelector("#title"); + const subTitle = document.querySelector("#subTitle"); + const logo = document.querySelector("#logo"); + if(title === null || subTitle === null || logo === null || settings === undefined) { + console.error("Unable to use settings as there are missing input fields/buttons or settings have not been provided."); return; } + const documentTitle = sanitizeString(settings?.platform?.ui?.title ?? ""); + title.textContent = documentTitle; + document.title = documentTitle; + subTitle.textContent = sanitizeString(settings?.platform?.ui?.subTitle ?? ""); + const documentIcon = sanitizeString(settings?.platform?.ui?.logo ?? ""); + logo.src = documentIcon; + const fav = document.querySelector("#favicon"); + if(fav !== null && documentIcon !== "") { + fav.href = documentIcon; + } +} - // Connect to the OpenFin Web Broker and pass the default layout. - // It is good practice to specify providerId even if content is explicitly specifying it for cases where - // this provider uses our layout system and content uses inheritance. currentContextGroup - // is useful for defaulting any client that uses inheritance through our layout system. - const fin = await connect({ - options: { - brokerUrl: settings.platform.interop.brokerUrl, - interopConfig: { - providerId: settings.platform.interop.providerId, - currentContextGroup: settings.platform.interop.defaultContextGroup - } - }, - connectionInheritance: "enabled", - platform: { layoutSnapshot } - }); - +/** + * Listen for config requests. + * @param settings passing the settings for use. + */ +function listenForConfigRequests(settings: Settings): void { // This allows iframes that are not in the layout to request the connect details if they do not have them // available to them. window.addEventListener( @@ -131,6 +164,58 @@ async function init(): Promise { }, false ); +} + +/** + * Delete the current layout. + */ +async function deleteCurrentLayout(): Promise { + const currentLayout = window.fin?.Platform.Layout.getCurrentLayoutManagerSync(); + if (currentLayout) { + const selectedLayout = currentLayout.resolveLayoutIdentity(); + if (selectedLayout) { + await currentLayout.removeLayout(selectedLayout); + } + } +} + +/** + * Initializes the OpenFin Web Broker connection. + */ +async function init(): Promise { + // Get the required settings + const settings = await getSettings(); + + // apply any settings to the UI + updateDOM(settings); + + // Get the default layout + const layoutSnapshot = await getDefaultLayout(); + + if (settings === undefined || layoutSnapshot === undefined) { + console.error( + "Unable to run the sample as we have been unable to load the web manifest and it's settings from the currently running html page. Please ensure that the web manifest is being served and that it contains the custom_settings section." + ); + return; + } + + // Connect to the OpenFin Web Broker and pass the default layout. + // It is good practice to specify providerId even if content is explicitly specifying it for cases where + // this provider uses our layout system and content uses inheritance. currentContextGroup + // is useful for defaulting any client that uses inheritance through our layout system. + const fin = await connect({ + options: { + brokerUrl: settings.platform.interop.brokerUrl, + interopConfig: { + providerId: settings.platform.interop.providerId, + currentContextGroup: settings.platform.interop.defaultContextGroup + } + }, + connectionInheritance: "enabled", + platform: { layoutSnapshot } + }); + + listenForConfigRequests(settings); if (fin) { // Store the fin object in the window object for easy access. @@ -143,6 +228,13 @@ async function init(): Promise { const interopOverride = await getConstructorOverride(settings.platform.interop.overrideOptions); const overrides = [interopOverride]; + + if (settings?.platform?.cloudInterop?.connectParams?.url?.startsWith("http")) { + const cloudOverride = (await cloudInteropOverride( + settings.platform.cloudInterop.connectParams + )) as unknown as OpenFin.ConstructorOverride; + overrides.push(cloudOverride); + } // You may now use the `fin` object to initialize the broker and the layout. await fin.Interop.init(settings.platform.interop.providerId, overrides); // Show the main container and hide the loading container @@ -152,7 +244,7 @@ async function init(): Promise { containerId: settings.platform.layout.layoutContainerId }); // setup listeners now that everything has been initialized - await attachListeners(); + await attachListeners(fin); } } diff --git a/how-to/web-interop-support-context-and-intents/client/src/shapes/layout-shapes.ts b/how-to/web-interop-support-context-and-intents/client/src/shapes/layout-shapes.ts index d9a7ff4..d2d5765 100644 --- a/how-to/web-interop-support-context-and-intents/client/src/shapes/layout-shapes.ts +++ b/how-to/web-interop-support-context-and-intents/client/src/shapes/layout-shapes.ts @@ -10,7 +10,8 @@ export type LayoutManagerConstructor = OpenFin.LayoutManagerConstructor + + diff --git a/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json b/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json index a44bd66..8a9341b 100644 --- a/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json +++ b/how-to/web-interop-support-context-and-intents/public/layouts/default.layout.fin.json @@ -1,13 +1,13 @@ { "layouts": { - "secondary": { + "tab-developer-tools": { "content": [ { "type": "row", "content": [ { "type": "column", - "width": 100, + "width": 50, "content": [ { "type": "stack", @@ -18,10 +18,19 @@ "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:6060/views/interop-view.html", - "name": "internal-generated-view-primary-6" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/vnext/interop/fdc3/context/2-0/fdc3-broadcast-view.html", + "name": "fdc3-2-0-broadcast/e7fe7df3-6f64-4235-899f-4e91af2cb32d" + }, + "title": "Developer FDC3 Context" + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "http://localhost:6060/views/fdc3-view.html", + "name": "local-fdc3-context/e7fe7df3-6f64-4235-899f-4e91af2cb32d2" }, - "title": "Interop Same Domain" + "title": "FDC3 Local Context" } ] }, @@ -33,24 +42,24 @@ "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:7070/fdc3/context/2-0/fdc3-broadcast-view.html", - "name": "internal-generated-view-primary-7" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/vnext/interop/fdc3/intent/2-0/fdc3-intent-view.html", + "name": "fdc3-intent-view/54a8ef85-a885-4234-be46-9d52e88fcb74" }, - "title": "FDC3 Broadcast External Domain" + "title": "Developer FDC3 Intent" + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "http://localhost:6060/views/fdc3-intent-view.html", + "name": "local-fdc3-intent-view/54a8ef85-a885-4234-be46-9d52e88fsb74" + }, + "title": "FDC3 Local Intent" } ] } ] - } - ] - } - ] - }, - "default": { - "content": [ - { - "type": "row", - "content": [ + }, { "type": "column", "width": 50, @@ -64,19 +73,19 @@ "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:6060/views/fdc3-view.html", - "name": "fdc3-local-context-view-e7fe7df3-6f64-4235-899f-4e91af2cb32d" + "url": "https://built-on-openfin.github.io/dev-extensions/extensions/vnext/interop/interop-api/context/interop-broadcast-view.html", + "name": "interop-context-view/64a8efd7-3d92-42ae-8fae-dffcc0fdac97" }, - "title": "FDC3 Same Domain" + "title": "Developer Interop Context" }, { "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:6060/views/fdc3-view.html", - "name": "fdc3-local-context-view-e7fe7df3-6f64-4235-899f-4e91af2cb32d2" + "url": "http://localhost:6060/views/interop-view.html", + "name": "local-interop-context-view/64a8efd7-3d92-42ae-8fae-dffcc0fdac92" }, - "title": "FDC3 Same Domain" + "title": "Interop Local Context" } ] }, @@ -88,51 +97,406 @@ "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:7070/fdc3/intent/2-0/fdc3-intent-view.html", - "name": "fdc3-intent-view-54a8ef85-a885-4234-be46-9d52e88fcb74" + "url": "http://localhost:7070/interop-api/intent/interop-intent-view.html", + "name": "2d9a3624-fd0e-4e0a-b681-a79a9616b871" }, - "title": "FDC3 Intent Different Domain" + "title": "Developer Interop Intent" + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "http://localhost:6060/views/fdc3-intent-view.html", + "name": "local-interop-intent-view/54a8ef85-a775-4234-be46-9d52e88fsb74" + }, + "title": "FDC3 Local Interop Intent" } ] } ] + } + ] + } + ] + }, + "tab-manager-portal": { + "content": [ + { + "type": "row", + "content": [ + { + "type": "stack", + "width": 20, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "name": "internal-generated-view-b9880bc2-2983-4b3c-a496-77d94783cb7e", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/my-team/index.html", + "componentName": "view" + } + } + ] }, { "type": "column", - "width": 50, + "width": 80, "content": [ { "type": "stack", "width": 50, "height": 50, + "activeItemIndex": 1, "content": [ { "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:6060/views/interop-view.html", - "name": "internal-generated-view-64a8efd7-3d92-42ae-8fae-dffcc0fdac96" - }, - "title": "Interop Same Domain" + "name": "internal-generated-view-0dd98149-16fb-4cf0-9b2a-d5bff2519d9b", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/keeping-track/index.html", + "componentName": "view" + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "name": "internal-generated-view-ef70ccee-2613-4f99-8a01-8cfba31064ba", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/annual-leave/index.html", + "componentName": "view" + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "name": "internal-generated-view-f898522a-5d85-4e9e-93eb-378179f0f909", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/360-feedback/index.html", + "componentName": "view" + } } ] }, { - "type": "stack", + "type": "row", + "isClosable": false, + "reorderEnabled": false, + "title": "", "height": 50, + "content": [ + { + "type": "stack", + "height": 50, + "width": 50, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "name": "internal-generated-view-b38f525a-77a9-48d9-bd02-b895cfbbf074", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/manager-paths/index.html", + "componentName": "view" + } + } + ] + }, + { + "type": "stack", + "width": 50, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "name": "internal-generated-view-5292442d-4d19-4d71-bcf1-ca9081ec50b0", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/company-comms/index.html", + "componentName": "view" + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "name": "internal-generated-view-5292442d-4d19-4d71-bcf1-ca9081ec50b1", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/company-cal/index.html", + "componentName": "view" + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "name": "internal-generated-view-935bb258-ded4-4a85-ad92-0f2a742d4d42", + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/manager-portal/franchise-comms/index.html", + "componentName": "view" + } + } + ] + } + ] + } + ] + } + ] + } + ] + }, + "tab-crm": { + "content": [ + { + "type": "row", + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "column", + "width": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "row", + "height": 65.83442838370564, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 30.88580552444411, + "height": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/contact/participant-summary/index.html", + "componentName": "view", + "name": "internal-generated-view-f65f3aa0-7499-4d8a-b477-8e04ab7db493" + }, + "isClosable": true, + "reorderEnabled": true, + "title": "Participant Summary" + } + ] + }, + { + "type": "stack", + "width": 33.399745400122335, + "height": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/contact/investments-and-models/index.html", + "componentName": "view", + "name": "internal-generated-view-5ad7e692-dd6a-48b8-bbc6-4f284f1bcc3d" + }, + "isClosable": true, + "reorderEnabled": true, + "title": "Investments & Models" + } + ] + }, + { + "type": "stack", + "header": {}, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 0, + "width": 35.60610671357006, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/contact/call-app/index.html", + "name": "call-app/1f458d7d-22a1-40fa-b793-c7eb2d4d84a6" + }, + "isClosable": true, + "reorderEnabled": true, + "title": "Call Application" + } + ] + } + ] + }, + { + "type": "row", + "height": 34.16557161629436, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "column", + "width": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "content": [ + { + "type": "stack", + "width": 100, + "height": 100, + "isClosable": true, + "reorderEnabled": true, + "title": "", + "activeItemIndex": 1, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/contact/participant-history/index.html", + "name": "internal-generated-view-9b0bdbff-3de4-4b86-8abb-be1df6876a66" + }, + "isClosable": true, + "reorderEnabled": true, + "title": "Participant History" + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://built-on-openfin.github.io/workspace-starter/workspace/v18.0.0/workspace-platform-starter/common/views/contact/participant-selection/index.html", + "name": "internal-generated-view-9b0bdbff-3de4-4b86-8abb-be1df6876a36" + }, + "isClosable": true, + "reorderEnabled": true, + "title": "Participant Selection" + } + ] + } + ] + } + ] + } + ] + } + ] + } + ] + }, + "tab-finance": { + "content": [ + { + "type": "column", + "content": [ + { + "type": "row", + "height": 46.71052631578947, + "content": [ + { + "type": "stack", + "width": 59.303313508920986, + "height": 100, "content": [ { "type": "component", "componentName": "view", "componentState": { - "url": "http://localhost:7070/interop-api/intent/interop-intent-view.html", - "name": "2d9a3624-fd0e-4e0a-b681-a79a9616b871" - }, - "title": "Interop Intent External Domain" + "url": "https://workspace-mobile.openfin.co/chart/", + "fdc3InteropApi": "2.0", + "interop": { + "currentContextGroup": "green" + } + } + } + ] + }, + { + "type": "stack", + "width": 40.696686491079014, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://workspace-mobile.openfin.co/instrument/", + "fdc3InteropApi": "2.0", + "interop": { + "currentContextGroup": "green" + } + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://workspace-mobile.openfin.co/summary/", + "fdc3InteropApi": "2.0", + "interop": { + "currentContextGroup": "green" + } + } } ] } ] + }, + { + "type": "stack", + "height": 53.289473684210535, + "content": [ + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://workspace-mobile.openfin.co/portfolio/", + "fdc3InteropApi": "2.0", + "interop": { + "currentContextGroup": "green" + } + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://workspace-mobile.openfin.co/summary/", + "fdc3InteropApi": "2.0", + "interop": { + "currentContextGroup": "green" + } + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://workspace-mobile.openfin.co/summary/", + "fdc3InteropApi": "2.0", + "interop": { + "currentContextGroup": "green" + } + } + }, + { + "type": "component", + "componentName": "view", + "componentState": { + "url": "https://workspace-mobile.openfin.co/summary/", + "fdc3InteropApi": "2.0", + "interop": { + "currentContextGroup": "green" + } + } + } + ] } ] } @@ -140,7 +504,10 @@ } }, "layoutTitles": { - "default": "Context and Intents", - "secondary": "Contexts and Broadcasts" - } + "tab-developer-tools": "Developer Tools", + "tab-manager-portal": "Manager Portal", + "tab-crm": "CRM", + "tab-finance": "Finance" + }, + "layoutSelected": "tab-developer-tools" } diff --git a/how-to/web-interop-support-context-and-intents/public/manifest.json b/how-to/web-interop-support-context-and-intents/public/manifest.json index d2a62a2..d353a00 100644 --- a/how-to/web-interop-support-context-and-intents/public/manifest.json +++ b/how-to/web-interop-support-context-and-intents/public/manifest.json @@ -1,10 +1,10 @@ { - "name": "OpenFin Web Interop", - "short_name": "OpenFinWebInterop", + "name": "OpenFin - Support Context and Intents", + "short_name": "OpenFinSupportInteropContextAndIntents", "start_url": "./platform/provider.html", "display": "standalone", "background_color": "#fff", - "description": "An example showing a implementation of the OpenFin Web Interop Library.", + "description": "An example showing a implementation of the OpenFin Core Web Library to support context and intents as well as layouts.", "icons": [ { "src": "common/images/icon-blue.png", @@ -14,33 +14,16 @@ ], "related_applications": [], "custom_settings": { - "platform": { - "interop": { - "sharedWorkerUrl": "http://localhost:6060/js/shared-worker.bundle.js", - "brokerUrl": "http://localhost:6060/platform/iframe-broker.html", - "providerId": "web-interop", - "defaultContextGroup": "green", - "overrideOptions": { - "intentResolver": { - "url": "http://localhost:6060/platform/intents/instance-picker.html", - "title": "Intent Resolver" + "endpointProvider": { + "endpoints": [ + { + "id": "platform-settings", + "type": "fetch", + "options": { + "method": "GET", + "url": "http://localhost:6060/settings.json" } - } - }, - "layout": { - "addLayoutId": "add-layout", - "deleteLayoutId": "delete-layout", - "layoutContainerId": "layout_container", - "layoutSelectorId": "layout-selector", - "defaultLayout": "http://localhost:6060/layouts/default.layout.fin.json" - }, - "app": { - "directory": "http://localhost:6060/apps.json", - "appResolver": { - "url": "http://localhost:6060/platform/apps/app-picker.html", - "title": "App Resolver" - } - } + }] } } } diff --git a/how-to/web-interop-support-context-and-intents/public/platform/provider.html b/how-to/web-interop-support-context-and-intents/public/platform/provider.html index a29e9f5..a11e728 100644 --- a/how-to/web-interop-support-context-and-intents/public/platform/provider.html +++ b/how-to/web-interop-support-context-and-intents/public/platform/provider.html @@ -4,7 +4,7 @@ OpenFin - Support Context & Intents - + @@ -15,8 +15,8 @@
-

OpenFin - Support Context & Intents

-

+

OpenFin - Support Context & Intents

+

Demonstrate how OpenFin's FDC3 Context and Intents support can be utilized and combined with OpenFin's Layout support.

@@ -30,8 +30,10 @@

- - OpenFin + +

diff --git a/how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html b/how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html new file mode 100644 index 0000000..9b1738f --- /dev/null +++ b/how-to/web-interop-support-context-and-intents/public/platform/settings/settings-dialog.html @@ -0,0 +1,92 @@ + + + + + + Settings + + + + + + + + + + +
+
+
+

Settings

+
+
+
+
+

Platform

+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+

Cloud Interop

+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + + +
+
+ + diff --git a/how-to/web-interop-support-context-and-intents/public/settings.json b/how-to/web-interop-support-context-and-intents/public/settings.json new file mode 100644 index 0000000..2ef4ed2 --- /dev/null +++ b/how-to/web-interop-support-context-and-intents/public/settings.json @@ -0,0 +1,48 @@ +{ + "platform": { + "ui": { + "logo": "http://localhost:6060/common/images/icon-blue.png", + "title": "OpenFin - Support Context and Intents", + "subTitle": "Demonstrate how OpenFin's FDC3 Context and Intents support can be utilized and combined with OpenFin's Layout support.", + "settingsResolver": { + "url": "http://localhost:6060/platform/settings/settings-dialog.html" + } + }, + "interop": { + "sharedWorkerUrl": "http://localhost:6060/js/shared-worker.bundle.js", + "brokerUrl": "http://localhost:6060/platform/iframe-broker.html", + "providerId": "support-context-and-intents", + "defaultContextGroup": "green", + "overrideOptions": { + "intentResolver": { + "url": "http://localhost:6060/platform/intents/instance-picker.html", + "title": "Intent Resolver" + } + } + }, + "cloudInterop": { + "connectParams": { + "userId": "", + "password": "", + "platformId": "", + "url": "", + "sourceId": "cloud-interop-contents-and-intents", + "sourceDisplayName": "Cloud Interop Basic Example" + } + }, + "layout": { + "addLayoutId": "add-layout", + "deleteLayoutId": "delete-layout", + "layoutContainerId": "layout_container", + "layoutSelectorId": "layout-selector", + "defaultLayout": "http://localhost:6060/layouts/default.layout.fin.json" + }, + "app": { + "directory": ["http://localhost:6060/apps.json", "http://localhost:6060/common/apps.json"], + "appResolver": { + "url": "http://localhost:6060/platform/apps/app-picker.html", + "title": "App Resolver" + } + } + } +} \ No newline at end of file diff --git a/how-to/web-interop-support-context-and-intents/public/style/core-web-styles.css b/how-to/web-interop-support-context-and-intents/public/style/core-web-styles.css index b760446..d5bf42b 100644 --- a/how-to/web-interop-support-context-and-intents/public/style/core-web-styles.css +++ b/how-to/web-interop-support-context-and-intents/public/style/core-web-styles.css @@ -1,741 +1,722 @@ .lm_root { - position: relative; + position: relative; } .lm_row > .lm_item { - float: left; + float: left; } .lm_content { - overflow: hidden; - position: relative; + overflow: hidden; + position: relative; } .lm_dragging, .lm_dragging * { - cursor: move !important; - -webkit-user-select: none; - user-select: none; + cursor: move !important; + -webkit-user-select: none; + user-select: none; } .lm_maximised { - position: absolute; - top: 0; - left: 0; - z-index: 40; + position: absolute; + top: 0; + left: 0; + z-index: 40; } .lm_maximise_placeholder { - display: none; + display: none; } .lm_splitter { - position: relative; - z-index: 2; - touch-action: none; + position: relative; + z-index: 2; + touch-action: none; } .lm_splitter.lm_vertical .lm_drag_handle { - width: 100%; - position: absolute; - cursor: ns-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + width: 100%; + position: absolute; + cursor: ns-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_splitter.lm_horizontal { - float: left; - height: 100%; + float: left; + height: 100%; } .lm_splitter.lm_horizontal .lm_drag_handle { - height: 100%; - position: absolute; - cursor: ew-resize; - touch-action: none; - -webkit-user-select: none; - user-select: none; + height: 100%; + position: absolute; + cursor: ew-resize; + touch-action: none; + -webkit-user-select: none; + user-select: none; } .lm_header { - overflow: visible; - position: relative; - z-index: 1; - -webkit-user-select: none; - user-select: none; + overflow: visible; + position: relative; + z-index: 1; + -webkit-user-select: none; + user-select: none; } -.lm_header [class^='lm_'] { - box-sizing: content-box !important; +.lm_header [class^=lm_] { + box-sizing: content-box !important; } .lm_header .lm_controls { - position: absolute; - right: 3px; - display: flex; + position: absolute; + right: 3px; + display: flex; } .lm_header .lm_controls > * { - cursor: pointer; - float: left; - width: 18px; - height: 18px; - text-align: center; + cursor: pointer; + float: left; + width: 18px; + height: 18px; + text-align: center; } .lm_header .lm_tabs { - position: absolute; - display: flex; + position: absolute; + display: flex; } .lm_header .lm_tab { - cursor: pointer; - float: left; - height: 14px; - margin-top: 1px; - padding: 0px 10px 5px; - padding-right: 25px; - position: relative; - touch-action: none; + cursor: pointer; + float: left; + height: 14px; + margin-top: 1px; + padding: 0px 10px 5px; + padding-right: 25px; + position: relative; + touch-action: none; } .lm_header .lm_tab i { - width: 2px; - height: 19px; - position: absolute; + width: 2px; + height: 19px; + position: absolute; } .lm_header .lm_tab i.lm_left { - top: 0; - left: -2px; + top: 0; + left: -2px; } .lm_header .lm_tab i.lm_right { - top: 0; - right: -2px; + top: 0; + right: -2px; } .lm_header .lm_tab .lm_title { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; + display: inline-block; + overflow: hidden; + text-overflow: ellipsis; } .lm_header .lm_tab .lm_close_tab { - width: 14px; - height: 14px; - position: absolute; - top: 0; - right: 0; - text-align: center; + width: 14px; + height: 14px; + position: absolute; + top: 0; + right: 0; + text-align: center; } .lm_stack { - position: relative; + position: relative; } .lm_stack > .lm_items { - overflow: hidden; + overflow: hidden; } .lm_stack.lm_left > .lm_items { - position: absolute; - left: 20px; - top: 0; + position: absolute; + left: 20px; + top: 0; } .lm_stack.lm_right > .lm_items { - position: absolute; - right: 20px; - top: 0; + position: absolute; + right: 20px; + top: 0; } .lm_stack.lm_right > .lm_header { - position: absolute; - right: 0; - top: 0; + position: absolute; + right: 0; + top: 0; } .lm_stack.lm_bottom > .lm_items { - position: absolute; - bottom: 20px; + position: absolute; + bottom: 20px; } .lm_stack.lm_bottom > .lm_header { - position: absolute; - bottom: 0; + position: absolute; + bottom: 0; } .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - height: 100%; + height: 100%; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_dragProxy .lm_items, .lm_right.lm_dragProxy .lm_items { - float: left; + float: left; } .lm_left.lm_dragProxy .lm_header, .lm_right.lm_dragProxy .lm_header, .lm_left.lm_stack .lm_header, .lm_right.lm_stack .lm_header { - width: 20px; - vertical-align: top; + width: 20px; + vertical-align: top; } .lm_left.lm_dragProxy .lm_header .lm_tabs, .lm_right.lm_dragProxy .lm_header .lm_tabs, .lm_left.lm_stack .lm_header .lm_tabs, .lm_right.lm_stack .lm_header .lm_tabs { - transform-origin: left top; - top: 0; - width: 1000px; - /*hack*/ + transform-origin: left top; + top: 0; + width: 1000px; + /*hack*/ } .lm_left.lm_dragProxy .lm_header .lm_controls, .lm_right.lm_dragProxy .lm_header .lm_controls, .lm_left.lm_stack .lm_header .lm_controls, .lm_right.lm_stack .lm_header .lm_controls { - bottom: 0; - flex-flow: column; + bottom: 0; + flex-flow: column; } .lm_dragProxy.lm_left .lm_header .lm_tabs, .lm_stack.lm_left .lm_header .lm_tabs { - transform: rotate(-90deg) scaleX(-1); - left: 0; + transform: rotate(-90deg) scaleX(-1); + left: 0; } .lm_dragProxy.lm_left .lm_header .lm_tabs .lm_tab, .lm_stack.lm_left .lm_header .lm_tabs .lm_tab { - transform: scaleX(-1); - margin-top: 1px; + transform: scaleX(-1); + margin-top: 1px; } .lm_dragProxy.lm_left .lm_header .lm_tabdropdown_list, .lm_stack.lm_left .lm_header .lm_tabdropdown_list { - top: initial; - right: initial; - left: 20px; + top: initial; + right: initial; + left: 20px; } .lm_dragProxy.lm_right .lm_content { - float: left; + float: left; } .lm_dragProxy.lm_right .lm_header .lm_tabs, .lm_stack.lm_right .lm_header .lm_tabs { - transform: rotate(90deg) scaleX(1); - left: 100%; - margin-left: 0; + transform: rotate(90deg) scaleX(1); + left: 100%; + margin-left: 0; } .lm_dragProxy.lm_right .lm_header .lm_controls, .lm_stack.lm_right .lm_header .lm_controls { - left: 3px; + left: 3px; } .lm_dragProxy.lm_right .lm_header .lm_tabdropdown_list, .lm_stack.lm_right .lm_header .lm_tabdropdown_list { - top: initial; - right: 20px; + top: initial; + right: 20px; } .lm_dragProxy.lm_bottom .lm_header, .lm_stack.lm_bottom .lm_header { - width: 100%; + width: 100%; } .lm_dragProxy.lm_bottom .lm_header .lm_tab, .lm_stack.lm_bottom .lm_header .lm_tab { - margin-top: 0; - border-top: none; + margin-top: 0; + border-top: none; } .lm_dragProxy.lm_bottom .lm_header .lm_controls, .lm_stack.lm_bottom .lm_header .lm_controls { - top: 3px; + top: 3px; } .lm_dragProxy.lm_bottom .lm_header .lm_tabdropdown_list, .lm_stack.lm_bottom .lm_header .lm_tabdropdown_list { - top: initial; - bottom: 20px; + top: initial; + bottom: 20px; } .lm_drop_tab_placeholder { - float: left; - width: 100px; - visibility: hidden; + float: left; + width: 100px; + visibility: hidden; } .lm_header .lm_controls .lm_tabdropdown:before { - content: ''; - width: 0; - height: 0; - vertical-align: middle; - display: inline-block; - border-top: 5px dashed; - border-right: 5px solid transparent; - border-left: 5px solid transparent; - color: white; + content: ''; + width: 0; + height: 0; + vertical-align: middle; + display: inline-block; + border-top: 5px dashed; + border-right: 5px solid transparent; + border-left: 5px solid transparent; + color: white; } .lm_header .lm_tabdropdown_list { - position: absolute; - top: 20px; - right: 0; - z-index: 5; - overflow: hidden; + position: absolute; + top: 20px; + right: 0; + z-index: 5; + overflow: hidden; } .lm_header .lm_tabdropdown_list .lm_tab { - clear: both; - padding-right: 10px; - margin: 0; + clear: both; + padding-right: 10px; + margin: 0; } .lm_header .lm_tabdropdown_list .lm_tab .lm_title { - width: 100px; + width: 100px; } .lm_header .lm_tabdropdown_list .lm_close_tab { - display: none !important; + display: none !important; } /*********************************** * Drag Proxy ***********************************/ .lm_dragProxy { - position: absolute; - top: 0; - left: 0; - z-index: 30; + position: absolute; + top: 0; + left: 0; + z-index: 30; } .lm_dragProxy .lm_header { - background: transparent; + background: transparent; } .lm_dragProxy .lm_content { - border-top: none; - overflow: hidden; + border-top: none; + overflow: hidden; } .lm_dropTargetIndicator { - display: none; - position: absolute; - z-index: 35; - transition: all 200ms ease; + display: none; + position: absolute; + z-index: 35; + transition: all 200ms ease; } .lm_dropTargetIndicator .lm_inner { - width: 100%; - height: 100%; - position: relative; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: relative; + top: 0; + left: 0; } .lm_transition_indicator { - display: none; - width: 20px; - height: 20px; - position: absolute; - top: 0; - left: 0; - z-index: 20; + display: none; + width: 20px; + height: 20px; + position: absolute; + top: 0; + left: 0; + z-index: 20; } .lm_popin { - width: 20px; - height: 20px; - position: absolute; - bottom: 0; - right: 0; - z-index: 9999; + width: 20px; + height: 20px; + position: absolute; + bottom: 0; + right: 0; + z-index: 9999; } .lm_popin > * { - width: 100%; - height: 100%; - position: absolute; - top: 0; - left: 0; + width: 100%; + height: 100%; + position: absolute; + top: 0; + left: 0; } .lm_popin > .lm_bg { - z-index: 10; + z-index: 10; } .lm_popin > .lm_icon { - z-index: 20; + z-index: 20; } :root { - /* Colors used for dark theme */ - --of-default-black: black; - --of-default-charcoal-dark: #111118; - --of-default-charcoal-light: #2a292f; - --of-default-grey-dark: #a5aebd; - --of-default-grey-dark-opacity: #a5aebd2e; - --of-default-grey-light: #f4f5f8; - --of-default-grey-light-opacity: #f4f5f82e; - --of-default-white: white; - --of-dark-theme: #7b7bff; - --of-light-theme: #504cff; - --of-highlight: #958eff; - --of-highlight-opacity: #958eff26; - --of-default-red: red; - --of-default-red-negative: #f55d5f; - --of-positive-green: #29af6f; - - /* Main colors to set from the above list */ - --main-background-color: var(--of-default-charcoal-dark); - --secondary-background-color: var(--of-default-black); - --tab-background-color: var(--of-default-charcoal-light); - --tab-button-hover-color: var(--of-default-grey-dark-opacity); - --tab-button-active-color: var(--of-default-grey-light-opacity); - --tab-border-top-color: var(--of-dark-theme); - --tab-border-top-highlight-color: var(--of-light-theme); - --focused-tab-border-top-color: var(--of-positive-green); - --focused-tab-border-top-highlight-color: #3cf89d; - --tab-font-color: var(--of-default-white); - --top-bar-close-button-color: var(--of-default-red); - --top-bar-close-button-active-color: var(--of-default-red-negative); - --drop-target-border-color: var(--of-highlight); - --drop-target-background-color: var(--of-highlight-opacity); - - /* Colors that default to dependent on Main Colors, but should be uniquely editable */ - --frame-background-color: var(--secondary-background-color); - --body-font-color: var(--tab-font-color); - --splitter-color: var(--secondary-background-color); - --splitter-hover-color: var(--tab-background-color); - --tabs-bar-background-color: var(--secondary-background-color); - --title-bar-background-color: var(--main-background-color); - --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ - --tab-background-active-color: var(--tab-background-color); - --top-bar-button-hover-color: var(--tab-background-color); - --top-bar-button-active-color: var(--tab-button-active-color); - - /* Measurements for various components */ - --title-bar-height: 30px; - --title-bar-border-bottom-height: 1px; - --header-border-bottom-height: 2px; - --corner-radius: 0px; - --splitter-width: 4px; - - --body-container-padding-top: 0px; - --body-container-padding-right: 0px; - --body-container-padding-bottom: 0px; - --body-container-padding-left: 0px; - - --body-container-width: calc( - 100% - var(--body-container-padding-left) - var(--body-container-padding-right) - ); - --body-container-height: calc( - 100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - - var(--body-container-padding-bottom) - ); - --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) - var(--body-container-padding-bottom) var(--body-container-padding-left); - - --layout-container-padding-top: 4px; - --layout-container-padding-right: 4px; - --layout-container-padding-bottom: 4px; - --layout-container-padding-left: 4px; - --layout-container-from-top: calc( - var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top) - ); - - --layout-container-width: calc( - 100% - var(--layout-container-padding-left) - var(--layout-container-padding-right) - ); - --layout-container-height: calc( - 100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - - var(--layout-container-padding-bottom) - ); - --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) - var(--layout-container-padding-bottom) var(--layout-container-padding-left); - - /* Top Bar and Tab Icons */ - --close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --minimize-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --expand-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=='); - --tab-close-button-url: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K'); - --new-tab-button-url: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=='); + /* Colors used for dark theme */ + --of-default-black: black; + --of-default-charcoal-dark: #111118; + --of-default-charcoal-light: #2A292F; + --of-default-grey-dark: #A5AEBD; + --of-default-grey-dark-opacity: #A5AEBD2E; + --of-default-grey-light: #F4F5F8; + --of-default-grey-light-opacity: #F4F5F82E; + --of-default-white: white; + --of-dark-theme: #7B7BFF; + --of-light-theme: #504CFF; + --of-highlight: #958EFF; + --of-highlight-opacity: #958EFF26; + --of-default-red: red; + --of-default-red-negative: #F55D5F; + --of-positive-green: #29AF6F; + + /* Main colors to set from the above list */ + --main-background-color: var(--of-default-charcoal-dark); + --secondary-background-color: var(--of-default-black); + --tab-background-color: var(--of-default-charcoal-light); + --tab-button-hover-color: var(--of-default-grey-dark-opacity); + --tab-button-active-color: var(--of-default-grey-light-opacity); + --tab-border-top-color: var(--of-dark-theme); + --tab-border-top-highlight-color: var(--of-light-theme); + --focused-tab-border-top-color: var(--of-positive-green); + --focused-tab-border-top-highlight-color: #3cf89d; + --tab-font-color: var(--of-default-white); + --top-bar-close-button-color: var(--of-default-red); + --top-bar-close-button-active-color: var(--of-default-red-negative); + --drop-target-border-color: var(--of-highlight); + --drop-target-background-color: var(--of-highlight-opacity); + + /* Colors that default to dependent on Main Colors, but should be uniquely editable */ + --frame-background-color: var(--secondary-background-color); + --body-font-color: var(--tab-font-color); + --splitter-color: var(--secondary-background-color); + --splitter-hover-color: var(--tab-background-color); + --tabs-bar-background-color: var(--secondary-background-color); + --title-bar-background-color: var(--main-background-color); + --color-behind-views: var(--main-background-color); /* only seen if there's a problem with the view */ + --tab-background-active-color: var(--tab-background-color); + --top-bar-button-hover-color: var(--tab-background-color); + --top-bar-button-active-color: var(--tab-button-active-color); + + /* Measurements for various components */ + --title-bar-height: 30px; + --title-bar-border-bottom-height: 1px; + --header-border-bottom-height: 2px; + --corner-radius: 0px; + --splitter-width: 4px; + + --body-container-padding-top: 0px; + --body-container-padding-right: 0px; + --body-container-padding-bottom: 0px; + --body-container-padding-left: 0px; + + --body-container-width: calc(100% - var(--body-container-padding-left) - var(--body-container-padding-right)); + --body-container-height: calc(100% - var(--title-bar-height) - var(--title-bar-border-bottom-height) - var(--body-container-padding-top) - var(--body-container-padding-bottom)); + --body-container-padding: var(--body-container-padding-top) var(--body-container-padding-right) var(--body-container-padding-bottom) var(--body-container-padding-left); + + --layout-container-padding-top: 4px; + --layout-container-padding-right: 4px; + --layout-container-padding-bottom: 4px; + --layout-container-padding-left: 4px; + --layout-container-from-top: calc(var(--title-bar-height) + var(--title-bar-border-bottom-height) + var(--layout-container-padding-top)); + + --layout-container-width: calc(100% - var(--layout-container-padding-left) - var(--layout-container-padding-right)); + --layout-container-height: calc(100% - var(--header-border-bottom-height) - var(--layout-container-padding-top) - var(--layout-container-padding-bottom)); + --layout-container-padding: var(--layout-container-padding-top) var(--layout-container-padding-right) var(--layout-container-padding-bottom) var(--layout-container-padding-left); + + /* Top Bar and Tab Icons */ + --close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --minimize-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvTWluaW1pemUvV2luZG93L0RhcmsgVC4iPgo8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIzIiB5PSIyNCIgd2lkdGg9IjI2IiBoZWlnaHQ9IjMiIHJ4PSIxLjUiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --expand-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvRXhwYW5kL0RhcmsgVC4iPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgY2xpcC1ydWxlPSJldmVub2RkIiBkPSJNMTYuOTU2NSA1TDI2LjAzNDggNS4wMDAwNEwyNi4wOTE1IDUuMDAxMThMMjYuMTQxMyA1LjAwNDk4TDI2LjIwNDMgNS4wMTM1NEwyNi4yNDE0IDUuMDIwNTFMMjYuMjc1NiA1LjAyODM1TDI2LjMwMzUgNS4wMzU3NkwyNi4zNTc3IDUuMDUyODJMMjYuNDAyOCA1LjA2OTc3TDI2LjQ1NzkgNS4wOTQxOEwyNi41MDkyIDUuMTIwNzNMMjYuNTY0MyA1LjE1NDFMMjYuNjAxMyA1LjE3OTNMMjYuNjMyNiA1LjIwMjhMMjYuNjc0IDUuMjM3MThMMjYuNzEwNSA1LjI3MDkyTDI2Ljc0MTggNS4zMDI4MkwyNi43ODEgNS4zNDczM0wyNi43OTM4IDUuMzYzMjRDMjYuODEzMyA1LjM4Nzg1IDI2LjgzMTYgNS40MTM0MyAyNi44NDg2IDUuNDM5OTFDMjYuODcgNS40NzMwNCAyNi44ODkxIDUuNTA3MjIgMjYuOTA1OSA1LjU0MjIxTDI2LjkyNDMgNS41ODI4OUwyNi45NDA2IDUuNjIzOTdMMjYuOTU2MyA1LjY3MDA1QzI2Ljk2NDkgNS42OTcyNyAyNi45NzIyIDUuNzI0OTcgMjYuOTc4MyA1Ljc1MzEyTDI2Ljk4OTYgNS44MTUxN0MyNi45OTQyIDUuODQ1OTIgMjYuOTk3MyA1Ljg3NzE1IDI2Ljk5ODggNS45MDg3OEwyNyA1Ljk1NjUyVjE1LjA0MzVDMjcgMTUuNTcxOCAyNi41NzE4IDE2IDI2LjA0MzUgMTZDMjUuNTMxMiAxNiAyNS4xMTMgMTUuNTk3MyAyNS4wODgxIDE1LjA5MTJMMjUuMDg3IDE1LjA0MzVWOC4yNjU1N0wxOC40Njk4IDE0Ljg4MjlDMTguMDk2MyAxNS4yNTY0IDE3LjQ5MDcgMTUuMjU2NCAxNy4xMTcxIDE0Ljg4MjlDMTYuNzU2IDE0LjUyMTggMTYuNzQ0IDEzLjk0MzggMTcuMDgxIDEzLjU2ODNMMTcuMTE3MSAxMy41MzAyTDIzLjczNCA2LjkxMzA0SDE2Ljk1NjVDMTYuNDI4MiA2LjkxMzA0IDE2IDYuNDg0NzkgMTYgNS45NTY1MkMxNiA1LjQ0NDI2IDE2LjQwMjcgNS4wMjYwNSAxNi45MDg4IDUuMDAxMTdMMTYuOTU2NSA1WiIgZmlsbD0iI0YyRjRGOSIvPgo8cGF0aCBpZD0iQ29tYmluZWQgU2hhcGUgQ29weSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik01Ljk1NjUyIDI3TDUuOTA4NTQgMjYuOTk4OEw1Ljg1ODc0IDI2Ljk5NUw1Ljc5NTcyIDI2Ljk4NjVMNS43NTg1OCAyNi45Nzk1TDUuNzI0NDMgMjYuOTcxNkw1LjY5NjUxIDI2Ljk2NDJMNS42NDIyNyAyNi45NDcyTDUuNTk3MjMgMjYuOTMwMkw1LjU0MjEzIDI2LjkwNThMNS40OTA4NSAyNi44NzkzTDUuNDM1NjkgMjYuODQ1OUw1LjM5ODcyIDI2LjgyMDdMNS4zNjc0NCAyNi43OTcyTDUuMzI2MDQgMjYuNzYyOEw1LjI4OTUyIDI2LjcyOTFMNS4yNTgyMiAyNi42OTcyTDUuMjE5IDI2LjY1MjdMNS4yMDYxNyAyNi42MzY4QzUuMTg2NjkgMjYuNjEyMiA1LjE2ODQgMjYuNTg2NiA1LjE1MTM3IDI2LjU2MDFDNS4xMjk5NyAyNi41MjcgNS4xMTA5MSAyNi40OTI4IDUuMDk0MSAyNi40NTc4TDUuMDc1NzIgMjYuNDE3MUw1LjA1OTQyIDI2LjM3Nkw1LjA0MzcgMjYuMzI5OUM1LjAzNTEzIDI2LjMwMjcgNS4wMjc3NyAyNi4yNzUgNS4wMjE2NyAyNi4yNDY5TDUuMDEwMzcgMjYuMTg0OEM1LjAwNTgyIDI2LjE1NDEgNS4wMDI3MiAyNi4xMjI4IDUuMDAxMTcgMjYuMDkxMkw1IDI2LjA0MzVWMTYuOTU2NUM1IDE2LjQyODIgNS40MjgyNSAxNiA1Ljk1NjUyIDE2QzYuNDY4NzkgMTYgNi44ODcgMTYuNDAyNyA2LjkxMTg3IDE2LjkwODhMNi45MTMwNCAxNi45NTY1VjIzLjczNDRMMTMuNTMwMiAxNy4xMTcxQzEzLjkwMzcgMTYuNzQzNiAxNC41MDkzIDE2Ljc0MzYgMTQuODgyOSAxNy4xMTcxQzE1LjI0NCAxNy40NzgyIDE1LjI1NiAxOC4wNTYyIDE0LjkxOSAxOC40MzE3TDE0Ljg4MjkgMTguNDY5OEw4LjI2NjA0IDI1LjA4N0gxNS4wNDM1QzE1LjU3MTggMjUuMDg3IDE2IDI1LjUxNTIgMTYgMjYuMDQzNUMxNiAyNi41NTU3IDE1LjU5NzMgMjYuOTc0IDE1LjA5MTIgMjYuOTk4OEwxNS4wNDM1IDI3SDUuOTU2NTJaIiBmaWxsPSIjRjJGNEY5Ii8+CjwvZz4KPC9zdmc+Cg=="); + --tab-close-button-url: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzIiIGhlaWdodD0iMzIiIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGcgaWQ9IjAyIC0gSUNPTlMvWC9EYXJrIFQuIj4KPHBhdGggaWQ9IkNvbWJpbmVkIFNoYXBlIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTcuNDI2MDEgNi4xNjEwN0M3LjA3MTcgNS45MTU2MyA2LjU4MTg0IDUuOTUwNjkgNi4yNjYyNyA2LjI2NjI3QzUuOTExMjQgNi42MjEyOSA1LjkxMTI0IDcuMTk2ODkgNi4yNjYyNyA3LjU1MTkyTDE0LjcxNDQgMTZMNi4yNjYyNyAyNC40NDgxTDYuMTYxMDcgMjQuNTc0QzUuOTE1NjMgMjQuOTI4MyA1Ljk1MDY5IDI1LjQxODIgNi4yNjYyNyAyNS43MzM3QzYuNjIxMjkgMjYuMDg4OCA3LjE5Njg5IDI2LjA4ODggNy41NTE5MiAyNS43MzM3TDE2IDE3LjI4NTZMMjQuNDQ4MSAyNS43MzM3TDI0LjU3NCAyNS44Mzg5QzI0LjkyODMgMjYuMDg0NCAyNS40MTgyIDI2LjA0OTMgMjUuNzMzNyAyNS43MzM3QzI2LjA4ODggMjUuMzc4NyAyNi4wODg4IDI0LjgwMzEgMjUuNzMzNyAyNC40NDgxTDE3LjI4NTYgMTZMMjUuNzMzNyA3LjU1MTkyTDI1LjgzODkgNy40MjYwMUMyNi4wODQ0IDcuMDcxNyAyNi4wNDkzIDYuNTgxODQgMjUuNzMzNyA2LjI2NjI3QzI1LjM3ODcgNS45MTEyNCAyNC44MDMxIDUuOTExMjQgMjQuNDQ4MSA2LjI2NjI3TDE2IDE0LjcxNDRMNy41NTE5MiA2LjI2NjI3TDcuNDI2MDEgNi4xNjEwN1oiIGZpbGw9IiNGMkY0RjkiLz4KPC9nPgo8L3N2Zz4K"); + --new-tab-button-url: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQAAAAEACAMAAABrrFhUAAAAAXNSR0IB2cksfwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAJNQTFRFAAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////0TslXgAAADF0Uk5TAA1Zm8rs+utYJp72//WcJAmM+4oIJdTRIzHq6S8KiQ70DFaYx/lVC5kihtLPB+chLkL8Um8AAAM+SURBVHic7d3rVtNQEEDhlJZwO9xB0CAW2iAiou//dOLCpas2OTNBJtNp9n6COZ+t1T8zRUFERERERERE1FujjfFksyy3JuPtkfcsDu3s7qU/7R8ces/Tc0fHJ2mh8vTMe6Y+O3+Xlrq49J6qv95/WH5/StWV91x9dd74/meBgXwGPjZ8/n9/C4bx98Bx2/tTuvaerY92TtoByiF8CXbb35/S2Hs6+z7t5QCmN97zmbeRe39Kt97zmTfOA8y85zNvkgeYe89n3mYeoPKez7wyD1B7z2de/v0pec9nHgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAID3fOYBAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAeM9nHgAAAAAAAAAAAAAAAAAAwIoDvOz/lwZe9V59v2Bh/3/0ut8vWNr/H72O9wua9v9Hr8v9gub9/9HT3y9o2/8fPe39gvb9/9FT3i/I7P+Pnup+QW7/f/RU9wuy+/+jp7hfkN//Hz3F/QJh/3/05PsFwv7/6Mn3C4T9/9GT7xcI+/+jJ98vCP//33zy/YLBA2x5j2ib/BUY/F+Cg/8Z3PYe0bY7EWC07z2jZdPPIkBx4D2kZffy+4vDNf4hrL8oAIpT7zHtetC8vzj66j2nVY/fVADFZeU9qU1P33XvL4qrtRR4+qF9//Nn4MJ72rfvUf3n/6uz6zX7LagflN//vx+C8dR76Ldreq/6/funm9vZvKq9Z//f6mo+u1P8+6+3pIG95zMPAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwHs+8wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAC85zMPAAAAAAAAAAAAAAAAAABgkADCqk55/3/0hPsF8v7/6An3C+T9/9ET7hfI+/+jJ9wvkPf/Ry9/v0Cz/z962fsFmv3/0cvdL9Dt/49e5n6Bbv9/9NrvF2j3/0ev7X6Bfv9/9JrvF3TZ/x+9pvsF3fb/R2/pfkH3/f/RW7hf8Lr9/9F7uV+wcvv/iYiIiIiIiGjt+wlaXmsfieItGAAAAABJRU5ErkJggg=="); } body { - min-height: 100%; - width: 100%; - margin: 0; - padding: 0px; - overflow: hidden; - color: var(--body-font-color); - background-color: var(--main-background-color); + min-height: 100%; + width: 100%; + margin: 0; + padding: 0px; + overflow: hidden; + color: var(--body-font-color); + background-color: var(--main-background-color); } html { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - overflow: hidden; + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + overflow: hidden; } -body, -select, -button, -li, -span, -div { - font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; - color: var(--body-font-color); +body, select, button, li, span, div { + font-family: 'Akkurat Pro', Arial, Helvetica, sans-serif; + color: var(--body-font-color); } #of-frame-main { - height: 100%; - width: 100%; - padding: 0px; - margin: 0; - position: absolute; - overflow: hidden; - background-color: var(--frame-background-color); + height: 100%; + width: 100%; + padding: 0px; + margin: 0; + position: absolute; + overflow: hidden; + background-color: var(--frame-background-color); } #title-bar { - background: var(--title-bar-background-color); - width: 100%; - height: var(--title-bar-height); - display: flex; - border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); + background: var(--title-bar-background-color); + width: 100%; + height: var(--title-bar-height); + display: flex; + border-bottom: var(--title-bar-border-bottom-height) solid rgba(255, 255, 255, 0.1); } .title-bar-draggable { - position: relative; - flex-grow: 1; - margin: 7px 0 0 7px; /* leave grabbable margin for resize */ - -webkit-app-region: drag; - -webkit-user-select: none; + position: relative; + flex-grow: 1; + margin: 7px 0 0 7px; /* leave grabbable margin for resize */ + -webkit-app-region: drag; + -webkit-user-select: none; } div.wrapper_title { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - font-size: 3vw; - opacity: 0.5; - color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + font-size: 3vw; + opacity: 0.5; + color: var(--tab-font-color); /* this is the text you see when a view isn't showing */ } div.placeholder_image { - opacity: 0.7; - color: var(--tab-background-color); + opacity: 0.7; + color: var(--tab-background-color); } div.placeholder_image img { - height: 100%; - width: 100%; - filter: blur(6px); + height: 100%; + width: 100%; + filter: blur(6px); } #buttons-wrapper { - -webkit-app-region: none; - cursor: pointer; - user-select: none; - display: flex; - justify-content: space-between; - align-items: center; + -webkit-app-region: none; + cursor: pointer; + user-select: none; + display: flex; + justify-content: space-between; + align-items: center; } .button { - -webkit-app-region: no-drag; - vertical-align: middle; - height: 100%; - width: 30px; - background-size: 14px; - background-position: center; - background-repeat: no-repeat; + -webkit-app-region: no-drag; + vertical-align: middle; + height: 100%; + width: 30px; + background-size: 14px; + background-position: center; + background-repeat: no-repeat; } .button:hover { - background-color: var(--top-bar-button-hover-color); + background-color: var(--top-bar-button-hover-color); } .button:active { - background-color: var(--top-bar-button-active-color); + background-color: var(--top-bar-button-active-color); } #close-button:hover { - background-color: var(--top-bar-close-button-color); + background-color: var(--top-bar-close-button-color); } #close-button:active { - background-color: var(--top-bar-close-button-active-color); + background-color: var(--top-bar-close-button-active-color); } #body-container { - height: var(--body-container-height); - width: var(--body-container-width); - padding: var(--body-container-padding); + height: var(--body-container-height); + width: var(--body-container-width); + padding: var(--body-container-padding); } #layout-container { - height: var(--layout-container-height); - width: var(--layout-container-width); - padding: var(--layout-container-padding); + height: var(--layout-container-height); + width: var(--layout-container-width); + padding: var(--layout-container-padding); } .lm_header .lm_tab .lm_close_tab { - background-image: var(--tab-close-button-url); - height: 14px; - width: 14px; - background-size: 12px; - background-position: center; - border-radius: 50%; - position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ - top: 6px; - right: 6px; + background-image: var(--tab-close-button-url); + height: 14px; + width: 14px; + background-size: 12px; + background-position: center; + border-radius: 50%; + position: absolute; /* Must be absolute, otherwise we end up with overflow errors due to inline styles */ + top: 6px; + right: 6px; } .lm_header .lm_tab .lm_close_tab:hover { - background-color: var(--tab-button-hover-color); + background-color: var(--tab-button-hover-color); } .lm_header .lm_tab .lm_close_tab:active { - background-color: var(--tab-button-active-color); + background-color: var(--tab-button-active-color); } #close-button { - background-image: var(--close-button-url); + background-image: var(--close-button-url); } #expand-button { - background-image: var(--expand-button-url); + background-image: var(--expand-button-url); } #minimize-button { - background-image: var(--minimize-button-url); + background-image: var(--minimize-button-url); } .lm_goldenlayout { - background-color: var(--frame-background-color); + background-color: var(--frame-background-color); } .lm_header { - -webkit-app-region: no-drag; - box-shadow: none; - border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); - height: 25px; - user-select: none; + -webkit-app-region: no-drag; + box-shadow: none; + border-bottom: var(--header-border-bottom-height) solid var(--tab-background-color); + height: 25px; + user-select: none; } .lm_tabs { - -webkit-app-region: no-drag; - background-color: var(--tabs-bar-background-color); - border-top-left-radius: var(--corner-radius); - border-top-right-radius: var(--corner-radius); - width: 100%; + -webkit-app-region: no-drag; + background-color: var(--tabs-bar-background-color); + border-top-left-radius: var(--corner-radius); + border-top-right-radius: var(--corner-radius); + width: 100%; } .lm_header .lm_tab { - border-top-right-radius: var(--corner-radius); - border-top-left-radius: var(--corner-radius); - background-color: var(--tab-background-color); - color: var(--tab-font-color); - height: 100%; - margin-right: 0px; - margin-top: 0px; - white-space: nowrap; - overflow-x: hidden; + border-top-right-radius: var(--corner-radius); + border-top-left-radius: var(--corner-radius); + background-color: var(--tab-background-color); + color: var(--tab-font-color); + height: 100%; + margin-right: 0px; + margin-top: 0px; + white-space: nowrap; + overflow-x: hidden; } .lm_header .lm_tabs .lm_tab { - padding-left: 8px; - padding-top: 2px; - padding-right: 8px; - padding-bottom: 2px; - border-top: 2px solid var(--tab-background-color); - opacity: 60%; - z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ + padding-left: 8px; + padding-top: 2px; + padding-right: 8px; + padding-bottom: 2px; + border-top: 2px solid var(--tab-background-color); + opacity: 60%; + z-index: 100 !important; /* Necessary to make sure that the controls panel doesn't appear above the tabs. This is to overwrite an inline style coming from golden-layouts. */ } .lm_header .lm_tabs .lm_tab:hover { - border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ - opacity: 80%; + border-top: 2px solid var(--tab-border-top-color); /* might be able to take this out */ + opacity: 80%; } .lm_header .lm_tab .lm_title { - margin-right: 10px; - line-height: 25px; - font-size: 12px; - vertical-align: middle; - padding: 0; - white-space: nowrap; - color: var(--tab-font-color); - font-weight: 300; + margin-right: 10px; + line-height: 25px; + font-size: 12px; + vertical-align: middle; + padding: 0; + white-space: nowrap; + color: var(--tab-font-color); + font-weight: 300; } .lm_title { - width: 120px; - white-space: nowrap; + width: 120px; + white-space: nowrap; } .lm_header .lm_tab.lm_active { - border-top: 2px solid var(--tab-border-top-color); - background-color: var(--tab-background-active-color); - opacity: 100%; + border-top: 2px solid var(--tab-border-top-color); + background-color: var(--tab-background-active-color); + opacity: 100%; } .lm_header .lm_tabs .lm_active:hover { - border-color: var(--tab-border-top-highlight-color); - opacity: 90%; + border-color: var(--tab-border-top-highlight-color); + opacity: 90%; } .lm_content { - background-color: var(--color-behind-views); - border-bottom-left-radius: 0px; - border-bottom-right-radius: 0px; + background-color: var(--color-behind-views); + border-bottom-left-radius: 0px; + border-bottom-right-radius: 0px; } .lm_splitter { - background-color: var(--splitter-color); - opacity: 0.001; + background-color: var(--splitter-color); + opacity: 0.001; transition: opacity 200ms ease; } .lm_splitter:hover, .lm_splitter.lm_dragging { - background-color: var(--splitter-hover-color); - opacity: 1; + background-color: var(--splitter-hover-color); + opacity: 1; } .lm_dropTargetIndicator { - box-shadow: none; - outline: none; - transition: all 200ms ease; - background: var(--drop-target-background-color); - border: 1px solid var(--drop-target-border-color); - box-sizing: border-box; - border-radius: 2px; - margin-top: 1px; + box-shadow: none; + outline: none; + transition: all 200ms ease; + background: var(--drop-target-background-color); + border: 1px solid var(--drop-target-border-color); + box-sizing: border-box; + border-radius: 2px; + margin-top: 1px; } .lm_dropTargetIndicator .lm_inner { - background: var(--tab-background-color); - opacity: 0.2; + background: var(--tab-background-color); + opacity: .2 } .lm_tabdropdown_list { - z-index: 101 !important; + z-index: 101 !important; } - + .lm_header .lm_tabdropdown_list .lm_tab { - background-color: var(--secondary-background-color); + background-color: var(--secondary-background-color); } .lm_header .lm_tabdropdown_list .lm_tab:hover { - background-color: var(--main-background-color); + background-color: var(--main-background-color); } -.lm_header .lm_controls li.lm_tabdropdown:before { - color: var(--tab-font-color); +.lm_header .lm_controls li.lm_tabdropdown:before{ + color: var(--tab-font-color) } .lm_controls li { position: relative; background-position: center center; background-repeat: no-repeat; - opacity: 0.4; - transition: opacity 300ms ease; + opacity: .4; + transition: opacity 300ms ease } .lm_controls li:hover { - opacity: 1; + opacity: 1 } .lm_controls .lm_popout { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAPklEQVR4nI2Q0QoAIAwCNfr/X7aXCpGN8snBdgejJOzckpkxs9jR6K6T5JpU0nWl5pSXTk7qwh8SnNT+CAAWCgkKFpuSWsUAAAAASUVORK5CYII=) } .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAKElEQVR4nGP8////fwYCgImQAgYGBgYWKM2IR81/okwajIpgvsMbVgAwgQYRVakEKQAAAABJRU5ErkJggg==) } .lm_controls .lm_close { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAJCAYAAADgkQYQAAAAQUlEQVR4nHXOQQ4AMAgCQeT/f6aXpsGK3jSTuCVJAAr7iBdoAwCKd0nwfaAdHbYERw5b44+E8JoBjEYGMBq5gAYP3usUDu2IvoUAAAAASUVORK5CYII=) } .lm_maximised .lm_controls .lm_maximise { - background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC); + background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAJ0lEQVR4nGP8//8/AzGAiShVI1YhCwMDA8OsWbPwBmZaWhoj0SYCAN1lBxMAX4n0AAAAAElFTkSuQmCC) } -.lm_header > .lm_tabs > .focused_tab { - border-color: var(--focused-tab-border-top-color); +.lm_header>.lm_tabs>.focused_tab { + border-color: var(--focused-tab-border-top-color); } -.lm_header > .lm_tabs > .focused_tab:hover { - border-color: var(--focused-tab-border-top-highlight-color); +.lm_header>.lm_tabs>.focused_tab:hover { + border-color: var(--focused-tab-border-top-highlight-color); } .tab-icon { - height: 12px; - width: 12px; - vertical-align: baseline; - margin-right: 7px; + height: 12px; + width: 12px; + vertical-align: baseline; + margin-right: 7px; } .lm_tabs .newTabButton { - background-image: var(--new-tab-button-url); - filter: invert(0.3); + background-image: var(--new-tab-button-url); + filter: invert(.3); background-size: cover; width: 12px; height: 12px; @@ -745,12 +726,12 @@ div.placeholder_image img { } .lm_tabs .newTabButton:hover { - filter: invert(0); + filter: invert(0); } :root.light-theme .newTabButton { - filter: invert(0.7); + filter: invert(.7); } :root.light-theme .newTabButton:hover { - filter: invert(1); -} + filter: invert(1); +} \ No newline at end of file diff --git a/how-to/web-interop/public/manifest.json b/how-to/web-interop/public/manifest.json index 0e06858..418bda6 100644 --- a/how-to/web-interop/public/manifest.json +++ b/how-to/web-interop/public/manifest.json @@ -14,23 +14,16 @@ ], "related_applications": [], "custom_settings": { - "platform": { - "interop": { - "sharedWorkerUrl": "http://localhost:6060/js/shared-worker.bundle.js", - "brokerUrl": "http://localhost:6060/platform/iframe-broker.html", - "providerId": "web-interop", - "defaultContextGroup": "green" - }, - "layout": { - "panels": { - "left": { - "url": "http://localhost:6060/views/fdc3-panel.html", - "frameId": "left-panel" + "endpointProvider": { + "endpoints": [ + { + "id": "platform-settings", + "type": "fetch", + "options": { + "method": "GET", + "url": "http://localhost:6060/settings.json" } - }, - "layoutContainerId": "layout_container", - "defaultLayout": "http://localhost:6060/layouts/default.layout.fin.json" - } + }] } } } diff --git a/package-lock.json b/package-lock.json index e19290a..915e72d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -172,6 +172,7 @@ "license": "SEE LICENSE IN LICENSE.MD", "dependencies": { "@finos/fdc3": "2.0.3", + "@openfin/cloud-interop": "0.38.55", "@openfin/core-web": "0.38.55" }, "devDependencies": {