Skip to content

Commit

Permalink
Merge pull request #4691 from david-poindexter/pb-ui
Browse files Browse the repository at this point in the history
Improve base styling of PersonaBar & EditBar and allow customization
  • Loading branch information
mitchelsellers authored May 31, 2021
2 parents b32e959 + af0d028 commit d6c7582
Show file tree
Hide file tree
Showing 16 changed files with 131 additions and 61 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/************************************************************/
/***** SqlDataProvider *****/
/***** *****/
/***** *****/
/***** Note: To manually execute this script you must *****/
/***** perform a search and replace operation *****/
/***** for {databaseOwner} and {objectQualifier} *****/
/***** *****/
/************************************************************/
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ namespace Dnn.EditBar.UI.Controllers
{
using System;
using System.Collections.Generic;
using System.Globalization;
using System.Globalization;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading;
using System.Threading.Tasks;
using System.Web;

using System.Web;
using System.Web.Hosting;
using Dnn.EditBar.Library;
using Dnn.EditBar.Library.Items;
using DotNetNuke.Application;
Expand Down Expand Up @@ -46,7 +47,11 @@ public IDictionary<string, object> GetConfigurations(int portalId)
settings.Add("portalId", portalSettings.PortalId);
settings.Add("culture", portalSettings.CultureCode);
settings.Add("loginUrl", Globals.LoginURL(HttpContext.Current?.Request.RawUrl, false));
settings.Add("items", this.GetMenuItems());
settings.Add("items", this.GetMenuItems());

var customEditBarThemePath = HostingEnvironment.MapPath("~/Portals/_default/EditBarTheme.css");
var customEditBarThemeExists = File.Exists(customEditBarThemePath);
settings.Add("editBarTheme", customEditBarThemeExists);

return settings;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,7 @@
<None Include="editBar\css\SourceCodePro-Semibold.ttf" />
<None Include="editBar\css\SourceCodePro-Semibold.ttf.woff" />
<Content Include="editBar\css\QuickAddModule.css" />
<Content Include="editBar\css\theme.css" />
<Content Include="editBar\QuickAddModule.html" />
<Content Include="editBar\scripts\QuickAddModule.js" />
<Content Include="Module.build">
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ body {
visibility: visible;
height: 80px;
display: block;
background-color: #2f2f2f;
background-color: var(--dnn-color-editbar-background);
color: white;
min-height: 20px;
padding: 26px 26px 0;
Expand Down Expand Up @@ -99,9 +99,7 @@ body {
.editbar .left-section {
margin-left: 20px;
}
.editbar .left-section ul {

}

.editbar .left-section ul li {
margin-left: 7px;
}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/*--------------------------------------------------------------------------------
These default CSS variables can be overridden and customized by creating a file,
containing a copy of the below, called "EditBarTheme.css" and placing it in the
"Portals/_default" directory. If the custom CSS file exists, it will be loaded
instead of this one.
---------------------------------------------------------------------------------*/
:root{
--dnn-color-editbar-background: #0b1c24;
}
Original file line number Diff line number Diff line change
Expand Up @@ -21,13 +21,23 @@
body.appendChild(script);
};

var debugMode = window.parent['editBarSettings']['debugMode'] === true;
var cdv = window.parent['editBarSettings']['buildNumber'];
var editBarSettings = window.parent['editBarSettings'];
var debugMode = editBarSettings['debugMode'] === true;
var cdv = editBarSettings['buildNumber'];
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';

var hasCustomEditBarTheme = editBarSettings['editBarTheme'];
if (hasCustomEditBarTheme){
styles.push('../../../../Portals/_default/EditBarTheme.css');
}
else{
styles.push(themeCss);
}

styles.push(mainCss);

addCssToHead(styles, version);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ namespace Dnn.PersonaBar.Library.Containers
{
using System.Collections.Generic;
using System.Globalization;
using System.IO;
using System.Threading;
using System.Web;
using System.Web.Hosting;
using System.Web.UI;

using Dnn.PersonaBar.Library.Common;
Expand All @@ -18,7 +20,6 @@ namespace Dnn.PersonaBar.Library.Containers
using DotNetNuke.Application;
using DotNetNuke.Entities.Host;
using DotNetNuke.Entities.Portals;
using DotNetNuke.Entities.Users;
using DotNetNuke.Services.Personalization;
using Microsoft.Extensions.DependencyInjection;
using Newtonsoft.Json.Linq;
Expand Down Expand Up @@ -120,6 +121,10 @@ private IDictionary<string, object> GetConfigration(PortalSettings portalSetting

settings.Add("disableEditBar", Host.DisableEditBar);

var customPersonaBarThemePath = HostingEnvironment.MapPath("~/Portals/_default/PersonaBarTheme.css");
var customPersonaBarThemeExists = File.Exists(customPersonaBarThemePath);
settings.Add("personaBarTheme", customPersonaBarThemeExists);

return settings;
}
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,6 +140,7 @@
<SubType>Designer</SubType>
</EmbeddedResource>
<EmbeddedResource Include="admin\personaBar\data\adminpages.resources" />
<Content Include="admin\personaBar\css\theme.css" />
<Content Include="admin\personaBar\images\arrow_forward.svg">
<SubType>Designer</SubType>
</Content>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -716,23 +716,25 @@ transform: rotate(180deg);
/* persona bar Menu*/
.personabar {
width: 80px;
background-color: #3d3c3c;
background-color: var(--dnn-color-pb-menu-background);
height: 100%;
position: fixed;
top: 0;
left: -100px;
z-index: 1000;display: none;
z-index: 1000;
display: none;
}
.personabar .personabarLogo {
width: 80px;
height: 103px;
background: #515050 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 var(--dnn-color-pb-menu-divider);
}
.personabar .personabarLogo:hover {
background-color: #2f2f2f;
background-color: var(--dnn-color-pb-menu-background-hover);
}
.personabar .personabarLogo a.update {
text-decoration: none;
Expand All @@ -757,21 +759,19 @@ transform: rotate(180deg);
.personabarnav {
margin: 0;
padding: 0;
border-bottom: 1px solid #373737;
}

.personabarnav > li {
list-style-type: none;
margin: 0;
padding: 28px;
padding: 17px 16px;
cursor: pointer;
text-align: center;
background-repeat: repeat-x;
background-position: -8px 10px;
color: #737171;
font-weight: 600;
position: relative;
border-top: 1px solid #373737;
height: 80px;
transition: background-color 200ms linear, color 200ms linear;
-webkit-box-sizing: border-box;
Expand All @@ -784,10 +784,10 @@ transform: rotate(180deg);
}
.personabarnav > li > span.icon-loader {
display: inline-block;
width: 24px;
height: 24px;
width: 38px;
height: 38px;
margin: 0;
padding: 0;
padding: 5px;
vertical-align: top;
}
.personabarnav > li > span.icon-loader img {
Expand All @@ -798,6 +798,12 @@ transform: rotate(180deg);
.personabarnav > li > span.icon-loader svg {
fill: #868484;
}
.personabarnav > li > span.icon-loader svg .back {
fill: var(--dnn-color-pb-menu-icon-background);
}
.personabarnav>li>span.icon-loader svg .main {
fill: var(--dnn-color-pb-menu-icon);
}
.personabarnav > li:hover > span.icon-loader svg,
.personabarnav > li.active > span.icon-loader svg,
.personabarnav > li.selected > span.icon-loader svg {
Expand All @@ -816,13 +822,17 @@ transform: rotate(180deg);
}
.personabarnav > li:hover,.personabarnav > li.active {
color: #fff;
background-color: #2f2f2f;
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 var(--dnn-color-pb-menu-divider);
}

.personabarnav > li#Edit.selected {
color: #737171;
background-color: transparent;
Expand Down Expand Up @@ -911,7 +921,7 @@ transform: rotate(180deg);
position: absolute;
left: 80px;
padding: 0 0px 42px 37px;
background-color: #2f2f2f;
background-color: var(--dnn-color-pb-menu-background-hover);
display: none;
/* display: none; IE not apply list-style-type: none; with this active
it will be applied in js
Expand Down Expand Up @@ -1241,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;
}
Expand Down Expand Up @@ -1902,7 +1908,7 @@ div.ui-dialog-titlebar > .ui-dialog-titlebar-close:hover {
.hoverSummaryMenu {
position: absolute;
width: 200px;
background-color: #2f2f2f;
background-color: var(--dnn-color-pb-menu-background-hover);
padding: 27px 37px 42px 37px;
left: 80px;
top: 0;
Expand Down Expand Up @@ -1949,9 +1955,9 @@ div.ui-dialog-titlebar > .ui-dialog-titlebar-close:hover {
}
.hoverSummaryMenu ul li label {
font-size: 12px;
color: #868484;
padding: 2px 0 13px 0;
border-bottom: 1px solid #868484;
color: var(--dnn-color-pb-menu-text-highlight);
padding: 11px 0 18px 0;
border-bottom: 1px solid var(--dnn-color-pb-menu-divider);
text-transform: uppercase;
-moz-word-break: break-all;
-o-word-break: break-all;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ iframe#personaBar-iframe{

.personabar-placeholder {
width: 80px;
background-color: #3d3c3c;
background-color: #0e2936;
height: 100%;
position: fixed;
top: 0;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*--------------------------------------------------------------------------------
These default CSS variables can be overridden and customized by creating a file,
containing a copy of the below, called "PersonaBarTheme.css" and placing it in
the "Portals/_default" directory. If the custom CSS file exists, it will be loaded
instead of this one.
---------------------------------------------------------------------------------*/
: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;
}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit d6c7582

Please sign in to comment.