Merge pull request #4 from valadas/pb-ui-vars

Allows customizing the PersonaBar menu styles
dnnsoftware · May 30, 2021 · dabde3d · dabde3d
2 parents 96186a5 + 8ff1348
commit dabde3d
Show file tree

Hide file tree

Showing 6 changed files with 30 additions and 23 deletions.
diff --git a/Dnn.AdminExperience/EditBar/Dnn.EditBar.UI/editBar/css/main.css b/Dnn.AdminExperience/EditBar/Dnn.EditBar.UI/editBar/css/main.css
@@ -27,7 +27,7 @@ body {
     visibility: visible;
     height: 80px;
     display: block;
-    background-color: #0B1C24;
+    background-color: var(--dnn-color-editbar-background);
     color: white;
     min-height: 20px;
     padding: 26px 26px 0;
@@ -99,9 +99,7 @@ body {
 .editbar .left-section {
     margin-left: 20px;
 }
-.editbar .left-section ul {
-
-}
+
 .editbar .left-section ul li {
         margin-left: 7px;
 }

diff --git a/Dnn.AdminExperience/EditBar/Dnn.EditBar.UI/editBar/css/theme.css b/Dnn.AdminExperience/EditBar/Dnn.EditBar.UI/editBar/css/theme.css
@@ -0,0 +1,3 @@
+:root{
+    --dnn-color-editbar-background: #0b1c24;
+}
diff --git a/Dnn.AdminExperience/EditBar/Dnn.EditBar.UI/editBar/scripts/bootstrap.js b/Dnn.AdminExperience/EditBar/Dnn.EditBar.UI/editBar/scripts/bootstrap.js
@@ -26,8 +26,10 @@
     var version = (cdv ? '?cdv=' + cdv : '') + (debugMode ? '&t=' + Math.random(): '');
     var styles = [];
     var mainJs = mobi ? 'scripts/main.mobi.js' : 'scripts/main.js';
+    var themeCss = 'css/theme.css';
     var mainCss = mobi ? 'css/main.mobi.css' : 'css/main.css';
 
+    styles.push(themeCss);
     styles.push(mainCss);
 
     addCssToHead(styles, version);

diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/main.css
@@ -716,7 +716,7 @@ transform: rotate(180deg);
 /* persona bar Menu*/
 .personabar {
     width: 80px;
-    background-color: #0e2936;
+    background-color: var(--dnn-color-pb-menu-background);
     height: 100%;
     position: fixed;
     top: 0;
@@ -727,14 +727,14 @@ transform: rotate(180deg);
 .personabar .personabarLogo {
     width: 80px;
     height: 103px;
-    background: url('../images/Logo.svg') no-repeat center center;
+    background: var(--dnn-pb-menu-brand-background);
     -ms-background-size: 32px auto;
     background-size: 32px auto;
     position: relative;
-    border-bottom: 1px solid #1e485e;
+    border-bottom: 1px solid var(--dnn-color-pb-menu-divider);
 }
 .personabar .personabarLogo:hover {
-    background-color: #0b1c24;
+    background-color: var(--dnn-color-pb-menu-background-hover);
 }
 .personabar .personabarLogo a.update {
     text-decoration: none;
@@ -799,10 +799,10 @@ transform: rotate(180deg);
     fill: #868484;
 }
 .personabarnav > li > span.icon-loader svg .back {
-    fill: #0b1c24;
+    fill: var(--dnn-color-pb-menu-icon-background);
 }
 .personabarnav>li>span.icon-loader svg .main {
-    fill: #3c7a9a;
+    fill: var(--dnn-color-pb-menu-icon);
 }
 .personabarnav > li:hover > span.icon-loader svg,
 .personabarnav > li.active > span.icon-loader svg,
@@ -822,15 +822,15 @@ transform: rotate(180deg);
 }
 .personabarnav > li:hover,.personabarnav > li.active {
     color: #fff;
-    background-color: #0b1c24;
+    background-color: var(--dnn-color-pb-menu-background-hover);
     border-right: none !important;
 }
 .personabarnav > li.pending {
     border-right: 3px solid #9FDBF0;
 }
 
 .personabarnav > li#Edit {
-    border-top: 1px solid #1e485e;
+    border-top: 1px solid var(--dnn-color-pb-menu-divider);
 }
 
 .personabarnav > li#Edit.selected {
@@ -1251,10 +1251,6 @@ only screen and (min-width: 768px) and (max-width: 1024px)   {
     margin-top: 103px;
 }
 
-.ie .socialpanelbody {
-    /*margin-top: 0;*/
-}
-
 .socialpanelbody > div {
     padding: 20px 30px 30px 30px;
 }
@@ -1912,7 +1908,7 @@ div.ui-dialog-titlebar > .ui-dialog-titlebar-close:hover {
 .hoverSummaryMenu {
     position: absolute;
     width: 200px;
-    background-color: #0b1c24;
+    background-color: var(--dnn-color-pb-menu-background-hover);
     padding: 27px 37px 42px 37px;
     left: 80px;
     top: 0;
@@ -1959,9 +1955,9 @@ div.ui-dialog-titlebar > .ui-dialog-titlebar-close:hover {
 }
 .hoverSummaryMenu ul li label {
     font-size: 12px;
-    color: #3c7a9a;
+    color: var(--dnn-color-pb-menu-text-highlight);
     padding: 11px 0 18px 0;
-    border-bottom: 1px solid #1e485e;
+    border-bottom: 1px solid var(--dnn-color-pb-menu-divider);
     text-transform: uppercase;
     -moz-word-break: break-all;
     -o-word-break: break-all;

diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/theme.css b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/css/theme.css
@@ -0,0 +1,10 @@
+:root{
+    --dnn-color-pb-menu-background: #0e2936;
+    --dnn-color-pb-menu-background-hover: #0b1c24;
+    --dnn-color-pb-menu-icon: #3c7a9a;
+    --dnn-color-pb-menu-icon-background: #0b1c24;
+    --dnn-color-pb-menu-divider: #1e485e;
+    --dnn-color-pb-menu-text-highlight: #3c7a9a;
+
+    --dnn-pb-menu-brand-background: url('../images/Logo.svg') no-repeat center center;
+}
diff --git a/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/bootstrap.js b/Dnn.AdminExperience/Library/Dnn.PersonaBar.UI/admin/personaBar/scripts/bootstrap.js
@@ -21,15 +21,13 @@
     var personaBarSettings = window.parent['personaBarSettings'];
     var debugMode = personaBarSettings['debugMode'] === true;
     var cdv = personaBarSettings['buildNumber'];
-    var skin = personaBarSettings['skin'];
     var version = (cdv ? '?cdv=' + cdv : '') + (debugMode ? '&t=' + Math.random(): '');
     var styles = [];
     var mainJs = 'scripts/main.js';
+    var themeCss = 'css/theme.css';
     var mainCss = 'css/main.css';
-    if (skin) {
-        mainCss = 'css/' + skin + '.css';
-    }
 
+    styles.push(themeCss);
     styles.push(mainCss);
     styles.push('css/graph.css');