purpleraft/PurpleMine2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

button for expanding/collapsing top menu, fixes #8

Browse Source 
- introduce `$top-menu-collapse` flag and `$top-menu-collapse-breakpoint` variable
- add TopMenuCollapse.js script
- new base64 encoded images: arrow-up and arrow-down (white colored)
This commit is contained in:
mrliptontea
2015-04-17 11:30:27 +02:00
parent 3fd21ebb9c
commit 2cc2c83568
9 changed files with 206 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
README.md
View File

@@ -56,6 +56,10 @@ If you need to customize styles for [Redmine Backlogs][redmine_backlogs] remembe
## Changelog
Latest (master):
* Fixed #8: Setting `$top-menu-collapse` to `true` will enable script allowing to toggle if top menu should be collapsed (no wrapping) or expanded (wrapped, with auto height)
v1.5.0 (2015-04-15):
* Fixed #5: Added default style for colored issue links.

2
javascripts/theme.js
View File

File diff suppressed because one or more lines are too long

100
src/javascripts/modules/TopMenuCollapse.js Normal file
View File

@@ -0,0 +1,100 @@
var PurpleMine = PurpleMine || {};
PurpleMine.TopMenuCollapse = (function()
{
"use strict";
var self; // Make it work for browsers without Function.prototype.bind
var translations = {
en: {
toggler: "Expand/collapse top menu"
},
pl: {
toggler: "Zwiń/rozwiń górne menu"
}
};
function TopMenuCollapse()
{
self = this;
this.topMenuCollapsed = true;
this.$toggler = null;
this.$topMenu = $("#top-menu");
this.lang = document.documentElement.lang;
if (typeof translations[this.lang] === "undefined")
{
this.lang = "en";
}
this._ = translations[this.lang];
if ("none" !== this.$topMenu.css("maxHeight"))
{
if (window.localStorage)
{
this.topMenuCollapsed =
null === localStorage.getItem("PurpleMine:topMenuExpanded");
}
this.buildToggleButton();
if (false === this.topMenuCollapsed)
{
this.expandTopMenu(true);
}
}
}
TopMenuCollapse.prototype.buildToggleButton = function()
{
var togglerClass = "top-menu-toggler",
togglerHtml;
togglerHtml = "<a href=\"javascript:;\" class=\"" + togglerClass +
"\" title=\"" + this._.toggler + "\"></a>";
this.$toggler = $(togglerHtml);
this.$topMenu.prepend(this.$toggler);
this.$toggler.on("click", this.toggleTopMenu);
};
TopMenuCollapse.prototype.toggleTopMenu = function()
{
if (self.topMenuCollapsed)
{
self.expandTopMenu();
}
else
{
self.collapseTopMenu();
}
};
TopMenuCollapse.prototype.expandTopMenu = function()
{
this.$topMenu.addClass("expanded");
this.$toggler.addClass("expanded");
this.topMenuCollapsed = false;
if (window.localStorage)
{
localStorage.setItem("PurpleMine:topMenuExpanded", "x");
}
};
TopMenuCollapse.prototype.collapseTopMenu = function()
{
this.$topMenu.removeClass("expanded");
this.$toggler.removeClass("expanded");
this.topMenuCollapsed = true;
if (window.localStorage)
{
localStorage.removeItem("PurpleMine:topMenuExpanded");
}
};
return TopMenuCollapse;
}());

1
src/javascripts/theme.js
View File

@@ -5,4 +5,5 @@ $(function()
new PurpleMine.SidebarToggler();
new PurpleMine.HistoryTabs();
new PurpleMine.TopMenuCollapse();
});

8
src/sass/_variables.scss
View File

@@ -17,6 +17,7 @@ $use-font-awesome: true !default;
$issue-subject-large: true !default;
$enable-sidebar-toggler: true !default;
$wiki-page-more-vertical-space: true !default;
$top-menu-collapse: false !default;
//== Colors
@@ -72,8 +73,9 @@ $font-family-base: $font-family-sans-serif !default;
$font-size-base: 14px !default;
$font-size-large: 1.285em !default;
$font-size-large-px: 18px !default;
$font-size-small: .86em !default;
$font-size-small-px: 12px !default;
$font-size-small-unitless: .86 !default;
$font-size-small: $font-size-small-unitless * 1em !default;
$font-size-small-px: floor($font-size-small-unitless * $font-size-base) !default;
$font-size-h1: 2.25em !default;
$font-size-h2: 1.75em !default;
@@ -466,6 +468,8 @@ $screen-xs-max: ($screen-sm-min - 1) !default;
$screen-sm-max: ($screen-md-min - 1) !default;
$screen-md-max: ($screen-lg-min - 1) !default;
$top-menu-collapse-breakpoint: $screen-lg-min !default;
//== Content widths
//

2
src/sass/application.scss
View File

@@ -11,7 +11,6 @@
@import "components/forms";
@import "components/tabs";
@import "components/pagination";
@import "components/top";
@import "components/content";
@import "components/gravatar";
@import "components/list";
@@ -27,6 +26,7 @@
@import "components/elements";
@import "components/jquery-ui";
@import "components/icons";
@import "components/top";
@import "components/jstoolbar";
@import "components/flash";
@import "components/image-base64";

12
src/sass/components/_image-base64.scss
View File

@@ -7,14 +7,22 @@
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAKBAMAAAAnY0GXAAAAD1BMVEUAAACzs7Ozs7Ozs7Ozs7NJvZFvAAAABHRSTlMA5kpJG2qUMwAAABtJREFUCNdjIBMYCkMRDIg4QhBuAUUhKCIPAAAlaQNk5qF21gAAAABJRU5ErkJggg==);
}
%image-arrow-left {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgF1mUUUMBtml7EIAAAAjSURBVAjXYyAAWGEMRyhdJAih2QyhDCZBhAhcDVwXwhziAACuywJHmKAVPgAAAABJRU5ErkJggg==);
%image-arrow-up {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAYUlEQVR4Xu2SMQqAMAxFVUxOID2FQ+9R3cRjesX4A5lCoaUFB2nhkeQPLxQyi8jU8xbwYwGBC1CrIIFda4sgKq6vFgS/1eZQI2BwZ/5NlnNJcIAtt8ny04ermx/l4zsYgheccgigTIfmMAAAAABJRU5ErkJggg==);
}
%image-arrow-right {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACUUeIgAAAACXRSTlMAgF1mUUUMBwa6cf6pAAAAIklEQVQI12PADwJgDBEYQ1ADxhBOgDIEFdBF1GG6EOYQCQC/wwKE7b2bNAAAAABJRU5ErkJggg==);
}
%image-arrow-down {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAG1BMVEUAAAD////////////////////////////////rTT7CAAAACXRSTlMAgFIFbBZWMTBl3YBFAAAALElEQVQI12MgDTAJCgoKgRjMjoKCzmChQEHBADCDQ1AcqkpRAcowM2AgEQAAvM4CiwrixCQAAAAASUVORK5CYII=);
}
%image-arrow-left {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAGFBMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABWNxwqAAAACHRSTlMAgF1mUUUMBtml7EIAAAAjSURBVAjXYyAAWGEMRyhdJAih2QyhDCZBhAhcDVwXwhziAACuywJHmKAVPgAAAABJRU5ErkJggg==);
}
%image-calendar {
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOBAMAAADtZjDiAAAAIVBMVEUAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVUMftYpAAAACnRSTlMArIDn/dahwzIKIC4f+wAAADxJREFUCNdjYEhJACEGBk8HEGIQXrDYeMFiAYZVK1YB0QKGVSAApBcwMQgwMSDohaKChqKCxItXgc0pAADUBx5bh1ZBCgAAAABJRU5ErkJggg==);
}

80
src/sass/components/_top.scss
View File

@@ -9,6 +9,85 @@
font-size: $font-size-small;
@extend %clearfix;
@if $top-menu-collapse {
$toggler-position-v: $padding-small-vertical + 1px;
$toggler-position-h: $padding-small-vertical - 1px;
max-height: floor($font-size-base * $font-size-small-unitless * $line-height-base) + $padding-small-vertical;
padding-bottom: 0;
overflow: hidden;
&.expanded {
max-height: none;
}
a {
display: inline-block;
margin-bottom: $padding-small-vertical;
white-space: nowrap;
}
.top-menu-toggler {
display: block;
position: absolute;
top: $toggler-position-v;
left: $toggler-position-h;
@include user-select(none);
@if $use-font-awesome {
font-size: 14px;
&:before {
content: $fa-var-caret-square-o-down;
}
} @else {
@extend %image-arrow-down;
}
@if $use-font-awesome {
@extend %fa-icon;
color: mix($top-menu-link, $top-menu-bg, 33%);
line-height: 1;
&:before {
margin-right: 0;
}
&:hover,
&:focus,
&:active {
color: mix($top-menu-link-hover, $top-menu-bg, 50%);
}
} @else {
width: 15px;
height: 15px;
border-radius: $border-radius-base;
background-repeat: no-repeat;
background-position: center center;
&:hover,
&:focus,
&:active {
background-color: lighten($top-menu-bg, 15%);
}
}
&.expanded {
@if $use-font-awesome {
&:before {
content: $fa-var-caret-square-o-up;
}
} @else {
@extend %image-arrow-up;
}
}
@media screen and (min-width: $top-menu-collapse-breakpoint) {
display: none;
}
}
}
ul {
margin: 0;
padding: 0;
@@ -32,6 +111,7 @@
}
#loggedas {
margin-left: 1em;
float: right;
}
}

6
stylesheets/application.css
View File

File diff suppressed because one or more lines are too long