🎨 [Frontend] Unify border-radius (#6451)

ITISFoundation · Sep 26, 2024 · 9204845 · 9204845
1 parent d5b30c4
commit 9204845
Show file tree

Hide file tree

Showing 15 changed files with 62 additions and 224 deletions.
diff --git a/services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js b/services/static-webserver/client/source/class/osparc/announcement/AnnouncementUIFactory.js
@@ -36,10 +36,8 @@ qx.Class.define("osparc.announcement.AnnouncementUIFactory", {
         alignX: "center",
         padding: 12,
         allowGrowX: true,
-        maxWidth: 300
-      });
-      loginAnnouncement.getContentElement().setStyles({
-        "border-radius": "8px"
+        maxWidth: osparc.auth.core.BaseAuthPage.FORM_WIDTH,
+        decorator: "rounded",
       });
 
       if (title) {

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js b/services/static-webserver/client/source/class/osparc/dashboard/ListButtonBase.js
@@ -75,7 +75,7 @@ qx.Class.define("osparc.dashboard.ListButtonBase", {
           });
           control.getChildControl("image").set({
             anonymous: true,
-            decorator: "rounded"
+            decorator: "rounded",
           });
           this._add(control, {
             row: 0,

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js b/services/static-webserver/client/source/class/osparc/dashboard/SearchBarFilter.js
@@ -28,10 +28,8 @@ qx.Class.define("osparc.dashboard.SearchBarFilter", {
     this.set({
       backgroundColor: "input_background",
       paddingLeft: 6,
-      height: this.self().HEIGHT
-    });
-    this.getContentElement().setStyles({
-      "border-radius": "5px"
+      height: this.self().HEIGHT,
+      decorator: "rounded",
     });
 
     this.__buildLayout();

diff --git a/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js b/services/static-webserver/client/source/class/osparc/dashboard/WorkspaceHeader.js
@@ -91,10 +91,8 @@ qx.Class.define("osparc.dashboard.WorkspaceHeader", {
             alignY: "middle",
             alignX: "center",
             allowGrowX: true,
-            allowGrowY: true
-          });
-          control.getContentElement().setStyles({
-            "border-radius": "4px"
+            allowGrowY: true,
+            decorator: "rounded",
           });
           this._add(control);
           break;

diff --git a/...ces/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js b/...ces/static-webserver/client/source/class/osparc/dashboard/WorkspacesAndFoldersTreeItem.js
@@ -23,10 +23,7 @@ qx.Class.define("osparc.dashboard.WorkspacesAndFoldersTreeItem", {
 
     this.set({
       indent: 12, // defaults to 19,
-    });
-
-    this.getContentElement().setStyles({
-      "border-radius": "8px"
+      decorator: "rounded",
     });
 
     this.set({

diff --git a/...ces/static-webserver/client/source/class/osparc/desktop/credits/CreditsServiceListItem.js b/...ces/static-webserver/client/source/class/osparc/desktop/credits/CreditsServiceListItem.js
@@ -85,8 +85,8 @@ qx.Class.define("osparc.desktop.credits.CreditsServiceListItem", {
             minHeight: 32,
             minWidth: 32
           });
-          control.getChildControl("image").getContentElement().setStyles({
-            "border-radius": "4px"
+          control.getChildControl("image").set({
+            decorator: "rounded",
           });
           this._add(control, this.self().GRID.ICON);
           break;

diff --git a/services/static-webserver/client/source/class/osparc/info/CommentAdd.js b/services/static-webserver/client/source/class/osparc/info/CommentAdd.js
@@ -65,15 +65,13 @@ qx.Class.define("osparc.info.CommentAdd", {
             allowShrinkX: true,
             allowShrinkY: true,
             maxWidth: 32,
-            maxHeight: 32
+            maxHeight: 32,
+            decorator: "rounded",
           });
           const userEmail = osparc.auth.Data.getInstance().getEmail();
           control.set({
             source: osparc.utils.Avatar.getUrl(userEmail, 32)
           });
-          control.getContentElement().setStyles({
-            "border-radius": "8px"
-          });
           const layout = this.getChildControl("add-comment-layout");
           layout.add(control, {
             row: 0,

diff --git a/services/static-webserver/client/source/class/osparc/info/CommentUI.js b/services/static-webserver/client/source/class/osparc/info/CommentUI.js
@@ -60,10 +60,8 @@ qx.Class.define("osparc.info.CommentUI", {
           control = new qx.ui.basic.Image().set({
             scale: true,
             maxWidth: 32,
-            maxHeight: 32
-          });
-          control.getContentElement().setStyles({
-            "border-radius": "8px"
+            maxHeight: 32,
+            decorator: "rounded",
           });
           this.getChildControl("meta-data-grid").add(control, {
             row: 0,

diff --git a/services/static-webserver/client/source/class/osparc/notification/NotificationsContainer.js b/services/static-webserver/client/source/class/osparc/notification/NotificationsContainer.js
@@ -27,7 +27,8 @@ qx.Class.define("osparc.notification.NotificationsContainer", {
       zIndex: osparc.utils.Utils.FLOATING_Z_INDEX,
       maxWidth: osparc.notification.NotificationUI.MAX_WIDTH,
       maxHeight: 250,
-      backgroundColor: "background-main-3"
+      backgroundColor: "background-main-3",
+      decorator: "rounded",
     });
     osparc.utils.Utils.setIdToWidget(this, "notificationsContainer");
 

diff --git a/services/static-webserver/client/source/class/osparc/study/PricingUnit.js b/services/static-webserver/client/source/class/osparc/study/PricingUnit.js
@@ -23,10 +23,8 @@ qx.Class.define("osparc.study.PricingUnit", {
 
     this.set({
       padding: 10,
-      center: true
-    });
-    this.getContentElement().setStyles({
-      "border-radius": "4px"
+      center: true,
+      decorator: "rounded",
     });
 
     this.setUnitData(new osparc.pricing.UnitData(pricingUnit));

diff --git a/services/static-webserver/client/source/class/osparc/theme/Decoration.js b/services/static-webserver/client/source/class/osparc/theme/Decoration.js
@@ -20,6 +20,27 @@ qx.Theme.define("osparc.theme.Decoration", {
   extend: osparc.theme.common.Decoration,
 
   decorations: {
+    "rounded": {
+      style: {
+        radius: 4
+      }
+    },
+
+    "border-simple": {
+      include: "border",
+      style: {
+        radius: 4
+      }
+    },
+
+    "no-border": {
+      style: {
+        radius: 4,
+        width: 1,
+        color: "transparent"
+      }
+    },
+
     "material-button-invalid": {},
     "material-button": {
       style: {
@@ -35,18 +56,12 @@ qx.Theme.define("osparc.theme.Decoration", {
     "indicator-border": {
       include: "material-button",
       style: {
-        radius: 2,
+        radius: 4,
         width: 1,
         color: "text"
       }
     },
 
-    "rounded": {
-      style: {
-        radius: 4
-      }
-    },
-
     "form-input": {
       style: {
         radius: [4, 4, 0, 0],
@@ -128,7 +143,7 @@ qx.Theme.define("osparc.theme.Decoration", {
         shadowBlurRadius: 0,
         shadowLength: 0,
         width: 0,
-        radius: 3,
+        radius: 4,
         transitionProperty: "opacity",
         transitionDuration: "0.05s",
         transitionTimingFunction: "ease-in"
@@ -154,7 +169,7 @@ qx.Theme.define("osparc.theme.Decoration", {
     "service-window": {
       include: "window",
       style: {
-        radius: 3,
+        radius: 4,
         width: 1
       }
     },
@@ -182,7 +197,7 @@ qx.Theme.define("osparc.theme.Decoration", {
 
     "flash": {
       style: {
-        radius: 3,
+        radius: 4,
         transitionProperty: "top",
         transitionDuration: "0.2s",
         transitionTimingFunction: "ease-in"
@@ -191,6 +206,7 @@ qx.Theme.define("osparc.theme.Decoration", {
 
     "flash-message": {
       style: {
+        radius: 4,
         width: 1,
         style: "solid"
       }
@@ -226,7 +242,7 @@ qx.Theme.define("osparc.theme.Decoration", {
 
     "flash-badge": {
       style: {
-        radius: 5
+        radius: 4
       }
     },
 
@@ -238,21 +254,6 @@ qx.Theme.define("osparc.theme.Decoration", {
       }
     },
 
-    "border-simple": {
-      include: "border",
-      style: {
-        radius: 4
-      }
-    },
-
-    "no-border": {
-      style: {
-        radius: 4,
-        width: 1,
-        color: "transparent"
-      }
-    },
-
     "no-border-2": {
       style: {
         width: 0
@@ -297,27 +298,27 @@ qx.Theme.define("osparc.theme.Decoration", {
     "border-editable": {
       style: {
         width: 1,
-        radius: 3,
+        radius: 4,
         color: "text-disabled"
       }
     },
 
     "hint": {
       style: {
-        radius: 3
+        radius: 4
       }
     },
 
     "chip": {
       style: {
-        radius: 9
+        radius: 4
       }
     },
 
     "chip-button": {
       style: {
         width: 1,
-        radius: 6,
+        radius: 4,
         color: "text",
         backgroundColor: "transparent"
       }
@@ -326,7 +327,7 @@ qx.Theme.define("osparc.theme.Decoration", {
     "filter-toggle-button": {
       style: {
         width: 1,
-        radius: 8,
+        radius: 4,
         color: "transparent"
       }
     },
@@ -340,7 +341,7 @@ qx.Theme.define("osparc.theme.Decoration", {
 
     "pb-listitem": {
       style: {
-        radius: 5
+        radius: 4
       }
     },
 
@@ -358,12 +359,12 @@ qx.Theme.define("osparc.theme.Decoration", {
 
     "tag": {
       style: {
-        radius: 2
+        radius: 4
       }
     },
     "tagitem": {
       style: {
-        radius: 2
+        radius: 4
       }
     },
     "tagitem-colorbutton": {
@@ -400,15 +401,15 @@ qx.Theme.define("osparc.theme.Decoration", {
         style: "solid",
         width: [0, 0, 2, 0],
         color: "transparent",
-        radius: [3, 3, 0, 0]
+        radius: [4, 4, 0, 0]
       }
     },
     "tab-button-selected": {
       style: {
         style: "solid",
         width: [0, 0, 2, 0],
         color: "default-button-focus",
-        radius: [3, 3, 0, 0]
+        radius: [4, 4, 0, 0]
       }
     },
 
@@ -419,7 +420,7 @@ qx.Theme.define("osparc.theme.Decoration", {
         style: "solid",
         width: 1,
         color: "default-button",
-        radius: 5,
+        radius: 4,
         backgroundColor: "default-button"
       }
     },
@@ -428,7 +429,7 @@ qx.Theme.define("osparc.theme.Decoration", {
       style: {
         style: "solid",
         width: 1,
-        radius: 5,
+        radius: 4,
         color: "fab-background",
         backgroundColor: "fab-background",
         shadowSpreadRadius: 0,
@@ -512,7 +513,7 @@ qx.Theme.define("osparc.theme.Decoration", {
       include: "form-button-outlined",
       style: {
         width: [1, 1, 1, 1],
-        radius: [0, 5, 5, 0]
+        radius: [0, 4, 4, 0]
       }
     },
     "form-button-outlined-hovered-right": {
@@ -535,7 +536,7 @@ qx.Theme.define("osparc.theme.Decoration", {
       include: "form-button-outlined",
       style: {
         width: [1, 0, 1, 1],
-        radius: [5, 0, 0, 5]
+        radius: [4, 0, 0, 4]
       }
     },
     "form-button-outlined-hovered-left": {
@@ -652,7 +653,7 @@ qx.Theme.define("osparc.theme.Decoration", {
     */
     "appmotion-buy-credits-input": {
       style: {
-        radius: 8
+        radius: 4
       }
     }
   }

diff --git a/services/static-webserver/client/source/class/osparc/tours/Step.js b/services/static-webserver/client/source/class/osparc/tours/Step.js
@@ -25,9 +25,6 @@ qx.Class.define("osparc.tours.Step", {
 
     const hintContainer = this.getChildControl("hint-container");
     hintContainer.setPadding(15);
-    hintContainer.getContentElement().setStyles({
-      "border-radius": "8px"
-    });
 
     this.getChildControl("title");
     this.getChildControl("message");