Skip to content

Commit

Permalink
Merge branch 'master' into enh/let-me-logout
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Oct 23, 2024
2 parents 13ae74b + adac8d0 commit 64422d0
Show file tree
Hide file tree
Showing 5 changed files with 95 additions and 17 deletions.
21 changes: 11 additions & 10 deletions services/static-webserver/client/source/class/osparc/dashboard/FolderWithSharedIcon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,27 +23,28 @@ qx.Class.define("osparc.dashboard.FolderWithSharedIcon", {

this._setLayout(new qx.ui.layout.Canvas());

this._createChildControlImpl("folder-icon");
this._createChildControlImpl("shared-icon");
this.getChildControl("folder-icon");
this.getChildControl("shared-icon");
},

members: {
_createChildControlImpl: function(id) {
let control;
switch (id) {
case "folder-icon": {
control = new qx.ui.basic.Image().set({
source: "@FontAwesome5Solid/folder/26"
});
const iconContainer = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
case "icon-container":
control = new qx.ui.container.Composite(new qx.ui.layout.HBox().set({
alignY: "middle"
}));
iconContainer.add(control);
this._add(iconContainer, {
this._add(control, {
height: "100%"
});
break;
}
case "folder-icon":
control = new qx.ui.basic.Image().set({
source: "@FontAwesome5Solid/folder/26"
});
this.getChildControl("icon-container").add(control);
break;
case "shared-icon":
control = new qx.ui.basic.Image().set({
textColor: "strong-main",
Expand Down
86 changes: 79 additions & 7 deletions services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,14 +68,14 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
ITEM_WIDTH: 190,
ITEM_HEIGHT: 190,
PADDING: 10,
SPACING_IN: 5,
SPACING: 15,
HEADER_MAX_HEIGHT: 40, // two lines in Manrope
ICON_SIZE: 60,
POS: {
HEADER: 0,
BODY: 1,
FOOTER: 2
FOLDER_LOOK: 0,
HEADER: 1,
BODY: 2,
FOOTER: 3
},
HPOS: {
SHARED: 0,
Expand Down Expand Up @@ -107,10 +107,12 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
let control;
switch (id) {
case "main-layout": {
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(this.self().SPACING_IN));
control = new qx.ui.container.Composite(new qx.ui.layout.VBox());
const folderLook = this.getChildControl("folder-look");
const header = this.getChildControl("header");
const body = this.getChildControl("body");
const footer = this.getChildControl("footer");
control.addAt(folderLook, this.self().POS.FOLDER_LOOK);
control.addAt(header, this.self().POS.HEADER);
control.addAt(body, this.self().POS.BODY, {
flex: 1
Expand All @@ -124,9 +126,14 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
});
break;
}
case "folder-look": {
control = this.__createFolderLookHeader();
break;
}
case "header":
control = new qx.ui.container.Composite(new qx.ui.layout.HBox(5)).set({
backgroundColor: "background-card-overlay",
backgroundColor: "background-workspace-card-overlay",
opacity: 0.8,
anonymous: true,
maxWidth: this.self().ITEM_WIDTH,
maxHeight: this.self().HEADER_MAX_HEIGHT,
Expand All @@ -135,7 +142,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
});
break;
case "body":
control = new qx.ui.container.Composite(new qx.ui.layout.VBox(5)).set({
control = new qx.ui.container.Composite(new qx.ui.layout.VBox()).set({
decorator: "main",
allowGrowY: true,
allowGrowX: true,
Expand All @@ -162,6 +169,7 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
textColor: "contrasted-text-light",
font: "text-14",
allowGrowX: true,
alignY: "middle",
maxHeight: this.self().HEADER_MAX_HEIGHT
});
layout = this.getChildControl("header");
Expand Down Expand Up @@ -190,6 +198,70 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonBase", {
return control || this.base(arguments, id);
},

__createFolderLookHeader: function() {
const topHeight = 8;
const grid = new qx.ui.layout.Grid(0, 0);
grid.setColumnFlex(0, 1);
grid.setColumnFlex(2, 1);
grid.setRowHeight(0, topHeight);
grid.setRowHeight(1, 4);
const layout = new qx.ui.container.Composite(grid).set({
backgroundColor: "background-main",
});
const spacer00 = new qx.ui.core.Widget().set({
backgroundColor: "background-workspace-card-overlay"
});
const triangle = new qx.ui.core.Widget().set({
width: topHeight,
height: topHeight,
});
triangle.getContentElement().setStyles({
"width": "0",
"height": "0",
"border-right": topHeight + "px solid transparent",
});
const colorTriangle = () => {
const color = qx.theme.manager.Color.getInstance().resolve("background-workspace-card-overlay");
triangle.getContentElement().setStyles({
"border-bottom": topHeight + "px solid " + color,
});
};
colorTriangle();
qx.theme.manager.Color.getInstance().addListener("changeTheme", colorTriangle);
const spacer01 = new qx.ui.core.Widget();
const spacer10 = new qx.ui.core.Widget().set({
backgroundColor: "background-workspace-card-overlay"
});
const spacer11 = new qx.ui.core.Widget().set({
backgroundColor: "background-workspace-card-overlay"
});
spacer11.getContentElement().setStyles({
"border-top-right-radius": "4px",
});
layout.add(spacer00, {
row: 0,
column: 0,
});
layout.add(triangle, {
row: 0,
column: 1,
});
layout.add(spacer01, {
row: 0,
column: 2,
});
layout.add(spacer10, {
row: 1,
column: 0,
colSpan: 2,
});
layout.add(spacer11, {
row: 1,
column: 2,
});
return layout;
},

// overridden
_applyIcon: function(value) {
const image = this.getChildControl("icon").getChildControl("image");
Expand Down
3 changes: 3 additions & 0 deletions services/static-webserver/client/source/class/osparc/dashboard/WorkspaceButtonNew.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,6 +39,9 @@ qx.Class.define("osparc.dashboard.WorkspaceButtonNew", {

this.setIcon(osparc.dashboard.CardBase.NEW_ICON);

this.getChildControl("header").set({
opacity: 1
});
this.getChildControl("footer").exclude();
},

Expand Down
1 change: 1 addition & 0 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 @@ -32,6 +32,7 @@ qx.Theme.define("osparc.theme.ColorDark", {
"background-main-5": "c06",

"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)",
Expand Down
1 change: 1 addition & 0 deletions services/static-webserver/client/source/class/osparc/theme/ColorLight.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,6 +32,7 @@ qx.Theme.define("osparc.theme.ColorLight", {
"background-main-5": "c06",

"background-card-overlay": "rgba(229, 229, 229, 0.8)",
"background-workspace-card-overlay": "rgb(165, 223, 252)",

"primary-background-color": "rgba(255, 255, 255, 1)",
"navigation_bar_background_color": "rgba(229, 229, 229, 0.8)",
Expand Down

0 comments on commit 64422d0

Please sign in to comment.