Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

🎨 [Frontend] Make the Light Theme less white #6681

Merged
merged 22 commits into from
Nov 12, 2024
Merged

🎨 [Frontend] Make the Light Theme less white #6681

Show file tree
Hide file tree
Changes from 16 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
8661cfa
unused colors
odeimaiz Nov 6, 2024
3fe10e2
minor
odeimaiz Nov 6, 2024
83bb23d
unify colors
odeimaiz Nov 6, 2024
0b92d47
Merge branch 'master' into enh/ligth-theme
odeimaiz Nov 6, 2024
15213cd
minor
odeimaiz Nov 6, 2024
8238ebd
equal to dark
odeimaiz Nov 6, 2024
f1bda38
minor
odeimaiz Nov 6, 2024
4ff2f3d
less white
odeimaiz Nov 6, 2024
bd55a73
unused
odeimaiz Nov 6, 2024
2c55d4e
minors
odeimaiz Nov 7, 2024
4796df0
unused events
odeimaiz Nov 11, 2024
140776e
Merge branch 'master' into enh/ligth-theme
odeimaiz Nov 11, 2024
d0b9884
"primary-background-color"
odeimaiz Nov 11, 2024
9b51c29
minor
odeimaiz Nov 11, 2024
cfcf1b7
"workbench-view-splitter"
odeimaiz Nov 11, 2024
50c195f
workbench-view-navbar
odeimaiz Nov 11, 2024
15de1fe
minor
odeimaiz Nov 11, 2024
9bfeda9
Merge branch 'master' into enh/ligth-theme
odeimaiz Nov 12, 2024
6ebbde2
Merge branch 'master' into enh/ligth-theme
odeimaiz Nov 12, 2024
3c1d1b2
Merge branch 'master' into enh/ligth-theme
odeimaiz Nov 12, 2024
b116127
Merge branch 'master' into enh/ligth-theme
odeimaiz Nov 12, 2024
7d18622
Merge branch 'master' into enh/ligth-theme
odeimaiz Nov 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 1 addition & 8 deletions services/static-webserver/client/source/class/osparc/Application.js
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
80 changes: 38 additions & 42 deletions services/static-webserver/client/source/class/osparc/theme/ColorDark.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,28 +3,25 @@ qx.Theme.define("osparc.theme.ColorDark", {

colors: {
"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 +31,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 +52,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 +82,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 +96,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 +128,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 +150,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
Loading