Backend theme for social registry.

g2p_theme_backend/__manifest__.py

@@ -0,0 +1,22 @@
+# Part of OpenG2P. See LICENSE file for full copyright and licensing details.
+{
+    "name": "OpenG2P Backend Theme",
+    "category": "G2P",
+    "version": "17.0.1.2.0",
+    "author": "OpenG2P",
+    "website": "https://openg2p.org",
+    "license": "Other OSI approved licence",
+    "development_status": "Alpha",
+    "depends": ["muk_web_appsbar", "muk_web_colors", "muk_web_chatter", "muk_web_dialog", "muk_web_theme",],
+    "assets": {
+        "web.assets_backend": [
+            "g2p_theme_backend/static/src/css/mixins.scss",
+            "g2p_theme_backend/static/src/css/appsbar.scss",
+        ],
+    },
+    "demo": [],
+    "images": [],
+    "application": True,
+    "installable": True,
+    "auto_install": False,
+}

g2p_theme_backend/static/src/css/appsbar.scss

@@ -0,0 +1,38 @@
+
+.mk_apps_sidebar_panel {
+    @include mk-disable-scrollbar();
+    background-color: $mk-appbar-background;
+    width: var(--mk-sidebar-width, 0);
+    overflow-y: auto;
+    .mk_apps_sidebar {
+        height: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+	    white-space: nowrap;
+	    .mk_apps_sidebar_menu {
+	    	padding: 0;
+		    > li > a {
+		        cursor: pointer;
+	            font-size: 14px;
+	            font-weight: bold;
+	            overflow: hidden;
+	            padding: 8px 11px;
+	            text-decoration: none;
+	            color: $mk-appbar-color;
+	            text-overflow: ellipsis;
+	            .mk_apps_sidebar_icon {
+				    width: 22px;
+				    height: 22px;
+	    			margin-right: 5px;
+				}
+		    }
+	        > li.active > a {
+			    background: $mk-appbar-active;
+	        }
+	        > li:hover > a {
+			    background: $mk-appbar-active;
+	        }
+	    }
+	}
+}

g2p_theme_backend/static/src/css/mixins.scss

@@ -0,0 +1,73 @@
+.o_navbar_apps_menu .dropdown-toggle {
+    padding: 0px 14px !important;
+}
+
+.o_navbar_apps_menu.show .dropdown-menu {
+    display: flex !important;
+    flex-direction: row !important;
+    flex-wrap: wrap !important;
+    align-content: flex-start;
+    right: 0 !important;
+    left: 0 !important;
+    bottom: 0 !important;
+    max-height: 100vh;
+    overflow-x: hidden;
+    overflow-y: auto;
+    border: none;
+    border-radius: 0;
+    user-select: none;
+    background: {
+        size: cover;
+        repeat: no-repeat;
+        position: center;
+    }
+    @include media-breakpoint-up(lg) {
+        padding: {
+            left: 20vw;
+            right: 20vw;
+        }
+    }
+    .o_app {
+        margin-top: 20px;
+        flex: 1 1 calc(100% / 2); // Default to two icons per row
+        max-width: calc(100% / 2); // Adjust the max-width to ensure correct wrapping
+        text-align: center; 
+        padding: 1rem;
+        background: none !important;
+
+        @include media-breakpoint-up(sm) {
+            flex-basis: calc(100% / 2);
+            max-width: calc(100% / 2);
+        }
+        @include media-breakpoint-up(md) {
+            flex-basis: calc(100% / 4);
+            max-width: calc(100% / 4);
+        }
+        > a {
+            display: flex;
+            align-items: center;
+            flex-direction: column;
+            .mk_app_icon {
+                width: 100%;
+                padding: 10px;
+                max-width: 140px; //
+                border-radius: 0.375rem;
+                background-color: $white;
+                transform-origin: center bottom;
+                transition: box-shadow ease-in 0.1s, transform ease-in 0.1s;
+                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 4px 4px rgba(0, 0, 0, 0.02);
+            }
+            .mk_app_name {
+                color: $mk-appsmenu-color;
+                font-size: 20px; // Add this line to set the text size
+                font-weight: bold;
+            }
+        }
+        &:hover {
+            .mk_app_icon {
+                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 8px 8px rgba(0, 0, 0, 0.03);
+                transform: translateY(-2px);
+            }
+        }
+    }
+}