Merge pull request #8620 from owncloud/design-navigation-two
Toggle app navigation not only on mobile, but on desktop as well
This commit is contained in:
Thomas Müller
commit
1c20c72efe
|
|
@ -97,7 +97,7 @@
|
|||
* to be more flexible / relative
|
||||
*/
|
||||
#body-user .app-files #controls {
|
||||
left: 310px; /* main nav bar + sidebar */
|
||||
left: 230px; /* sidebar width */
|
||||
position: fixed;
|
||||
padding-left: 0px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,293 @@
|
|||
/* prevent ugly selection effect on accidental selection */
|
||||
#header,
|
||||
#navigation,
|
||||
#expanddiv {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* HEADERS ------------------------------------------------------------------ */
|
||||
|
||||
#body-user #header,
|
||||
#body-settings #header,
|
||||
#body-public #header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
height: 45px;
|
||||
line-height: 2.5em;
|
||||
background-color: #1d2d44;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* LOGO and APP NAME -------------------------------------------------------- */
|
||||
|
||||
#owncloud {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 6px;
|
||||
padding-bottom: 0;
|
||||
height: 45px; /* header height */
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#header .logo {
|
||||
background-image: url(../img/logo.svg);
|
||||
background-repeat: no-repeat;
|
||||
width: 250px;
|
||||
height: 118px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header .logo-wide {
|
||||
background-image: url(../img/logo-wide.svg);
|
||||
background-repeat: no-repeat;
|
||||
width: 147px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#header .logo-icon {
|
||||
/* display logo so appname can be shown next to it */
|
||||
display: inline-block;
|
||||
background-image: url(../img/logo-icon.svg);
|
||||
background-repeat: no-repeat;
|
||||
width: 60px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
#header .menutoggle {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
left: 70px;
|
||||
height: 27px;
|
||||
padding-top: 18px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
/* hover effect for app switcher label */
|
||||
.menutoggle .header-appname,
|
||||
.menutoggle .icon-caret {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
|
||||
filter: alpha(opacity=75);
|
||||
opacity: .75;
|
||||
}
|
||||
.menutoggle:hover .header-appname,
|
||||
.menutoggle:hover .icon-caret,
|
||||
.menutoggle:focus .header-appname
|
||||
.menutoggle:focus .icon-caret
|
||||
.menutoggle.active .header-appname
|
||||
.menutoggle.active .icon-caret {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* show appname next to logo */
|
||||
.header-appname {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
margin-top: -24px;
|
||||
padding: 7px 0 7px 5px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* show caret indicator next to logo to make clear it is tappable */
|
||||
#header .icon-caret {
|
||||
display: inline-block;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
margin: 0;
|
||||
margin-top: -21px;
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
}
|
||||
/* do not show menu toggle on public share links as there is no menu */
|
||||
#body-public #header .icon-caret {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* NAVIGATION --------------------------------------------------------------- */
|
||||
|
||||
#content-wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
position: fixed;
|
||||
top: 45px;
|
||||
width: 265px;
|
||||
max-height: 85%;
|
||||
margin-top: 0;
|
||||
padding-bottom: 10px;
|
||||
background-color: rgba(36, 40, 47, .97);
|
||||
border-bottom-right-radius: 7px;
|
||||
box-shadow: 0 0 7px rgba(29,45,68,.97);
|
||||
display: none;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
z-index: 150;
|
||||
}
|
||||
#navigation, #navigation * {
|
||||
-moz-box-sizing:border-box;
|
||||
box-sizing:border-box;
|
||||
}
|
||||
#navigation li {
|
||||
display: inline-block;
|
||||
}
|
||||
#navigation a {
|
||||
position: relative;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
#navigation a span {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
width: 80px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
white-space:nowrap;
|
||||
overflow:hidden;
|
||||
text-overflow:ellipsis;
|
||||
}
|
||||
/* icon opacity and hover effect */
|
||||
#navigation a img,
|
||||
#navigation a span {
|
||||
/* 50% opacity when inactive */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
opacity: .5;
|
||||
}
|
||||
#navigation a:hover img, #navigation a:focus img,
|
||||
#navigation a:hover span, #navigation a:focus span {
|
||||
/* 80% opacity when hovered or focused */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
opacity: .8;
|
||||
}
|
||||
#navigation a.active img,
|
||||
#navigation a.active span {
|
||||
/* full opacity for the active app */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#navigation .app-icon {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/* Apps management */
|
||||
#apps-management {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60);
|
||||
opacity: .6;
|
||||
min-height: initial;
|
||||
height: initial;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
/* loading feedback for apps */
|
||||
#navigation .app-loading .icon-loading-dark {
|
||||
display: inline !important;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
left: 24px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
#navigation .app-loading .app-icon {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)";
|
||||
filter: alpha(opacity=10);
|
||||
opacity: .1;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* USER MENU -----------------------------------------------------------------*/
|
||||
|
||||
/* info part on the right, used e.g. for info on who shared something */
|
||||
.header-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding: 7px 5px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
max-width: 40%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Profile picture in header */
|
||||
#header .avatardiv {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#header .avatardiv img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#settings {
|
||||
float: right;
|
||||
color: #bbb;
|
||||
}
|
||||
#expand {
|
||||
display: block;
|
||||
padding: 7px 12px 6px 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#expand:hover, #expand:focus, #expand:active { color:#fff; }
|
||||
#expand img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; margin-bottom:-2px; }
|
||||
#expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
|
||||
#expanddiv {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 45px;
|
||||
z-index: 150;
|
||||
display: none;
|
||||
background-color: #383c43;
|
||||
border-bottom-left-radius:7px; border-bottom:1px #333 solid; border-left:1px #333 solid;
|
||||
box-shadow:0 0 7px rgb(29,45,68);
|
||||
-moz-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
padding: 4px 12px 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity=70);
|
||||
opacity: .7;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a img {
|
||||
margin-bottom: -3px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
|
@ -21,19 +21,6 @@
|
|||
box-align: center;
|
||||
}
|
||||
|
||||
/* show caret indicator next to logo to make clear it is tappable */
|
||||
#owncloud.menutoggle {
|
||||
background-image: url('../img/actions/caret.svg');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 26px;
|
||||
padding-right: 16px !important;
|
||||
}
|
||||
/* do not show menu toggle on public share links as there is no menu */
|
||||
#body-public #owncloud.menutoggle {
|
||||
background-image: none;
|
||||
padding-right: 0 !important;
|
||||
}
|
||||
|
||||
/* compress search box on mobile, expand when focused */
|
||||
.searchbox input[type="search"] {
|
||||
width: 15%;
|
||||
|
|
@ -53,73 +40,6 @@
|
|||
display: none;
|
||||
}
|
||||
|
||||
/* toggle navigation */
|
||||
#content-wrapper {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
#navigation {
|
||||
top: 45px;
|
||||
bottom: initial;
|
||||
width: 255px;
|
||||
max-height: 90%;
|
||||
margin-top: 0;
|
||||
top: 45px;
|
||||
background-color: rgba(36, 40, 47, .97);
|
||||
overflow-x: initial;
|
||||
border-bottom-right-radius: 7px;
|
||||
border-bottom: 1px #333 solid;
|
||||
border-right: 1px #333 solid;
|
||||
box-shadow: 0 0 7px rgba(29,45,68,.97);
|
||||
display: none;
|
||||
}
|
||||
#navigation, #navigation * {
|
||||
box-sizing:border-box; -moz-box-sizing:border-box;
|
||||
}
|
||||
#navigation li {
|
||||
display: inline-block;
|
||||
}
|
||||
#navigation a {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
#navigation a span {
|
||||
display: inline-block;
|
||||
font-size: 13px;
|
||||
padding-bottom: 0;
|
||||
padding-left: 0;
|
||||
width: 80px;
|
||||
}
|
||||
#navigation .icon {
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
}
|
||||
#navigation li:first-child .icon {
|
||||
padding-top: 0;
|
||||
}
|
||||
/* Apps management as sticky footer */
|
||||
#navigation .wrapper {
|
||||
min-height: initial;
|
||||
margin: 0;
|
||||
}
|
||||
#apps-management, #navigation .push {
|
||||
height: initial;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* shift to account for missing app list */
|
||||
#body-user #controls,
|
||||
#body-settings #controls {
|
||||
padding-left: 0;
|
||||
}
|
||||
#body-user .app-files #controls {
|
||||
left: 230px !important; /* sidebar only */
|
||||
}
|
||||
|
||||
/* don’t require a minimum width for controls bar */
|
||||
#controls {
|
||||
min-width: initial !important;
|
||||
|
|
|
|||
|
|
@ -24,23 +24,6 @@ body {
|
|||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
/* HEADERS */
|
||||
#body-user #header,
|
||||
#body-settings #header,
|
||||
#body-public #header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 100;
|
||||
height: 45px;
|
||||
line-height: 2.5em;
|
||||
background-color: #1d2d44;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#body-login {
|
||||
text-align: center;
|
||||
background: #1d2d44; /* Old browsers */
|
||||
|
|
@ -53,34 +36,7 @@ body {
|
|||
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#35537a', endColorstr='#1d2d44',GradientType=0 ); /* IE6-9 */
|
||||
}
|
||||
|
||||
#owncloud {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 6px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
/* info part on the right, used e.g. for info on who shared something */
|
||||
.header-right {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
padding: 7px 5px;
|
||||
color: #fff;
|
||||
height: 100%;
|
||||
max-width: 40%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Profile picture in header */
|
||||
#header .avatardiv {
|
||||
float: left;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
#header .avatardiv img {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#nojavascript {
|
||||
position: absolute;
|
||||
|
|
@ -110,20 +66,6 @@ body {
|
|||
color: #aaa;
|
||||
}
|
||||
|
||||
#header .logo {
|
||||
background-image: url(../img/logo.svg);
|
||||
background-repeat: no-repeat;
|
||||
width: 250px;
|
||||
height: 118px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
#header .logo-wide {
|
||||
background-image: url(../img/logo-wide.svg);
|
||||
background-repeat: no-repeat;
|
||||
width: 147px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
/* INPUTS */
|
||||
input[type="text"],
|
||||
|
|
@ -207,16 +149,6 @@ input img, button img, .button img {
|
|||
}
|
||||
|
||||
|
||||
/* prevent ugly selection effect on accidental selection */
|
||||
#header,
|
||||
#navigation,
|
||||
#expanddiv {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* SCROLLING */
|
||||
::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
|
|
@ -234,6 +166,7 @@ input[type="submit"], input[type="button"],
|
|||
button, .button,
|
||||
#quota, select, .pager li a {
|
||||
width: auto;
|
||||
min-width: 25px;
|
||||
padding: 5px;
|
||||
background-color: rgba(240,240,240,.9);
|
||||
font-weight: bold;
|
||||
|
|
@ -321,11 +254,6 @@ input[type="submit"].enabled {
|
|||
border-bottom: 1px solid #e7e7e7;
|
||||
z-index: 50;
|
||||
}
|
||||
/* account for shift of controls bar due to app navigation */
|
||||
#body-user #controls,
|
||||
#body-settings #controls {
|
||||
padding-left: 80px;
|
||||
}
|
||||
#controls .button,
|
||||
#controls button,
|
||||
#controls input[type='submit'],
|
||||
|
|
@ -713,131 +641,6 @@ label.infield {
|
|||
|
||||
|
||||
|
||||
/* NAVIGATION ------------------------------------------------------------- */
|
||||
#navigation {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 80px;
|
||||
margin-top:45px;
|
||||
z-index: 75;
|
||||
background-color: #383c43;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
-moz-box-sizing:border-box; box-sizing:border-box;
|
||||
}
|
||||
#apps {
|
||||
height: 100%;
|
||||
}
|
||||
#navigation a span {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
font-size: 11px;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
white-space:nowrap; overflow:hidden; text-overflow:ellipsis; /* ellipsize long app names */
|
||||
padding-bottom: 10px;
|
||||
/* prevent shift caused by scrollbar */
|
||||
padding-left: 8px;
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
/* icon opacity and hover effect */
|
||||
#navigation a img,
|
||||
#navigation a span {
|
||||
/* 50% opacity when inactive */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
|
||||
filter: alpha(opacity=50);
|
||||
opacity: .5;
|
||||
}
|
||||
#navigation a:hover img, #navigation a:focus img,
|
||||
#navigation a:hover span, #navigation a:focus span {
|
||||
/* 80% opacity when hovered or focused */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
|
||||
filter: alpha(opacity=80);
|
||||
opacity: .8;
|
||||
}
|
||||
#navigation a.active img,
|
||||
#navigation a.active span {
|
||||
/* full opacity for the active app */
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
#navigation .icon {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin-left: 24px;
|
||||
padding: 10px 0 4px;
|
||||
}
|
||||
#navigation li:first-child .icon { /* special rule for Files icon as it's first */
|
||||
padding-top: 20px;
|
||||
}
|
||||
|
||||
/* Apps management as sticky footer, less obtrusive in the list */
|
||||
#navigation .wrapper {
|
||||
min-height: 100%;
|
||||
margin: 0 auto -82px 0;
|
||||
}
|
||||
#apps-management, #navigation .push {
|
||||
height: 72px;
|
||||
}
|
||||
#apps-management {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
|
||||
filter: alpha(opacity=60);
|
||||
opacity: .6;
|
||||
}
|
||||
#apps-management .icon {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* USER MENU */
|
||||
#settings {
|
||||
float: right;
|
||||
color: #bbb;
|
||||
}
|
||||
#expand {
|
||||
display: block;
|
||||
padding: 7px 12px 6px 7px;
|
||||
cursor: pointer;
|
||||
}
|
||||
#expand:hover, #expand:focus, #expand:active { color:#fff; }
|
||||
#expand img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; filter:alpha(opacity=70); opacity:.7; margin-bottom:-2px; }
|
||||
#expand:hover img, #expand:focus img, #expand:active img { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1; }
|
||||
#expanddiv {
|
||||
position:absolute; right:0; top:45px; z-index:76; display:none;
|
||||
background-color: #383c43;
|
||||
border-bottom-left-radius:7px; border-bottom:1px #333 solid; border-left:1px #333 solid;
|
||||
box-shadow:0 0 7px rgb(29,45,68);
|
||||
-moz-box-sizing: border-box; box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a {
|
||||
display: block;
|
||||
height: 40px;
|
||||
color: #fff;
|
||||
padding: 4px 12px 0;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
|
||||
filter: alpha(opacity=70);
|
||||
opacity: .7;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
#expanddiv a img {
|
||||
margin-bottom: -3px;
|
||||
margin-right: 6px;
|
||||
}
|
||||
#expanddiv a:hover, #expanddiv a:focus, #expanddiv a:active {
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
|
||||
filter: alpha(opacity=100);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
|
||||
/* VARIOUS REUSABLE SELECTORS */
|
||||
.hidden { display:none; }
|
||||
.bold { font-weight:bold; }
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
|
|
@ -0,0 +1,51 @@
|
|||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
enable-background="new 0 0 595.275 311.111"
|
||||
xml:space="preserve"
|
||||
height="32"
|
||||
width="60"
|
||||
version="1.1"
|
||||
y="0px"
|
||||
x="0px"
|
||||
viewBox="0 0 60.001066 32"
|
||||
id="svg2"
|
||||
inkscape:version="0.48.4 r9939"
|
||||
sodipodi:docname="logo-icon.svg"><metadata
|
||||
id="metadata28"><rdf:RDF><cc:Work
|
||||
rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" /></cc:Work></rdf:RDF></metadata><defs
|
||||
id="defs26" /><sodipodi:namedview
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1"
|
||||
objecttolerance="10"
|
||||
gridtolerance="10"
|
||||
guidetolerance="10"
|
||||
inkscape:pageopacity="0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:window-width="1920"
|
||||
inkscape:window-height="1002"
|
||||
id="namedview24"
|
||||
showgrid="false"
|
||||
inkscape:zoom="5.3370171"
|
||||
inkscape:cx="92.998089"
|
||||
inkscape:cy="17.546808"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="34"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="svg2"
|
||||
fit-margin-top="0"
|
||||
fit-margin-left="0"
|
||||
fit-margin-right="0"
|
||||
fit-margin-bottom="0" /><path
|
||||
inkscape:connector-curvature="0"
|
||||
style="text-indent:0;text-transform:none;block-progression:tb;color:#000000;fill:#ffffff;enable-background:accumulate"
|
||||
d="m 26.799495,-2.8433247e-4 c -4.405596,0 -7.965069,3.55932393247 -7.965069,7.96507263247 0,1.8160141 0.604729,3.4874067 1.624238,4.8258037 2.211704,-2.559892 5.476107,-4.1855106 9.120767,-4.1855106 1.78311,0 3.47404,0.39707 4.99765,1.093249 0.12336,-0.55787 0.18742,-1.138036 0.18742,-1.7335421 0,-4.4056007 -3.55933,-7.96507263247 -7.965075,-7.96507263247 z M 16.398242,3.6853126 c -2.294322,0 -4.138652,1.8599639 -4.138652,4.1542875 0,0.7428413 0.19164,1.4447423 0.530989,2.0459199 1.384467,-0.7810176 2.985128,-1.2337766 4.685276,-1.2337766 0.164073,0 0.322114,0.0059 0.48415,0.01578 -0.01835,-0.232579 -0.03122,-0.465534 -0.03122,-0.7027887 0,-1.2778741 0.277549,-2.4937463 0.76528,-3.5920269 -0.656667,-0.440337 -1.443409,-0.687152 -2.295801,-0.687152 z m 19.646819,2.8580148 c -0.16951,0 -0.33288,0.020716 -0.49977,0.031173 0.0722,0.4551355 0.12493,0.9146904 0.12493,1.3899908 0,0.7395852 -0.094,1.4532752 -0.2655,2.1395898 2.00997,1.112338 3.67919,2.776726 4.779,4.79458 1.1407,-0.593878 2.41324,-0.971464 3.76382,-1.061976 -0.34808,-4.0820746 -3.72989,-7.2932591 -7.90242,-7.2932591 z m -6.46558,2.96732 c -6.164697,0 -11.151006,4.9858156 -11.151006,11.1510016 0,6.164694 4.985816,11.151003 11.151006,11.151003 6.16519,0 11.151,-4.986309 11.151,-11.151003 0,-6.165186 -4.98631,-11.1510016 -11.151,-11.1510016 z m -12.103478,0.04676 c -4.782694,0 -8.652175,3.8694326 -8.652175,8.6521756 0,2.815496 1.341453,5.30791 3.420225,6.887311 0.876365,-1.690285 2.636541,-2.842379 4.66964,-2.842379 0.245725,0 0.481581,0.02979 0.718422,0.06255 -0.07434,-0.540903 -0.109323,-1.094236 -0.109323,-1.655461 0,-2.683155 0.873405,-5.164373 2.358247,-7.168465 -0.888843,-1.112195 -1.524893,-2.448569 -1.796035,-3.9044096 -0.200939,-0.01381 -0.404575,-0.03117 -0.60907,-0.03117 z m 27.112218,5.1540156 c -1.45224,0 -2.81263,0.370769 -4.01371,0.99953 0.68202,1.51069 1.06198,3.186868 1.06198,4.950794 0,3.302733 -1.32789,6.301818 -3.48272,8.480523 1.583,1.757466 3.87979,2.858015 6.4345,2.858015 4.7827,0 8.65218,-3.869384 8.65218,-8.652175 0,-4.782693 -3.86943,-8.636391 -8.65218,-8.636391 z M 7.980856,15.851581 C 3.574615,15.851088 0,19.394627 0,23.800375 c 0,4.405749 3.574812,7.980363 7.980363,7.980363 1.676867,0 3.230273,-0.522455 4.513474,-1.405577 -0.530249,-0.823933 -0.843366,-1.809011 -0.843366,-2.858015 0,-0.544455 0.08034,-1.06755 0.234261,-1.561742 -2.402296,-1.736108 -3.96685,-4.561272 -3.96685,-7.746067 0,-0.809233 0.106642,-1.591732 0.296737,-2.342663 -0.0789,-0.002 -0.154783,-0.01578 -0.234266,-0.01578 z m 46.836965,6.840451 c -0.23502,0 -0.46245,0.02683 -0.68715,0.06255 0.0124,0.198664 0.0156,0.391684 0.0156,0.593484 0,2.540309 -1.00234,4.846027 -2.62377,6.559297 0.79769,0.927614 1.96937,1.514883 3.29533,1.514883 2.41517,0 4.3729,-1.94209 4.3729,-4.357311 0,-2.41517 -1.95773,-4.372897 -4.3729,-4.372897 z m -37.903634,0.468513 c -2.415074,0 -4.357313,1.942239 -4.357313,4.357311 0,2.415072 1.942239,4.372898 4.357313,4.372898 1.85118,0 3.422493,-1.155103 4.060565,-2.779933 -1.556954,-1.585764 -2.675951,-3.608748 -3.170341,-5.85641 -0.289328,-0.05978 -0.582977,-0.09372 -0.890224,-0.09372 z"
|
||||
id="path6" /></svg>
|
||||
|
After Width: | Height: | Size: 4.8 KiB |
|
|
@ -533,7 +533,6 @@ var OC={
|
|||
*/
|
||||
registerMenu: function($toggle, $menuEl) {
|
||||
$menuEl.addClass('menu');
|
||||
$toggle.addClass('menutoggle');
|
||||
$toggle.on('click.menu', function(event) {
|
||||
if ($menuEl.is(OC._currentMenu)) {
|
||||
$menuEl.slideUp(OC.menuSpeed);
|
||||
|
|
@ -1111,45 +1110,27 @@ function initCore() {
|
|||
* If the screen is bigger, the main menu is not a toggle any more.
|
||||
*/
|
||||
function setupMainMenu() {
|
||||
// toggle the navigation on mobile
|
||||
if (!OC._matchMedia) {
|
||||
return;
|
||||
}
|
||||
var mq = OC._matchMedia('(max-width: 768px)');
|
||||
var lastMatch = mq.matches;
|
||||
var $toggle = $('#header #owncloud');
|
||||
// toggle the navigation
|
||||
var $toggle = $('#header .menutoggle');
|
||||
var $navigation = $('#navigation');
|
||||
|
||||
function updateMainMenu() {
|
||||
// mobile mode ?
|
||||
if (lastMatch && !$toggle.hasClass('menutoggle')) {
|
||||
// init the menu
|
||||
OC.registerMenu($toggle, $navigation);
|
||||
$toggle.data('oldhref', $toggle.attr('href'));
|
||||
$toggle.attr('href', '#');
|
||||
$navigation.hide();
|
||||
}
|
||||
else {
|
||||
OC.unregisterMenu($toggle, $navigation);
|
||||
$toggle.attr('href', $toggle.data('oldhref'));
|
||||
$navigation.show();
|
||||
}
|
||||
}
|
||||
// init the menu
|
||||
OC.registerMenu($toggle, $navigation);
|
||||
$toggle.data('oldhref', $toggle.attr('href'));
|
||||
$toggle.attr('href', '#');
|
||||
$navigation.hide();
|
||||
|
||||
updateMainMenu();
|
||||
|
||||
// TODO: debounce this
|
||||
$(window).resize(function() {
|
||||
if (lastMatch !== mq.matches) {
|
||||
lastMatch = mq.matches;
|
||||
updateMainMenu();
|
||||
// show loading feedback
|
||||
$navigation.delegate('a', 'click', function(event) {
|
||||
var $app = $(event.target);
|
||||
if(!$app.is('a')) {
|
||||
$app = $app.closest('a');
|
||||
}
|
||||
$app.addClass('app-loading');
|
||||
});
|
||||
}
|
||||
|
||||
if (window.matchMedia) {
|
||||
setupMainMenu();
|
||||
}
|
||||
setupMainMenu();
|
||||
}
|
||||
|
||||
$(document).ready(initCore);
|
||||
|
|
|
|||
|
|
@ -356,62 +356,28 @@ describe('Core base tests', function() {
|
|||
});
|
||||
});
|
||||
describe('Main menu mobile toggle', function() {
|
||||
var oldMatchMedia;
|
||||
var clock;
|
||||
var $toggle;
|
||||
var $navigation;
|
||||
var clock;
|
||||
|
||||
beforeEach(function() {
|
||||
clock = sinon.useFakeTimers();
|
||||
oldMatchMedia = OC._matchMedia;
|
||||
// a separate method was needed because window.matchMedia
|
||||
// cannot be stubbed due to a bug in PhantomJS:
|
||||
// https://github.com/ariya/phantomjs/issues/12069
|
||||
OC._matchMedia = sinon.stub();
|
||||
$('#testArea').append('<div id="header">' +
|
||||
'<a id="owncloud" href="#"></a>' +
|
||||
'<a class="menutoggle" href="#"></a>' +
|
||||
'</div>' +
|
||||
'<div id="navigation"></div>');
|
||||
$toggle = $('#owncloud');
|
||||
$toggle = $('#header').find('.menutoggle');
|
||||
$navigation = $('#navigation');
|
||||
});
|
||||
|
||||
afterEach(function() {
|
||||
OC._matchMedia = oldMatchMedia;
|
||||
clock.restore();
|
||||
});
|
||||
it('Sets up menu toggle in mobile mode', function() {
|
||||
OC._matchMedia.returns({matches: true});
|
||||
it('Sets up menu toggle', function() {
|
||||
window.initCore();
|
||||
expect($toggle.hasClass('menutoggle')).toEqual(true);
|
||||
expect($navigation.hasClass('menu')).toEqual(true);
|
||||
});
|
||||
it('Does not set up menu toggle in desktop mode', function() {
|
||||
OC._matchMedia.returns({matches: false});
|
||||
window.initCore();
|
||||
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
||||
expect($navigation.hasClass('menu')).toEqual(false);
|
||||
});
|
||||
it('Switches on menu toggle when mobile mode changes', function() {
|
||||
var mq = {matches: false};
|
||||
OC._matchMedia.returns(mq);
|
||||
window.initCore();
|
||||
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
||||
mq.matches = true;
|
||||
$(window).trigger('resize');
|
||||
expect($toggle.hasClass('menutoggle')).toEqual(true);
|
||||
});
|
||||
it('Switches off menu toggle when mobile mode changes', function() {
|
||||
var mq = {matches: true};
|
||||
OC._matchMedia.returns(mq);
|
||||
window.initCore();
|
||||
expect($toggle.hasClass('menutoggle')).toEqual(true);
|
||||
mq.matches = false;
|
||||
$(window).trigger('resize');
|
||||
expect($toggle.hasClass('menutoggle')).toEqual(false);
|
||||
});
|
||||
it('Clicking menu toggle toggles navigation in mobile mode', function() {
|
||||
OC._matchMedia.returns({matches: true});
|
||||
it('Clicking menu toggle toggles navigation in', function() {
|
||||
window.initCore();
|
||||
$navigation.hide(); // normally done through media query triggered CSS
|
||||
expect($navigation.is(':visible')).toEqual(false);
|
||||
|
|
@ -422,49 +388,6 @@ describe('Core base tests', function() {
|
|||
clock.tick(1 * 1000);
|
||||
expect($navigation.is(':visible')).toEqual(false);
|
||||
});
|
||||
it('Clicking menu toggle does not toggle navigation in desktop mode', function() {
|
||||
OC._matchMedia.returns({matches: false});
|
||||
window.initCore();
|
||||
expect($navigation.is(':visible')).toEqual(true);
|
||||
$toggle.click();
|
||||
expect($navigation.is(':visible')).toEqual(true);
|
||||
});
|
||||
it('Switching to mobile mode hides navigation', function() {
|
||||
var mq = {matches: false};
|
||||
OC._matchMedia.returns(mq);
|
||||
window.initCore();
|
||||
expect($navigation.is(':visible')).toEqual(true);
|
||||
mq.matches = true;
|
||||
$(window).trigger('resize');
|
||||
expect($navigation.is(':visible')).toEqual(false);
|
||||
});
|
||||
it('Switching to desktop mode shows navigation', function() {
|
||||
var mq = {matches: true};
|
||||
OC._matchMedia.returns(mq);
|
||||
window.initCore();
|
||||
expect($navigation.is(':visible')).toEqual(false);
|
||||
mq.matches = false;
|
||||
$(window).trigger('resize');
|
||||
expect($navigation.is(':visible')).toEqual(true);
|
||||
});
|
||||
it('Switch to desktop with opened menu then back to mobile resets toggle', function() {
|
||||
var mq = {matches: true};
|
||||
OC._matchMedia.returns(mq);
|
||||
window.initCore();
|
||||
expect($navigation.is(':visible')).toEqual(false);
|
||||
$toggle.click();
|
||||
clock.tick(1 * 1000);
|
||||
expect($navigation.is(':visible')).toEqual(true);
|
||||
mq.matches = false;
|
||||
$(window).trigger('resize');
|
||||
expect($navigation.is(':visible')).toEqual(true);
|
||||
mq.matches = true;
|
||||
$(window).trigger('resize');
|
||||
expect($navigation.is(':visible')).toEqual(false);
|
||||
$toggle.click();
|
||||
clock.tick(1 * 1000);
|
||||
expect($navigation.is(':visible')).toEqual(true);
|
||||
});
|
||||
});
|
||||
describe('SVG extension replacement', function() {
|
||||
var svgSupportStub;
|
||||
|
|
|
|||
|
|
@ -46,7 +46,13 @@
|
|||
</div>
|
||||
<header><div id="header">
|
||||
<a href="<?php print_unescaped(link_to('', 'index.php')); ?>" title="" id="owncloud">
|
||||
<div class="logo-wide svg"></div>
|
||||
<div class="logo-icon svg"></div>
|
||||
</a>
|
||||
<a href="#" class="menutoggle">
|
||||
<div class="header-appname">
|
||||
<?php p(!empty($_['application'])?$_['application']:'Apps'); ?>
|
||||
</div>
|
||||
<div class="icon-caret"></div>
|
||||
</a>
|
||||
<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
|
||||
<div id="settings" class="svg">
|
||||
|
|
@ -87,12 +93,13 @@
|
|||
|
||||
<nav><div id="navigation">
|
||||
<div id="apps" class="svg">
|
||||
<ul class="wrapper"><!-- for sticky footer of apps management -->
|
||||
<ul>
|
||||
<?php foreach($_['navigation'] as $entry): ?>
|
||||
<li data-id="<?php p($entry['id']); ?>">
|
||||
<a href="<?php print_unescaped($entry['href']); ?>" title=""
|
||||
<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
|
||||
<img class="icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
|
||||
<img class="app-icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>"/>
|
||||
<div class="icon-loading-dark" style="display:none;"></div>
|
||||
<span>
|
||||
<?php p($entry['name']); ?>
|
||||
</span>
|
||||
|
|
@ -100,25 +107,20 @@
|
|||
</li>
|
||||
<?php endforeach; ?>
|
||||
|
||||
<!-- show "More apps" link to app administration directly in app navigation, as last entry -->
|
||||
<?php if(OC_User::isAdminUser(OC_User::getUser())): ?>
|
||||
<li class="push"></li><!-- for sticky footer of apps management -->
|
||||
<?php endif; ?>
|
||||
</ul>
|
||||
|
||||
<!-- show "More apps" link to app administration directly in app navigation, as sticky footer -->
|
||||
<?php if(OC_User::isAdminUser(OC_User::getUser())): ?>
|
||||
<ul id="apps-management">
|
||||
<li>
|
||||
<li id="apps-management">
|
||||
<a href="<?php print_unescaped(OC_Helper::linkToRoute('settings_apps').'?installed'); ?>" title=""
|
||||
<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
|
||||
<img class="icon svg" alt="" src="<?php print_unescaped(OC_Helper::imagePath('settings', 'apps.svg')); ?>"/>
|
||||
<img class="app-icon svg" alt="" src="<?php print_unescaped(OC_Helper::imagePath('settings', 'apps.svg')); ?>"/>
|
||||
<span>
|
||||
<?php p($l->t('Apps')); ?>
|
||||
</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
<?php endif; ?>
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
</div></nav>
|
||||
|
||||
|
|
|
|||
|
|
@ -344,6 +344,7 @@ class OC {
|
|||
}
|
||||
|
||||
OC_Util::addStyle("styles");
|
||||
OC_Util::addStyle("header");
|
||||
OC_Util::addStyle("mobile");
|
||||
OC_Util::addStyle("icons");
|
||||
OC_Util::addStyle("fonts");
|
||||
|
|
|
|||
|
|
@ -7,7 +7,10 @@ input#openid, input#webdav { width:20em; }
|
|||
|
||||
#user-controls {
|
||||
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
||||
position: fixed; right: 0; left:380px; height: 44px;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
left: 230px;
|
||||
height: 44px;
|
||||
padding: 0; margin: 0;
|
||||
background: #eee; border-bottom: 1px solid #e7e7e7;
|
||||
z-index: 50;
|
||||
|
|
|
|||
|
|
@ -232,7 +232,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
|
|||
if(response.status === 'success'){
|
||||
var navIds=response.nav_ids;
|
||||
for(var i=0; i< navIds.length; i++){
|
||||
$('#apps .wrapper').children('li[data-id="'+navIds[i]+'"]').remove();
|
||||
$('#apps ul').children('li[data-id="'+navIds[i]+'"]').remove();
|
||||
}
|
||||
}
|
||||
});
|
||||
|
|
@ -243,7 +243,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
|
|||
var navEntries=response.nav_entries;
|
||||
for(var i=0; i< navEntries.length; i++){
|
||||
var entry = navEntries[i];
|
||||
var container = $('#apps .wrapper');
|
||||
var container = $('#apps ul');
|
||||
|
||||
if(container.children('li[data-id="'+entry.id+'"]').length === 0){
|
||||
var li=$('<li></li>');
|
||||
|
|
@ -257,8 +257,9 @@ OC.Settings.Apps = OC.Settings.Apps || {
|
|||
li.append(a);
|
||||
|
||||
// append the new app as last item in the list
|
||||
// (.push is from sticky footer)
|
||||
$('#apps .wrapper .push').before(li);
|
||||
// which is the "add apps" entry with the id
|
||||
// #apps-management
|
||||
$('#apps-management').before(li);
|
||||
|
||||
// scroll the app navigation down
|
||||
// so the newly added app is seen
|
||||
|
|
@ -268,11 +269,12 @@ OC.Settings.Apps = OC.Settings.Apps || {
|
|||
|
||||
// draw attention to the newly added app entry
|
||||
// by flashing it twice
|
||||
container.children('li[data-id="' + entry.id + '"]')
|
||||
.animate({opacity: 0.3})
|
||||
$('#header .menutoggle')
|
||||
.animate({opacity: 0.5})
|
||||
.animate({opacity: 1})
|
||||
.animate({opacity: 0.3})
|
||||
.animate({opacity: 1});
|
||||
.animate({opacity: 0.5})
|
||||
.animate({opacity: 1})
|
||||
.animate({opacity: 0.75});
|
||||
|
||||
if (!SVGSupport() && entry.icon.match(/\.svg$/i)) {
|
||||
$(img).addClass('svg');
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
<li id="newgroup-form">
|
||||
<form>
|
||||
<input type="text" id="newgroupname" placeholder="<?php p($l->t('Group')); ?>..." />
|
||||
<input type="submit" class="button" value="<?php p($l->t('Add Group'))?>" />
|
||||
<input type="submit" class="button icon-add" value="" />
|
||||
</form>
|
||||
</li>
|
||||
<!-- Everyone -->
|
||||
|
|
|
|||
Loading…
Reference in New Issue