Skip to content

Commit

Permalink
🎨 [Frontend] Improve blocked card's UX (#6207)
Browse files Browse the repository at this point in the history
  • Loading branch information
@odeimaiz
odeimaiz authored Aug 21, 2024
1 parent 8c6b2c8 commit bc9b58e
Show file tree
Hide file tree
Showing 15 changed files with 209 additions and 79 deletions.
4 changes: 2 additions & 2 deletions services/static-webserver/client/source/class/osparc/MaintenanceTracker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,8 +41,8 @@ qx.Class.define("osparc.MaintenanceTracker", {

statics: {
CHECK_INTERVAL: 15*60*1000, // Check every 15'
CLOSABLE_WARN_IN_ADVANCE: 24*60*60*1000, // Show Ribbon Closable Message 24h in advance
PERMANENT_WARN_IN_ADVANCE: 30*60*1000 // Show Ribbon Permanent Message 30' in advance
CLOSABLE_WARN_IN_ADVANCE: 48*60*60*1000, // Show Closable Ribbon Message 48h in advance
PERMANENT_WARN_IN_ADVANCE: 60*60*1000 // Show Permanent Ribbon Message 60' in advance
},

members: {
Expand Down
84 changes: 54 additions & 30 deletions services/static-webserver/client/source/class/osparc/dashboard/CardBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -349,7 +349,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
state: {
check: "Object",
nullable: false,
apply: "_applyState"
apply: "__applyState"
},

projectState: {
Expand All @@ -359,11 +359,11 @@ qx.Class.define("osparc.dashboard.CardBase", {
apply: "_applyProjectState"
},

locked: {
check: "Boolean",
blocked: {
check: [true, "UNKNOWN_SERVICES", "IN_USE", false],
init: false,
nullable: false,
apply: "_applyLocked"
apply: "__applyBlocked"
},

menu: {
Expand Down Expand Up @@ -515,7 +515,6 @@ qx.Class.define("osparc.dashboard.CardBase", {
uiModeIcon.set({
source,
toolTipText,
alignY: "bottom"
});
}
},
Expand Down Expand Up @@ -552,7 +551,7 @@ qx.Class.define("osparc.dashboard.CardBase", {
// Block card
const unaccessibleServices = osparc.study.Utils.getInaccessibleServices(workbench)
if (unaccessibleServices.length) {
this.__enableCard(false);
this.setBlocked("UNKNOWN_SERVICES");
const image = "@FontAwesome5Solid/ban/";
let toolTipText = this.tr("Service info missing");
unaccessibleServices.forEach(unSrv => {
Expand Down Expand Up @@ -600,16 +599,17 @@ qx.Class.define("osparc.dashboard.CardBase", {
}
},

_applyState: function(state) {
__applyState: function(state) {
const locked = ("locked" in state) ? state["locked"]["value"] : false;
const projectState = ("state" in state) ? state["state"]["value"] : undefined;
this.setBlocked(locked ? "IN_USE" : false);
if (locked) {
this.__showBlockedCardFromStatus(state["locked"]);
}

const projectState = ("state" in state) ? state["state"]["value"] : undefined;
if (projectState) {
this._applyProjectState(state["state"]);
}
this.setLocked(locked);
},

_applyProjectState: function(projectStatus) {
Expand Down Expand Up @@ -722,46 +722,70 @@ qx.Class.define("osparc.dashboard.CardBase", {
}
},

_applyLocked: function(locked) {
this.__enableCard(!locked);
__applyBlocked: function(blocked) {
const enabled = !blocked;
if (enabled) {
this.resetToolTipText();
}

this._getChildren().forEach(item => {
if (item) {
item.setOpacity(enabled ? 1.0 : 0.7);
}
});

this.getChildControl("lock-status").set({
appearance: "form-button-outlined/disabled",
textColor: "text-disabled",
opacity: 1.0,
visibility: locked ? "visible" : "excluded"
visibility: enabled ? "excluded" : "visible"
});

// let the "pointer" cursor for IN_USE or UNKNOWN_SERVICE
this.set({
cursor: locked ? "not-allowed" : "pointer"
cursor: blocked === true ? "not-allowed" : "pointer"
});

[
"tick-selected",
"tick-unselected",
"menu-button"
// "menu-button"
].forEach(childName => {
const child = this.getChildControl(childName);
child.set({
enabled: !locked
});
child.setEnabled(enabled);
});

this.evaluateMenuButtons();
},

__enableCard: function(enabled) {
if (enabled) {
this.resetToolTipText();
}
evaluateMenuButtons: function() {
if (this.getMenu()) {
const menuButtons = this.getMenu().getChildren();
const resourceData = this.getResourceData();

this._getChildren().forEach(item => {
if (item) {
item.setOpacity(enabled ? 1.0 : 0.7);
}
});

if (this.getMenu() && this.getMenu().getChildren()) {
const openButton = this.getMenu().getChildren().find(menuBtn => "openResource" in menuBtn);
const openButton = menuButtons.find(menuBtn => "openResourceButton" in menuBtn);
if (openButton) {
openButton.setEnabled(enabled);
openButton.setEnabled(osparc.study.Utils.canBeOpened(resourceData));
}
const duplicateButton = menuButtons.find(menuBtn => "duplicateButton" in menuBtn);
if (duplicateButton) {
duplicateButton.setEnabled(osparc.study.Utils.canBeDuplicated(resourceData));
}
const exportCMISButton = menuButtons.find(menuBtn => "exportCMISButton" in menuBtn);
if (exportCMISButton) {
exportCMISButton.setEnabled(osparc.study.Utils.canBeExported(resourceData));
}
const studyDataButton = menuButtons.find(menuBtn => "studyDataButton" in menuBtn);
if (studyDataButton) {
studyDataButton.setEnabled(osparc.study.Utils.canShowStudyData(resourceData));
}
const moveToFolderButton = menuButtons.find(menuBtn => "moveToFolderButton" in menuBtn);
if (moveToFolderButton) {
moveToFolderButton.setEnabled(osparc.study.Utils.canMoveToFolder(resourceData));
}
const deleteButton = menuButtons.find(menuBtn => "deleteButton" in menuBtn);
if (deleteButton) {
deleteButton.setEnabled(osparc.study.Utils.canBeDeleted(resourceData));
}
}
},
Expand Down
4 changes: 3 additions & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/GridButtonItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,7 +187,8 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
},

__itemSelected: function() {
if (this.isLocked()) {
// It could be blocked by IN_USE or UNKNOWN_SERVICE
if (this.getBlocked() === true) {
this.setValue(false);
return;
}
Expand Down Expand Up @@ -279,6 +280,7 @@ qx.Class.define("osparc.dashboard.GridButtonItem", {
menu.setPosition("top-left");
osparc.utils.Utils.prettifyMenu(menu);
osparc.utils.Utils.setIdToWidget(menu, "studyItemMenuMenu");
this.evaluateMenuButtons();
}
menuButton.setVisibility(menu ? "visible" : "excluded");
}
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/GridButtonPlaceholder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,7 +118,7 @@ qx.Class.define("osparc.dashboard.GridButtonPlaceholder", {
});
},

isLocked: function() {
getBlocked: function() {
return true;
},

Expand Down
6 changes: 3 additions & 3 deletions services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,9 +49,9 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
TITLE: 2,
PROGRESS: 3,
DESCRIPTION: 4,
UPDATES: 5,
UI_MODE: 6,
TAGS: 7,
TAGS: 5,
UPDATES: 6,
UI_MODE: 7,
STATUS: 8,
PERMISSION: 9,
TSR: 10,
Expand Down
14 changes: 9 additions & 5 deletions services/static-webserver/client/source/class/osparc/dashboard/ListButtonItem.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -273,16 +273,20 @@ qx.Class.define("osparc.dashboard.ListButtonItem", {
},

__itemSelected: function() {
// It could be blocked by IN_USE or UNKNOWN_SERVICE
if (this.getBlocked() === true) {
this.setValue(false);
return;
}

if (this.isResourceType("study") && this.isMultiSelectionMode()) {
const selected = this.getValue();

if (this.isLocked() && selected) {
this.setValue(false);
}

const tick = this.getChildControl("tick-selected");
tick.setVisibility(selected ? "visible" : "excluded");

const untick = this.getChildControl("tick-unselected");
this.getChildControl("menu-selection-stack").setSelection([selected ? tick : untick]);
untick.setVisibility(selected ? "excluded" : "visible");
} else {
this.__showMenuOnly();
}
Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/ListButtonPlaceholder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,7 +104,7 @@ qx.Class.define("osparc.dashboard.ListButtonPlaceholder", {
});
},

isLocked: function() {
getBlocked: function() {
return true;
},

Expand Down
2 changes: 1 addition & 1 deletion services/static-webserver/client/source/class/osparc/dashboard/ResourceBrowserBase.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -462,7 +462,7 @@ qx.Class.define("osparc.dashboard.ResourceBrowserBase", {

_getOpenMenuButton: function(resourceData) {
const openButton = new qx.ui.menu.Button(this.tr("Open"));
openButton.openResource = true;
openButton["openResourceButton"] = true;
openButton.addListener("execute", () => {
switch (resourceData["resourceType"]) {
case "study": {
Expand Down
Loading

0 comments on commit bc9b58e

Please sign in to comment.