diff --git a/apps/files/css/files.css b/apps/files/css/files.css
index 36dd6e78ed7a24982e3535b7aa2c7b990efe7ee0..acdeaf17fde1d2cbc5e25e2ce7566d9ceb3c4fda 100644
--- a/apps/files/css/files.css
+++ b/apps/files/css/files.css
@@ -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;
}
diff --git a/core/css/header.css b/core/css/header.css
new file mode 100644
index 0000000000000000000000000000000000000000..83612c674456d51572676097c72f4c6e005a1dd3
--- /dev/null
+++ b/core/css/header.css
@@ -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;
+ }
diff --git a/core/css/mobile.css b/core/css/mobile.css
index 025bee6415a941ff265e82f378bcd5ca7e355e4f..9cea0dddc8f1e0bb1fd8d3bbe36dd8733df2bf3c 100644
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@@ -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;
diff --git a/core/css/styles.css b/core/css/styles.css
index 595b553267488abd010555dd10f60bedcafd6836..6eb09e6e9423889bb0335e6e8ed5e2d1296abbc2 100644
--- a/core/css/styles.css
+++ b/core/css/styles.css
@@ -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; }
diff --git a/core/img/logo-icon.png b/core/img/logo-icon.png
new file mode 100644
index 0000000000000000000000000000000000000000..26ed8b4641637cbc997ba85c6361bee64cdcacef
Binary files /dev/null and b/core/img/logo-icon.png differ
diff --git a/core/img/logo-icon.svg b/core/img/logo-icon.svg
new file mode 100644
index 0000000000000000000000000000000000000000..05b467e87a7da68b316b04a5dc5dbcace0e6355a
--- /dev/null
+++ b/core/img/logo-icon.svg
@@ -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>
\ No newline at end of file
diff --git a/core/js/js.js b/core/js/js.js
index 834916b2e3fc961a85aee911ebb3f0d5aafff9dc..b3cefa83beead1fdbdc23aff977871b065500d66 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -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();
- }
- }
-
- updateMainMenu();
-
- // TODO: debounce this
- $(window).resize(function() {
- if (lastMatch !== mq.matches) {
- lastMatch = mq.matches;
- updateMainMenu();
+ // init the menu
+ OC.registerMenu($toggle, $navigation);
+ $toggle.data('oldhref', $toggle.attr('href'));
+ $toggle.attr('href', '#');
+ $navigation.hide();
+
+ // 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);
diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js
index 37b5ceeec9ecff064b14fa0d185a91e19a456176..3c62b976779bcb27a0b648acb9b7bf52c9441621 100644
--- a/core/js/tests/specs/coreSpec.js
+++ b/core/js/tests/specs/coreSpec.js
@@ -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;
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index d551c53521b8b45fc1b66e76c27c8ae690fa849a..e39bb94ed98750463c12eaf7e526e46bb5057eda 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -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>
diff --git a/lib/base.php b/lib/base.php
index 608fe16dcefbd3d432465e41bff42828af5048e0..7c58619a556ac0d6af92a85f23052b5b90b7b104 100644
--- a/lib/base.php
+++ b/lib/base.php
@@ -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");
diff --git a/settings/css/settings.css b/settings/css/settings.css
index 3a6e40ad361f135979aa115f3c79c24911277f2f..cd81cfb2b3d71e92ccf6191fa30d87872de815b7 100644
--- a/settings/css/settings.css
+++ b/settings/css/settings.css
@@ -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;
diff --git a/settings/js/apps.js b/settings/js/apps.js
index b1c28498266827c537b3ccc6e8630ff8548bab0f..2539982be83c276bd1524643eec1e2f730a65136 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -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');
diff --git a/settings/templates/users/part.grouplist.php b/settings/templates/users/part.grouplist.php
index a903f43f876e815a754b6e0bcea13365322e300d..593c202f2c91f2a38bd6f5576e5fc516cc601e54 100644
--- a/settings/templates/users/part.grouplist.php
+++ b/settings/templates/users/part.grouplist.php
@@ -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 -->