From 96558495becd254cfc49123423b926c2bba9a86b Mon Sep 17 00:00:00 2001 From: 3Dgoo Date: Tue, 15 Dec 2020 08:40:20 +1030 Subject: [PATCH] New: Position and translucency options (#52) --- README.md | 22 +++++-- css/betternavigator.css | 20 +++++-- javascript/betternavigator.js | 19 ++++-- scss/betternavigator.scss | 61 ++++++++++++++++--- src/Extension/BetterNavigatorExtension.php | 24 ++++++++ templates/BetterNavigator/BetterNavigator.ss | 62 ++++++++++---------- 6 files changed, 154 insertions(+), 54 deletions(-) diff --git a/README.md b/README.md index 3d0b41d..5cc7a36 100644 --- a/README.md +++ b/README.md @@ -49,14 +49,28 @@ public function showBetterNavigator() You can mark certain CMS users as developers in your site's config, so they can access developer tools when logged in. Example YAML: ``` - BetterNavigator: - developers: - - 'dev@yoursite.com' - - 'otherdev@yoursite.com' +BetterNavigator: +developers: + - 'dev@yoursite.com' + - 'otherdev@yoursite.com' ``` ## Customisation +BetterNavigator can be made translucent when collapsed by adding the following config setting: + +``` +BetterNavigator: +translucent: true +``` + +BetterNavigator's default position is 'right-top', but can be changed to 'right-bottom', 'left-top' or 'left-bottom'. Example: + +``` +BetterNavigator: +position: 'right-bottom' +``` + BetterNavigator's output is controlled by templates so it can be [easily overridden](http://doc.silverstripe.org/framework/en/topics/theme-development#overriding). Some empty `<% include %>` placeholders are included to let you easily add more content (new buttons for instance). Just create any of these templates in your theme or app directory and add your content: diff --git a/css/betternavigator.css b/css/betternavigator.css index 9fdc4dc..d8b5eb5 100644 --- a/css/betternavigator.css +++ b/css/betternavigator.css @@ -24,16 +24,26 @@ span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; } -#BetterNavigator { position: fixed; top: 0; right: 0; z-index: 99999; max-height: 100%; overflow: auto; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; text-align: left; } +#BetterNavigator { position: fixed; z-index: 99999; max-height: 100%; overflow: auto; font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; text-align: left; } #BetterNavigator a { text-decoration: none; } #BetterNavigator form { display: none; } -#BetterNavigator.collapsed { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); -moz-transform-origin: right top; -ms-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; -moz-transform: rotate(90deg) translate(100%, 0); -ms-transform: rotate(90deg) translate(100%, 0); -webkit-transform: rotate(90deg) translate(100%, 0); transform: rotate(90deg) translate(100%, 0); border-width: 0 1px 1px 0; } -#BetterNavigator.collapsed #BetterNavigatorStatus { border-width: 0 1px 1px 0; } +#BetterNavigator.collapsed { box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); } +#BetterNavigator.collapsed.translucent { opacity: 0.5; transition: opacity 250ms; } +#BetterNavigator.collapsed.translucent:hover { opacity: 1; } +#BetterNavigator.collapsed #BetterNavigatorStatus { border-width: 1px; } #BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-close { display: none; } #BetterNavigator.collapsed #BetterNavigatorStatus .bn-icon-cog { display: inline-block; } #BetterNavigator.collapsed #BetterNavigatorContent { display: none; } +#BetterNavigator.right-top { right: 0; top: 0; } +#BetterNavigator.right-top.collapsed { -moz-transform-origin: right top; -ms-transform-origin: right top; -webkit-transform-origin: right top; transform-origin: right top; -moz-transform: rotate(90deg) translate(100%, 0); -ms-transform: rotate(90deg) translate(100%, 0); -webkit-transform: rotate(90deg) translate(100%, 0); transform: rotate(90deg) translate(100%, 0); } +#BetterNavigator.right-bottom { right: 0; bottom: 0; } +#BetterNavigator.right-bottom.collapsed { -moz-transform-origin: right bottom; -ms-transform-origin: right bottom; -webkit-transform-origin: right bottom; transform-origin: right bottom; -moz-transform: rotate(90deg) translate(0, 100%); -ms-transform: rotate(90deg) translate(0, 100%); -webkit-transform: rotate(90deg) translate(0, 100%); transform: rotate(90deg) translate(0, 100%); } +#BetterNavigator.left-bottom { left: 0; bottom: 0; } +#BetterNavigator.left-bottom.collapsed { -moz-transform-origin: left bottom; -ms-transform-origin: left bottom; -webkit-transform-origin: left bottom; transform-origin: left bottom; -moz-transform: rotate(90deg) translate(-100%, 0); -ms-transform: rotate(90deg) translate(-100%, 0); -webkit-transform: rotate(90deg) translate(-100%, 0); transform: rotate(90deg) translate(-100%, 0); } +#BetterNavigator.left-top { left: 0; top: 0; } +#BetterNavigator.left-top.collapsed { -moz-transform-origin: left top; -ms-transform-origin: left top; -webkit-transform-origin: left top; transform-origin: left top; -moz-transform: rotate(90deg) translate(0, -100%); -ms-transform: rotate(90deg) translate(0, -100%); -webkit-transform: rotate(90deg) translate(0, -100%); transform: rotate(90deg) translate(0, -100%); } -#BetterNavigatorStatus { color: #fff; background: #6f6f6f; border: 1px solid #646464; border-width: 0 0 0 1px; text-transform: uppercase; cursor: pointer; padding: 10px 15px 8px; font-weight: bold; } +#BetterNavigatorStatus { color: #fff; background: #6f6f6f; border: 1px solid #646464; border-width: 0; text-transform: uppercase; cursor: pointer; padding: 10px 15px 8px; font-weight: bold; } #BetterNavigatorStatus .bn-icon-cog { margin: -4px 8px -4px -4px; display: none; } #BetterNavigatorStatus .bn-icon-close { float: right; margin: 1px 0 0 0; } #BetterNavigatorStatus .bn-icon-cog, #BetterNavigatorStatus .bn-icon-close { opacity: .7; } @@ -52,4 +62,4 @@ span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; } #BetterNavigatorContent a:focus, #BetterNavigatorContent a:hover, #BetterNavigatorContent a:active { background: #fff; color: #000; } #BetterNavigatorContent span.bn-disabled { background: #afbac0; color: #51565a; cursor: default; } -body > p.message { text-align: left; background: #fff; color: #222; padding: 10px 20px; margin: 0; border-bottom: 1px solid #ccc; border-left: 5px solid #1d8aff; } \ No newline at end of file +body > p.message { text-align: left; background: #fff; color: #222; padding: 10px 20px; margin: 0; border-bottom: 1px solid #ccc; border-left: 5px solid #1d8aff; } diff --git a/javascript/betternavigator.js b/javascript/betternavigator.js index 7ba77d0..d830351 100755 --- a/javascript/betternavigator.js +++ b/javascript/betternavigator.js @@ -2,9 +2,9 @@ function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); - for(var i=0; i $member, 'Stage' => Versioned::get_stage(), 'Viewing' => $viewing, // What we're viewing doesn't necessarily align with the active Stage + 'CssClass' => $this->BetterNavigatorCssClass(), 'ViewingTitle' => $viewingTitle, 'LoginLink' => Controller::join_links(Director::absoluteBaseURL(), Security::config()->login_url, $backURL), 'LogoutLink' => Controller::join_links(Director::absoluteBaseURL() . Security::config()->logout_url, $backURL), @@ -180,4 +181,27 @@ class BetterNavigatorExtension extends DataExtension && $this->owner->dataRecord instanceof SiteTree && $this->owner->dataRecord->ID > 0; } + + + /** + * @return string + */ + private function BetterNavigatorCssClass() { + $classes = ''; + + $position = Config::inst()->get('BetterNavigator', 'position'); + $translucent = Config::inst()->get('BetterNavigator', 'translucent'); + + if ($position === 'left-top' || $position === 'left-bottom' || $position === 'right-bottom') { + $classes .= ' ' . $position; + } else { + $classes .= ' right-top'; + } + + if ($translucent && $translucent == 'true') { + $classes .= ' translucent'; + } + + return $classes; + } } diff --git a/templates/BetterNavigator/BetterNavigator.ss b/templates/BetterNavigator/BetterNavigator.ss index 3398e6b..443eea6 100644 --- a/templates/BetterNavigator/BetterNavigator.ss +++ b/templates/BetterNavigator/BetterNavigator.ss @@ -1,47 +1,47 @@ -