New: Position and translucency options (#52)
This commit is contained in:
3Dgoo
GitHub
parent
83172d6da6
commit
96558495be
22
README.md
22
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:
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
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; }
|
||||
|
|
|
|||
|
|
@ -2,9 +2,9 @@
|
|||
function getCookie(cname) {
|
||||
var name = cname + "=";
|
||||
var ca = document.cookie.split(';');
|
||||
for(var i=0; i<ca.length; i++) {
|
||||
for (var i = 0; i < ca.length; i++) {
|
||||
var c = ca[i];
|
||||
while (c.charAt(0)===' ') {
|
||||
while (c.charAt(0) === ' ') {
|
||||
c = c.substring(1);
|
||||
}
|
||||
if (c.indexOf(name) !== -1) {
|
||||
|
|
@ -23,14 +23,21 @@ function initialiseBetterNavigator() {
|
|||
|
||||
// Toggle visibility of menu by clicking status
|
||||
BetterNavigatorStatus.onclick = function () {
|
||||
BetterNavigator.className = BetterNavigator.className === 'collapsed' ? 'open' : 'collapsed';
|
||||
//Set cookie to remember state
|
||||
document.cookie = "BetterNavigator=" + BetterNavigator.className + ";path=/";
|
||||
if (BetterNavigator.classList.contains('collapsed')) {
|
||||
BetterNavigator.classList.add('open');
|
||||
BetterNavigator.classList.remove('collapsed');
|
||||
document.cookie = "BetterNavigator=open;path=/";
|
||||
} else {
|
||||
BetterNavigator.classList.add('collapsed');
|
||||
BetterNavigator.classList.remove('open');
|
||||
document.cookie = "BetterNavigator=collapsed;path=/";
|
||||
}
|
||||
};
|
||||
|
||||
// Restore menu state
|
||||
if (getCookie('BetterNavigator') === 'open') {
|
||||
BetterNavigator.className = 'open';
|
||||
BetterNavigator.classList.add('open');
|
||||
BetterNavigator.classList.remove('collapsed');
|
||||
}
|
||||
|
||||
if (BetterNavigatorLogoutForm) {
|
||||
|
|
|
|||
|
|
@ -13,8 +13,6 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
|
|||
|
||||
#BetterNavigator {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
z-index: 99999;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
|
|
@ -35,12 +33,18 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
|
|||
|
||||
&.collapsed {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
#BetterNavigatorStatus {
|
||||
border-width: 0 1px 1px 0;
|
||||
border-width: 1px;
|
||||
|
||||
.bn-icon-close {
|
||||
display: none;
|
||||
|
|
@ -54,6 +58,46 @@ span[class^='bn-icon'],span[class*=' bn-icon']{
|
|||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.right-top {
|
||||
right: 0;
|
||||
top: 0;
|
||||
|
||||
&.collapsed {
|
||||
@include transform-origin(right, top);
|
||||
@include transform(rotate(90deg) translate(100%, 0));
|
||||
}
|
||||
}
|
||||
|
||||
&.right-bottom {
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.collapsed {
|
||||
@include transform-origin(right, bottom);
|
||||
@include transform(rotate(90deg) translate(0, 100%));
|
||||
}
|
||||
}
|
||||
|
||||
&.left-bottom {
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.collapsed {
|
||||
@include transform-origin(left, bottom);
|
||||
@include transform(rotate(90deg) translate(-100%, 0));
|
||||
}
|
||||
}
|
||||
|
||||
&.left-top {
|
||||
left: 0;
|
||||
top: 0;
|
||||
|
||||
&.collapsed {
|
||||
@include transform-origin(left, top);
|
||||
@include transform(rotate(90deg) translate(0, -100%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//Status
|
||||
|
|
@ -66,7 +110,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;
|
||||
|
|
@ -131,7 +175,8 @@ $archiveColor: #6f6f6f;
|
|||
margin: 8px 0 4px 0;
|
||||
}
|
||||
|
||||
span[class^='bn-icon'],span[class*=' bn-icon']{
|
||||
span[class^='bn-icon'],
|
||||
span[class*=' bn-icon'] {
|
||||
margin: -2px 5px -3px -2px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -131,6 +131,7 @@ class BetterNavigatorExtension extends DataExtension
|
|||
'Member' => $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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,47 +1,47 @@
|
|||
<div id="BetterNavigator" class="collapsed">
|
||||
<div id="BetterNavigator" class="collapsed $CssClass">
|
||||
|
||||
<div id="BetterNavigatorStatus" class="$Viewing">
|
||||
<span class="bn-icon-cog"></span>
|
||||
$ViewingTitle
|
||||
<span class="bn-icon-close"></span>
|
||||
</div>
|
||||
<div id="BetterNavigatorStatus" class="$Viewing">
|
||||
<span class="bn-icon-cog"></span>
|
||||
$ViewingTitle
|
||||
<span class="bn-icon-close"></span>
|
||||
</div>
|
||||
|
||||
<div id="BetterNavigatorContent">
|
||||
|
||||
<div class="bn-links">
|
||||
|
||||
<% if $ArchiveLink.Active %>
|
||||
<% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.RESTORE_LABEL 'Restore' %></a><% end_if %>
|
||||
<% else %>
|
||||
<% if not $LiveLink.Active %>
|
||||
<% if $LiveLink.Link %>
|
||||
<a href="$LiveLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_LIVE_LABEL 'View live' %></a>
|
||||
<% else %>
|
||||
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></span>
|
||||
<% end_if %>
|
||||
<% if $ArchiveLink.Active %>
|
||||
<% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.RESTORE_LABEL 'Restore' %></a><% end_if %>
|
||||
<% else %>
|
||||
<% if not $LiveLink.Active %>
|
||||
<% if $LiveLink.Link %>
|
||||
<a href="$LiveLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_LIVE_LABEL 'View live' %></a>
|
||||
<% else %>
|
||||
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.NOT_YET_PUBLISHED_LABEL 'Not yet published' %></span>
|
||||
<% end_if %>
|
||||
<% if not $StageLink.Active %>
|
||||
<% if $StageLink.Link %>
|
||||
<a href="$StageLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_DRAFT_LABEL 'View draft' %></a>
|
||||
<% else %>
|
||||
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.DELETED_FROM_DRAFT_SITE_LABEL 'Deleted from draft site' %></span>
|
||||
<% end_if %>
|
||||
<% end_if %>
|
||||
<% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.EDIT_IN_CMS_LABEL 'Edit in CMS' %></a><% end_if %>
|
||||
<% end_if %>
|
||||
<% if not $StageLink.Active %>
|
||||
<% if $StageLink.Link %>
|
||||
<a href="$StageLink.Link"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.VIEW_DRAFT_LABEL 'View draft' %></a>
|
||||
<% else %>
|
||||
<span class="bn-disabled"><span class="bn-icon-view"></span><%t JonoM\BetterNavigator.DELETED_FROM_DRAFT_SITE_LABEL 'Deleted from draft site' %></span>
|
||||
<% end_if %>
|
||||
<% end_if %>
|
||||
<% if $EditLink %><a href="$EditLink" target="_blank"><span class="bn-icon-edit"></span><%t JonoM\BetterNavigator.EDIT_IN_CMS_LABEL 'Edit in CMS' %></a><% end_if %>
|
||||
<% end_if %>
|
||||
|
||||
<% if $Member %>
|
||||
$LogoutForm
|
||||
<a href="$LogoutLink" id="BetterNavigatorLogoutLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_OUT_LABEL 'Log out' %><% if $Member.FirstName %><span class="light"> ($Member.FirstName)</span><% end_if %></a>
|
||||
<% else %>
|
||||
<a href="$LoginLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_IN_LABEL 'Log in' %></a>
|
||||
<% end_if %>
|
||||
<% if $Member %>
|
||||
$LogoutForm
|
||||
<a href="$LogoutLink" id="BetterNavigatorLogoutLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_OUT_LABEL 'Log out' %><% if $Member.FirstName %><span class="light"> ($Member.FirstName)</span><% end_if %></a>
|
||||
<% else %>
|
||||
<a href="$LoginLink"><span class="bn-icon-user"></span><%t JonoM\BetterNavigator.LOG_IN_LABEL 'Log in' %></a>
|
||||
<% end_if %>
|
||||
|
||||
</div>
|
||||
|
||||
<% include BetterNavigator\BetterNavigatorExtraContent %>
|
||||
|
||||
<% if $Mode=='dev' || $IsDeveloper %>
|
||||
<% if $Mode == 'dev' || $IsDeveloper %>
|
||||
|
||||
<div class="bn-heading"><%t JonoM\BetterNavigator.DEVELOPER_TOOLS_HEADING 'Developer tools' %></div>
|
||||
|
||||
|
|
@ -77,7 +77,7 @@
|
|||
|
||||
<% end_if %>
|
||||
|
||||
<% if $Mode=='dev' %>
|
||||
<% if $Mode == 'dev' %>
|
||||
|
||||
<div class="bn-heading"><%t JonoM\BetterNavigator.DEBUGGING_HEADING 'Debugging' %></div>
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue