Skip to content

Commit

Permalink
🎨 [Frontend] Make the Light Theme less white (#6681)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Nov 12, 2024
1 parent 0981f49 commit 819df89
Show file tree
Hide file tree
Showing 12 changed files with 100 additions and 151 deletions.
9 changes: 1 addition & 8 deletions services/static-webserver/client/source/class/osparc/Application.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,18 +222,13 @@ qx.Class.define("osparc.Application", {
__setDeviceSpecificIcons: function() {
const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const isAndroid = /android/i.test(navigator.userAgent);
const isWindows = /windows/i.test(navigator.userAgent);
// const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
// const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
// default icons
this.__updateMetaTags();
this.__setDefaultIcons()
if (isIOS) {
this.__setIOSpIcons();
} else if (isAndroid) {
this.__setGoogleIcons();
} else if (isWindows) {
// this.__updateBrowserConfig(this.__getProductMetaData().productColor);
}
},

Expand All @@ -246,16 +241,14 @@ qx.Class.define("osparc.Application", {
}

const productColor = qx.theme.manager.Color.getInstance().resolve("product-color");
const backgroundColor = qx.theme.manager.Color.getInstance().resolve("primary-background-color");
return {
productName: productName,
productColor: productColor,
backgroundColor: backgroundColor
}
},

__updateMetaTags: function() {
// check device type and only set the icons for the divice type
// check device type and only set the icons for the device type
// i.e iOS, Android or windows etc
const themeColorMeta = document.querySelector("meta[name='theme-color']");
const tileColorMeta = document.querySelector("meta[name='msapplication-TileColor']");
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/auth/LoginPageS4L.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ qx.Class.define("osparc.auth.LoginPageS4L", {
const layout = new qx.ui.layout.HBox();
this._setLayout(layout);

this.setBackgroundColor("primary-background-color");
this.setBackgroundColor("rgba(0, 20, 46, 1)");

this._removeAll();

Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/desktop/SlideshowView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ qx.Class.define("osparc.desktop.SlideshowView", {
this._setLayout(new qx.ui.layout.VBox());

const slideshowToolbar = this.__slideshowToolbar = new osparc.desktop.SlideshowToolbar().set({
backgroundColor: "tab_navigation_bar_background_color"
backgroundColor: "workbench-view-navbar"
});

const collapseWithUserMenu = this.__collapseWithUserMenu = new osparc.desktop.CollapseWithUserMenu();
Expand Down
26 changes: 6 additions & 20 deletions services/static-webserver/client/source/class/osparc/desktop/WorkbenchView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,16 +40,10 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
TAB_BUTTON_HEIGHT: 46,

decorateSplitter: function(splitter) {
const colorManager = qx.theme.manager.Color.getInstance();
const binaryColor = osparc.utils.Utils.getRoundedBinaryColor(colorManager.resolve("background-main"));
splitter.set({
width: 2,
backgroundColor: binaryColor
backgroundColor: "workbench-view-splitter"
});
colorManager.addListener("changeTheme", () => {
const newBinaryColor = osparc.utils.Utils.getRoundedBinaryColor(colorManager.resolve("background-main"));
splitter.setBackgroundColor(newBinaryColor);
}, this);
},

decorateSlider: function(slider) {
Expand Down Expand Up @@ -202,7 +196,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
control = new qx.ui.tabview.TabView().set({
contentPadding: osparc.widget.CollapsibleViewLight.CARET_WIDTH + 2, // collapse bar + padding
contentPaddingRight: 2,
backgroundColor: this.self().PRIMARY_COL_BG_COLOR,
barPosition: "top"
});
const collapsibleViewLeft = this.getChildControl("collapsible-view-left");
Expand Down Expand Up @@ -322,7 +315,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
const topBar = tabViewPrimary.getChildControl("bar");
topBar.set({
height: this.self().TAB_BUTTON_HEIGHT,
backgroundColor: "tab_navigation_bar_background_color"
backgroundColor: "workbench-view-navbar"
});
this.__addTopBarSpacer(topBar);

Expand Down Expand Up @@ -392,7 +385,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
const topBar = tabViewSecondary.getChildControl("bar");
topBar.set({
height: this.self().TAB_BUTTON_HEIGHT,
backgroundColor: "tab_navigation_bar_background_color"
backgroundColor: "workbench-view-navbar"
});
this.__addTopBarSpacer(topBar);

Expand Down Expand Up @@ -427,7 +420,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {
topBar.set({
height: this.self().TAB_BUTTON_HEIGHT,
alignY: "top",
backgroundColor: "tab_navigation_bar_background_color"
backgroundColor: "workbench-view-navbar"
});
this.__addTopBarSpacer(topBar);

Expand Down Expand Up @@ -483,7 +476,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {

__addTopBarSpacer: function(tabViewTopBar) {
const spacer = new qx.ui.core.Widget().set({
backgroundColor: "tab_navigation_bar_background_color"
backgroundColor: "workbench-view-navbar"
});
tabViewTopBar.add(spacer, {
flex: 1
Expand All @@ -492,7 +485,7 @@ qx.Class.define("osparc.desktop.WorkbenchView", {

__createCollapsibleViewSpacer: function() {
const spacer = new qx.ui.core.Widget().set({
backgroundColor: "tab_navigation_bar_background_color",
backgroundColor: "workbench-view-navbar",
height: this.self().TAB_BUTTON_HEIGHT
});
return spacer;
Expand Down Expand Up @@ -1079,13 +1072,6 @@ qx.Class.define("osparc.desktop.WorkbenchView", {

const nodeOptions = new osparc.widget.NodeOptions(node);
nodeOptions.buildLayout();
[
"versionChanged",
"bootModeChanged",
"limitsChanged"
].forEach(eventName => {
nodeOptions.addListener(eventName, () => this.__populateSecondaryColumn(node));
});

return nodeOptions;
},
Expand Down
5 changes: 0 additions & 5 deletions services/static-webserver/client/source/class/osparc/node/BootOptionsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
qx.Class.define("osparc.node.BootOptionsView", {
extend: osparc.node.ServiceOptionsView,

events: {
"bootModeChanged": "qx.event.type.Event"
},

members: {
_applyNode: function(node) {
if (node.hasBootModes()) {
Expand Down Expand Up @@ -61,7 +57,6 @@ qx.Class.define("osparc.node.BootOptionsView", {
setTimeout(() => {
buttonsLayout.setEnabled(true);
node.requestStartNode();
this.fireEvent("bootModeChanged");
}, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
}
}, this);
Expand Down
5 changes: 0 additions & 5 deletions services/static-webserver/client/source/class/osparc/node/LifeCycleView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
qx.Class.define("osparc.node.LifeCycleView", {
extend: osparc.node.ServiceOptionsView,

events: {
"versionChanged": "qx.event.type.Event"
},

members: {
_applyNode: function(node) {
if (node.isUpdatable() || node.isDeprecated() || node.isRetired()) {
Expand Down Expand Up @@ -125,7 +121,6 @@ qx.Class.define("osparc.node.LifeCycleView", {
setTimeout(() => {
updateButton.setFetching(false);
node.requestStartNode();
this.fireEvent("versionChanged");
}, osparc.desktop.StudyEditor.AUTO_SAVE_INTERVAL);
});

Expand Down
5 changes: 0 additions & 5 deletions services/static-webserver/client/source/class/osparc/node/UpdateResourceLimitsView.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,10 +18,6 @@
qx.Class.define("osparc.node.UpdateResourceLimitsView", {
extend: osparc.node.ServiceOptionsView,

events: {
"limitsChanged": "qx.event.type.Event"
},

members: {
__resourceFields: null,
__saveBtn: null,
Expand Down Expand Up @@ -159,7 +155,6 @@ qx.Class.define("osparc.node.UpdateResourceLimitsView", {
osparc.data.Resources.fetch("nodesInStudyResources", "put", params)
.then(() => {
osparc.FlashMessenger.getInstance().logAs(this.tr("Limits successfully updated"));
this.fireEvent("limitsChanged");
})
.catch(err => {
console.error(err);
Expand Down
5 changes: 2 additions & 3 deletions services/static-webserver/client/source/class/osparc/notification/RibbonNotifications.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -97,15 +97,14 @@ qx.Class.define("osparc.notification.RibbonNotifications", {

if (notification.getType() === "announcement") {
const dontShowButton = new qx.ui.form.Button(this.tr("Don't show again")).set({
backgroundColor: "transparent",
textColor: "strong-text",
appearance: "strong-button",
alignY: "middle",
padding: 4,
allowGrowX: false,
allowGrowY: false,
marginLeft: 15
});
osparc.utils.Utils.addBorder(dontShowButton, 1, qx.theme.manager.Color.getInstance().resolve("strong-text"));
osparc.utils.Utils.addBorder(dontShowButton, 1, qx.theme.manager.Color.getInstance().resolve("text"));
dontShowButton.addListener("tap", () => {
this.removeNotification(notification);
osparc.utils.Utils.localCache.setDontShowAnnouncement(notification.announcementId);
Expand Down
81 changes: 39 additions & 42 deletions services/static-webserver/client/source/class/osparc/theme/ColorDark.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,27 @@ qx.Theme.define("osparc.theme.ColorDark", {
include: osparc.theme.mixin.Color,

colors: {
// 105-0
"c00": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105),
"c01": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 100),
"c02": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 95),
"c03": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 85),
"c04": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 80),
"c05": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 70),
"c06": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 55),
"c07": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 45),
"c08": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 35),
"c09": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 30),
"c10": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 25),
"c11": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 20),
"c12": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 15),
"c13": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 8),
"c14": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 0),
"c01": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-5),
"c02": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-10),
"c03": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-20),
"c04": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-25),
"c05": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-35),
"c06": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-50),
"c07": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-60),
"c08": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-70),
"c09": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-75),
"c10": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-80),
"c12": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-90),
"c14": osparc.theme.colorProvider.ColorProvider.getColor("color.scales.static.base", 105-105),

"product-color": "rgba(0, 144, 208, 1)", // override in product
"strong-main": "product-color",
"strong-text": "rgba(255, 255, 255, 1)",
"a-bit-transparent": "rgba(0, 0, 0, 0.4)",

// main
"background-main": "#222",
"background-main": "c01",
"background-main-1": "c02",
"background-main-2": "c03",
"background-main-3": "c04",
Expand All @@ -34,10 +32,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
"background-card-overlay": "rgba(25, 33, 37, 0.8)",
"background-workspace-card-overlay": "rgb(35, 93, 122)",

"primary-background-color": "rgba(0, 20, 46, 1)",
"navigation_bar_background_color": "rgba(1, 18, 26, 0.8)",
"tab_navigation_bar_background_color": "c00",
"modal-backdrop": "rgba(8, 9, 13, 1)",
"fab_text": "contrasted-text-dark",
"fab-background": "rgba(255, 255, 255, 0.2)",
"input_background": "#213248",
Expand All @@ -58,18 +53,18 @@ qx.Theme.define("osparc.theme.ColorDark", {
"link": "rgba(10, 182, 255, 1)",

// shadows
"bg-shadow": "background-main-5",
"box-shadow": "rgba(0,0,0, 0.15)",
"bg-shadow": "background-main-5",
"box-shadow": "rgba(0, 0, 0, 0.15)",
"shadow": qx.core.Environment.get("css.rgba") ? "a-bit-transparent" : "bg-shadow",

// window
"window-popup-background": "rgba(66, 66, 66, 1)",
"window-caption-background": "background-main",
"window-caption-background-active": "background-main-3",
"window-caption-background-active": "background-main-3",
"window-caption-text": "text",
"window-caption-text-active": "c12",
"window-border": "background-main-2",
"window-border-inner": "background-main-1",
"window-border": "background-main-2",
"window-border-inner": "background-main-1",

// material-button
"material-button-background": "fab-background",
Expand All @@ -88,10 +83,10 @@ qx.Theme.define("osparc.theme.ColorDark", {

// backgrounds
"background-selected": "default-button-background",
"background-selected-disabled": "default-button-disabled",
"background-selected-dark": "product-color",
"background-selected-disabled": "default-button-disabled",
"background-selected-dark": "product-color",
"background-disabled": "background-main",
"background-disabled-checked": "background-main-1",
"background-disabled-checked": "background-main-1",
"background-pane": "background-main",

// tabview
Expand All @@ -102,23 +97,23 @@ qx.Theme.define("osparc.theme.ColorDark", {
"tabview-button-background": "transparent",

// scrollbar
"scrollbar-passive": "background-main-4",
"scrollbar-active": "background-main-5",
"scrollbar-passive": "background-main-4",
"scrollbar-active": "background-main-5",

// form
"button": "background-main-4",
"button-border": "background-main-5",
"button-border": "background-main-5",
"button-border-hovered": "c07",
"button-box": "background-main-3",
"button-box-pressed": "background-main-4",
"button-box": "background-main-3",
"button-box-pressed": "background-main-4",
"border-lead": "c07",

// group box
"white-box-border": "background-main-2",
"white-box-border": "background-main-2",

// borders
// 'border-main' is an alias of 'background-selected' (compatibility reasons)
"border": "background-main-3",
"border": "background-main-3",
"border-focused": "c09",
"border-invalid": "failed-red",
"border-disabled": "background-main",
Expand All @@ -134,13 +129,13 @@ qx.Theme.define("osparc.theme.ColorDark", {
"table-header": "background-main",
"table-header-foreground": "c09",
"table-header-border": "c07",
"table-focus-indicator": "background-main-5",
"table-focus-indicator": "background-main-5",

// used in table code
"table-header-cell": "background-main",
"table-row-background-focused-selected": "background-main-4",
"table-row-background-focused": "background-main-3",
"table-row-background-selected": "background-main-4",
"table-row-background-focused-selected": "background-main-4",
"table-row-background-focused": "background-main-3",
"table-row-background-selected": "background-main-4",
"table-row-background-even": "background-main",
"table-row-background-odd": "background-main",

Expand All @@ -156,18 +151,20 @@ qx.Theme.define("osparc.theme.ColorDark", {
"progressive-table-header": "c08",
"progressive-table-row-background-even": "background-main",
"progressive-table-row-background-odd": "background-main",
"progressive-progressbar-background": "background-main",
"progressive-progressbar-background": "background-main",
"progressive-progressbar-indicator-done": "background-main",
"progressive-progressbar-indicator-undone": "background-main-1",
"progressive-progressbar-percent-background": "background-main",
"progressive-progressbar-percent-text": "background-main-1",
"progressive-progressbar-indicator-undone": "background-main-1",
"progressive-progressbar-percent-background": "background-main",
"progressive-progressbar-percent-text": "background-main-1",



// OSPARC
"workbench-edge-comp-active": "#777777",
"workbench-edge-api-active": "#BBBBBB",
"workbench-start-hint": "#505050",
"workbench-view-navbar": "c00",
"workbench-view-splitter": "#000000",

"node-background": "rgba(113, 157, 181, 0.5)",
"node-selected-background": "strong-main",
Expand Down
Loading

0 comments on commit 819df89

Please sign in to comment.