From 5f70f31d1fff5a9b27240b92eb99c6f49b239998 Mon Sep 17 00:00:00 2001 From: Michael Nowina-Krowicki Date: Tue, 1 Dec 2020 12:47:11 +1030 Subject: [PATCH] Adding translucent and position config settings --- README.md | 14 +++++++ css/betternavigator.css | 16 +++++-- scss/betternavigator.scss | 44 +++++++++++++++++--- src/Extension/BetterNavigatorExtension.php | 26 +++++++++++- templates/BetterNavigator/BetterNavigator.ss | 2 +- 5 files changed, 91 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 3d0b41d..1eb67fe 100644 --- a/README.md +++ b/README.md @@ -57,6 +57,20 @@ You can mark certain CMS users as developers in your site's config, so they can ## Customisation +BetterNavigator can be made translucent by adding the following config setting: + +``` + BetterNavigator: + translucent: true +``` + +BetterNavigator position can be set to 'top-right', 'top-left', 'bottom-right' or 'bottom-left' by adding the following config setting: + +``` + BetterNavigator: + position: 'bottom-right' +``` + 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 bcc076c..47a2ccc 100644 --- a/css/betternavigator.css +++ b/css/betternavigator.css @@ -24,16 +24,24 @@ span[class^='bn-icon'], span[class*=' bn-icon'] { display: inline-block; } -.better-navigator { 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; } +.better-navigator { 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; } .better-navigator a { text-decoration: none; } .better-navigator form { display: none; } -.better-navigator.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; } -.better-navigator.collapsed .better-navigator__status { border-width: 0 1px 1px 0; } +.better-navigator.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); } +.better-navigator.collapsed.translucent { opacity: 0.5; transition: opacity 250ms; } +.better-navigator.collapsed.translucent:hover { opacity: 1; } +.better-navigator.collapsed .better-navigator__status { border-width: 1px; } .better-navigator.collapsed .better-navigator__status .bn-icon-close { display: none; } .better-navigator.collapsed .better-navigator__status .bn-icon-cog { display: inline-block; } .better-navigator.collapsed .better-navigator__content { display: none; } +.better-navigator.right-top { right: 0; top: 0; } +.better-navigator.right-bottom { right: 0; bottom: 0; } +.better-navigator.right-bottom.collapsed { bottom: 4rem; } +.better-navigator.left-bottom { left: 0; bottom: 0; } +.better-navigator.left-bottom.collapsed { bottom: 4rem; } +.better-navigator.left-top { left: 0; top: 0; } -.better-navigator__status { 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; } +.better-navigator__status { color: #fff; background: #6f6f6f; border: 1px solid #646464; border-width: 0; text-transform: uppercase; cursor: pointer; padding: 10px 15px 8px; font-weight: bold; } .better-navigator__status .bn-icon-cog { margin: -4px 8px -4px -4px; display: none; } .better-navigator__status .bn-icon-close { float: right; margin: 1px 0 0 0; } .better-navigator__status .bn-icon-cog, .better-navigator__status .bn-icon-close { opacity: .7; } diff --git a/scss/betternavigator.scss b/scss/betternavigator.scss index 31c8310..1aa2c52 100644 --- a/scss/betternavigator.scss +++ b/scss/betternavigator.scss @@ -13,8 +13,6 @@ span[class^='bn-icon'],span[class*=' bn-icon']{ .better-navigator { position: fixed; - top: 0; - right: 0; z-index: 99999; max-height: 100%; overflow: auto; @@ -37,10 +35,18 @@ span[class^='bn-icon'],span[class*=' bn-icon']{ box-shadow: 0px 0px 3px rgba(0,0,0,0.5); @include transform-origin(right,top); @include transform(rotate(90deg) translate(100%,0)); - border-width: 0 1px 1px 0; + + &.translucent { + opacity: 0.5; + transition: opacity 250ms; + + &:hover { + opacity: 1; + } + } .better-navigator__status { - border-width: 0 1px 1px 0; + border-width: 1px; .bn-icon-close { display: none; @@ -54,6 +60,34 @@ span[class^='bn-icon'],span[class*=' bn-icon']{ display: none; } } + + &.right-top { + right: 0; + top: 0; + } + + &.right-bottom { + right: 0; + bottom: 0; + + &.collapsed { + bottom: 4rem; + } + } + + &.left-bottom { + left: 0; + bottom: 0; + + &.collapsed { + bottom: 4rem; + } + } + + &.left-top { + left: 0; + top: 0; + } } //Status @@ -66,7 +100,7 @@ $archiveColor: #6f6f6f; color: #fff; background: $archiveColor; border: 1px solid shade($archiveColor, 10); - border-width: 0 0 0 1px; + border-width: 0; text-transform: uppercase; cursor: pointer; padding: 10px 15px 8px; diff --git a/src/Extension/BetterNavigatorExtension.php b/src/Extension/BetterNavigatorExtension.php index 0b19e71..f47343d 100644 --- a/src/Extension/BetterNavigatorExtension.php +++ b/src/Extension/BetterNavigatorExtension.php @@ -130,7 +130,7 @@ class BetterNavigatorExtension extends DataExtension $bNData = array_merge($nav, [ 'Member' => $member, 'Stage' => Versioned::get_stage(), - 'Viewing' => strtolower($viewing), // What we're viewing doesn't necessarily align with the active Stage + 'CssClasses' => $this->cssClasses($viewing), '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 +180,28 @@ class BetterNavigatorExtension extends DataExtension && $this->owner->dataRecord instanceof SiteTree && $this->owner->dataRecord->ID > 0; } + + + /** + * @param string $viewing + * @return string + */ + private function cssClasses($viewing) { + $classes = strtolower($viewing); + + $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 b158354..55dafbc 100644 --- a/templates/BetterNavigator/BetterNavigator.ss +++ b/templates/BetterNavigator/BetterNavigator.ss @@ -1,6 +1,6 @@