From 095197d1a772e2fd3590818eaad0d51ad013959c Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Tue, 17 Mar 2015 13:47:54 +0100 Subject: [PATCH 01/14] popover style for apps and user dropdown menus --- core/css/header.css | 54 +++++++++++++++++++++++++++++++-------------- core/js/js.js | 12 +++++----- 2 files changed, 43 insertions(+), 23 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index c2d485de32..f0f8b3a97f 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -139,19 +139,39 @@ #navigation { position: fixed; - top: 45px; + top: 55px; + left: 10px; 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); + background-color: rgba(0, 0, 0, .97); + /*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/ + border-radius: 5px; display: none; - overflow-y: auto; - overflow-x: hidden; + /*overflow-y: auto; + overflow-x: hidden;*/ z-index: 2000; } +/* arrow look */ +#navigation:after, #expanddiv:after { + bottom: 100%; + left: 47%; + border: solid transparent; + content: " "; + height: 0; + width: 0; + position: absolute; + pointer-events: none; + border-color: rgba(0, 0, 0, 0); + border-bottom-color: rgba(0, 0, 0, .97); + border-width: 10px; + margin-left: -10px; +} +#expanddiv:after { + left: 75%; +} + #navigation, #navigation * { -moz-box-sizing:border-box; box-sizing:border-box; @@ -182,15 +202,15 @@ /* icon opacity and hover effect */ #navigation a img, #navigation a span { - /* 50% opacity when inactive */ - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; - opacity: .5; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + opacity: .7; } - #navigation a:hover img, #navigation a:focus img, - #navigation a:hover span, #navigation a:focus span, + #navigation a:hover img, + #navigation a:focus img, + #navigation a:hover span, + #navigation a:focus span, #navigation a.active img, #navigation a.active span { - /* full opacity for the active app or when hovered/focused */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; opacity: 1; } @@ -289,13 +309,13 @@ } #expanddiv { position: absolute; - right: 0; - top: 45px; + right: 10px; + top: 55px; z-index: 2000; display: none; - background-color: #383c43; - border-bottom-left-radius: 7px; - box-shadow: 0 0 7px rgb(29,45,68); + background-color: rgba(0, 0, 0, .97); + /*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/ + border-radius: 5px; -moz-box-sizing: border-box; box-sizing: border-box; } #expanddiv a { diff --git a/core/js/js.js b/core/js/js.js index 00adcc514b..378af83d09 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -477,7 +477,7 @@ var OC={ $menuEl.addClass('menu'); $toggle.on('click.menu', function(event) { if ($menuEl.is(OC._currentMenu)) { - $menuEl.slideUp(OC.menuSpeed); + $menuEl.hide(); OC._currentMenu = null; OC._currentMenuToggle = null; return false; @@ -487,7 +487,7 @@ var OC={ // close it OC._currentMenu.hide(); } - $menuEl.slideToggle(OC.menuSpeed); + $menuEl.toggle(); OC._currentMenu = $menuEl; OC._currentMenuToggle = $toggle; return false; @@ -500,7 +500,7 @@ var OC={ unregisterMenu: function($toggle, $menuEl) { // close menu if opened if ($menuEl.is(OC._currentMenu)) { - $menuEl.slideUp(OC.menuSpeed); + $menuEl.hide(); OC._currentMenu = null; OC._currentMenuToggle = null; } @@ -1128,7 +1128,7 @@ function initCore() { } }); $('#settings #expand').click(function(event) { - $('#settings #expanddiv').slideToggle(OC.menuSpeed); + $('#settings #expanddiv').toggle(); event.stopPropagation(); }); $('#settings #expanddiv').click(function(event){ @@ -1136,7 +1136,7 @@ function initCore() { }); //hide the user menu when clicking outside it $(document).click(function(){ - $('#settings #expanddiv').slideUp(OC.menuSpeed); + $('#settings #expanddiv').hide(); }); // all the tipsy stuff needs to be here (in reverse order) to work @@ -1159,7 +1159,7 @@ function initCore() { return false; } if (OC._currentMenu) { - OC._currentMenu.slideUp(OC.menuSpeed); + OC._currentMenu.hide(); } OC._currentMenu = null; OC._currentMenuToggle = null; From ad596a0198c3ac1e5a295a0c16c54c41201ef95a Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 25 Mar 2015 17:39:50 +0100 Subject: [PATCH 02/14] further adjustments of header and dropdown styles --- core/css/header.css | 18 +++++++++++------- core/css/mobile.css | 8 ++++++++ core/css/styles.css | 13 ++++++++++--- 3 files changed, 29 insertions(+), 10 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index f0f8b3a97f..56d023f96e 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -139,15 +139,17 @@ #navigation { position: fixed; - top: 55px; + top: 45px; left: 10px; width: 265px; max-height: 85%; margin-top: 0; padding-bottom: 10px; background-color: rgba(0, 0, 0, .97); - /*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/ - border-radius: 5px; + box-shadow: 0 1px 10px rgba(50, 50, 50, .7); + border-radius: 3px; + border-top-left-radius: 0; + border-top-right-radius: 0; display: none; /*overflow-y: auto; overflow-x: hidden;*/ @@ -285,7 +287,7 @@ } #expand { display: block; - padding: 7px 12px 6px 7px; + padding: 7px 30px 6px 22px; cursor: pointer; } #expand * { @@ -310,12 +312,14 @@ #expanddiv { position: absolute; right: 10px; - top: 55px; + top: 45px; z-index: 2000; display: none; background-color: rgba(0, 0, 0, .97); - /*box-shadow: 0 0 7px rgba(30, 30, 30, .97);*/ - border-radius: 5px; + box-shadow: 0 1px 10px rgba(50, 50, 50, .7); + border-radius: 3px; + border-top-left-radius: 0; + border-top-right-radius: 0; -moz-box-sizing: border-box; box-sizing: border-box; } #expanddiv a { diff --git a/core/css/mobile.css b/core/css/mobile.css index 892612fc06..874c42b92e 100644 --- a/core/css/mobile.css +++ b/core/css/mobile.css @@ -39,6 +39,8 @@ -moz-transition: all 100ms; -o-transition: all 100ms; transition: all 100ms; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; + opacity: .7; } .searchbox input[type="search"]:focus, .searchbox input[type="search"]:active { @@ -47,12 +49,18 @@ cursor: text; background-color: #fff; background-image: url('../img/actions/search.svg'); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; } /* do not show display name on mobile when profile picture is present */ #header .avatardiv.avatardiv-shown + #expandDisplayName { display: none; } +#header #expand { + display: block; + padding: 7px 30px 6px 7px; +} /* do not show update notification on mobile */ #update-notification { diff --git a/core/css/styles.css b/core/css/styles.css index 12b6bbe9ef..c2d8a8f6eb 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -240,14 +240,21 @@ textarea:disabled { .searchbox input[type="search"] { position: relative; font-size: 1.2em; + padding: 3px; padding-left: 1.5em; background: #fff url('../img/actions/search.svg') no-repeat .5em center; border: 0; - border-radius: 2em; + border-radius: 3px; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; + opacity: .3; + margin-top: 9px; + float: right; +} +.searchbox input[type="search"]:hover, +.searchbox input[type="search"]:focus, +.searchbox input[type="search"]:active { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; opacity: .7; - margin-top: 6px; - float: right; } input[type="submit"].enabled { From 70a4df14186f94480b686bcc15ac250f0237559e Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 25 Mar 2015 18:01:14 +0100 Subject: [PATCH 03/14] more small fixes in header --- core/css/header.css | 18 ++++++++++-------- core/css/styles.css | 2 +- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 56d023f96e..08a1f30c8d 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -158,7 +158,6 @@ /* arrow look */ #navigation:after, #expanddiv:after { bottom: 100%; - left: 47%; border: solid transparent; content: " "; height: 0; @@ -170,8 +169,11 @@ border-width: 10px; margin-left: -10px; } +#navigation:after { + left: 47%; +} #expanddiv:after { - left: 75%; + right: 15px; } #navigation, #navigation * { @@ -298,16 +300,16 @@ #expand:active { color: #fff; } -#expand img { - -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; +#expand img { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; opacity: .7; margin-bottom: -2px; } -#expand:hover img, -#expand:focus img, -#expand:active img { +#expand:hover img, +#expand:focus img, +#expand:active img { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; - opacity:1; + opacity: 1; } #expanddiv { position: absolute; diff --git a/core/css/styles.css b/core/css/styles.css index c2d8a8f6eb..c800822286 100644 --- a/core/css/styles.css +++ b/core/css/styles.css @@ -241,7 +241,7 @@ textarea:disabled { position: relative; font-size: 1.2em; padding: 3px; - padding-left: 1.5em; + padding-left: 28px; background: #fff url('../img/actions/search.svg') no-repeat .5em center; border: 0; border-radius: 3px; From 4546a33d58fe2d785083147ce80f497dcb983187 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Wed, 25 Mar 2015 18:04:31 +0100 Subject: [PATCH 04/14] adjust share dropdown border radius to 3px --- core/css/share.css | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/core/css/share.css b/core/css/share.css index 94811100fc..448f0bac23 100644 --- a/core/css/share.css +++ b/core/css/share.css @@ -3,17 +3,17 @@ See the COPYING-README file. */ #dropdown { - background:#eee; - border-bottom-left-radius: 5px; - border-bottom-right-radius: 5px; - box-shadow:0 1px 1px #777; - display:block; + background: #eee; + border-bottom-left-radius: 3px; + border-bottom-right-radius: 3px; + box-shadow: 0 2px 3px rgba(50, 50, 50, .4); + display: block; margin-right: 0; - position:absolute; - right:0; - width:420px; - z-index:500; - padding:16px; + position: absolute; + right: 0; + width: 420px; + z-index: 500; + padding: 16px; } @media only screen and (min-width: 768px) and (max-width: 990px) { From dd7eb4c7c30e5f3bea1eae9506f414d59f6d5fc6 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 26 Mar 2015 00:35:47 +0100 Subject: [PATCH 05/14] reduce logo size a bit for a better look --- core/css/header.css | 2 +- core/img/logo-icon.png | Bin 1370 -> 1197 bytes core/img/logo-icon.svg | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 08a1f30c8d..5a8d092043 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -272,7 +272,7 @@ #header .avatardiv { float: left; display: inline-block; - margin-right: 5px; + margin-right: 8px; cursor: pointer; height: 32px; width: 32px; diff --git a/core/img/logo-icon.png b/core/img/logo-icon.png index 4f494d6121f43896829eba885a1e8e097b5e78c5..6874c83673fdf0810515fce0c1bd0fd69bc81209 100644 GIT binary patch delta 1102 zcmV-U1hMZrK+R%rjlU+`e^t7a2rSra|b1GoViBeO6G)V+ zEpQF+9q<fVrGLOgM+v1Hf*TvXJ@UZ=M^4}XL6SQBd`JtC>QXl?#U(!=ii zc1iOkZ7i{t7if}ng`|%>b!$$gb^KM}{*<~0ump7gScgSM42OY6;5y*G#Pe2Qc3D;y zGsri0Q(*Mol~gC`pNNqzrdLwEELsZelr*B+BR&kvy6308Q(ztz5mU?TqYYSr?dV#7 ziNIXoM}I7Nb^w2tqd03;pNWOq#lSnHI}Pvwa0BH#UFdHyw!Xj2z~%RM;8ABwHX=h~ zg8C<>t&;8zgz6$mdol<3K-wj(3dl4`s#S(ikJ-Rn3GBj_ssdfWgh0Da;IhmkF_0<1 zj)2TkV09LyA;)WhHyN0X>#+HkMi($XLVpayfq!F!Pi?EQ4Nw#z!y2)9R?H~iZ)cE? zgV>%sFUA8u2V{nm;Xo8}d_jr2S-=+0^B!!=x;xg02!0@LzwR3(FCoWEovt1NRsp}b z-#dWi*h%eE>}n}3BC^l}oKD<5-85hhupL`QFHDsTWWPg!Y}zbop`=}s7E9_()ZOJW z@_%4ymh^a}Y@4LU#P1`LCaH|9-WsTHz_z7xu|r8R)2{^92inK5p8hLJDca~C?qh%# ze1ajzzliAUde>QTGF#vb`8+~L8lPZ0z*4y;$tLXNmt>w-(iaAaGFsAsKzRKo>GqVm z{gP%#IvN?ONsdTraGx=3l60r%`L`+~)PIix_X5XD$c)2A#V2zKunaq8?F;mkWH+z~ zxD5-}5M97iz)POG4c->Mx8W)ElDz;9a4mLw(~iw~FO~R1;gsb6e@llNL)P*C0169^ U%uYDqKL7v#07*qoM6N<$f<;&rrT_o{ delta 1276 zcmVaoj9Q4gZsjOdDlJ!FEKlA)nxN)v@jqh)DYrl_NmsiB@<58s|$dAu{*UN#9_}$2xC>|i#sSShV}EqK9i5+lsI@vSQWvNt zld(^oRzn>UkGdMU`X#_7U|2@_r-A2cp-2*{HM|ZO1oQ(o1Aj%=-vS=YA*V!mB{o%~ zOdeEY_z++*aD8-7Ua#1 zqJ}>VTvg%v*MGqH;_5IyI%X4g|AH!HwTq&LPpELM1pEwKU0fX+fYF3B_bqT7con#~ z3YisAG>;#M{ofDl26h4`Quxk9biV+<1D6v#XE0C?bOXA^=(_@s5bA*YfprD-ZG)nQ zuZVsZ5sV%Sj3n&(L7-0={g=Rdz*0gcXo%={5ek`RV1F9HwMSIAU;l`AY;?csQAH6j zQ{ASXjTI!b)zz`{-_-lmq3Va~?u0_-fclAgi#kT#nLxK$?b;CqOcACl)TIfEtx~5% z|2L|=)yLHn3H0SCsq@vo>PHDQ)Bg>_d#bxql%J|Tp$=EqXEeARP3k!HoeFCUbL!k7 zhQE

3=n9XLVCPTial-dZoIx?0REPovW_Zrvhs-(9I$QqZf+CofzH)UL*v@wZP}V zUZ6K2JM1egIm6SrRJ~ArKf^9h~FxyhmML#JYCyqdGE$rlh{2cC(=2J=8^ILVr)Imw9g5O1gOu^-v~r@}ZAy-}Oq^ zYM2A08XhlM>w%4gIy{b(ga#z7yxmKv#CjKg?~>5~Y{)=&Eg54=+?eNqQ59%<0)GH| zQe-tzU4zmd#*;me%>`~vBWf{x5-_hFx}m`O6j?i{{NOqQqkuyhY3qPT(}-FOpAj)6 zVSgs+uGX30?zO;P@^yWwp4ZZ(G^EhYB1}kk0@uW@A0`YWRuS6BT1{;mX&Zam!$3m3 z8A;Hw2{?NWMHJI^HS zv!rgQ9QPWEg|+HU>cO)0I}9CEN8+fVyMN1r(}qonqom$uSvqUX=t4_?0fgT9&B&eN zcmP4%Q@TPwA!Gq%gJ}d5EFJMtoJqM>dnAI8GoPV zM8Z%p2~!9Wcn;|^xFnQ-CxIKtP>hse9$`*bX$riDFe5yta$8AosZxsIUWByuQ#&+6 z3GRL!@I@wdTk!+o;mrq55lZH)c#V*{<|eE^_0K=s7Vwh|9Z?c?sFMsMrb;QM$uOyD zk=IFmOg*0BqGt?ar}8Fagt{e#_jOnG&WOIdp@og(ggQ4aH)#;j4Y-+50W}bU+IGUX zt!1=&#Q=g!P9V6@a^PbsmzP}#O+<^#_>}b<;5(9Eje0^RnHU|TW4w)oY;&}XXCUEw m+%dv;y@T<^T7513&*N{~Z3C(_eyei;0000 - + From d7414fbf0d9d5a38966ddfb5b58543bfc59089d2 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 26 Mar 2015 00:36:02 +0100 Subject: [PATCH 06/14] move triangle of apps dropdown to align with app name triangle --- core/js/js.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/core/js/js.js b/core/js/js.js index 378af83d09..1ae776692f 100644 --- a/core/js/js.js +++ b/core/js/js.js @@ -1139,6 +1139,12 @@ function initCore() { $('#settings #expanddiv').hide(); }); + // move triangle of apps dropdown to align with app name triangle + // 68 is the additional offset coming from the logo width + var caretPosition = $('.header-appname + .icon-caret').position().left + 68; + document.styleSheets[2].addRule('#navigation:after', + 'left: '+ caretPosition +'px;'); + // all the tipsy stuff needs to be here (in reverse order) to work $('.displayName .action').tipsy({gravity:'se', fade:true, live:true}); $('.password .action').tipsy({gravity:'se', fade:true, live:true}); From cd88ddddaf8393685cd3c5456b97746cd89363c3 Mon Sep 17 00:00:00 2001 From: Jan-Christoph Borchardt Date: Thu, 26 Mar 2015 10:28:49 +0100 Subject: [PATCH 07/14] fix accessibility of ownCloud logo and navigation entries, fix #15013g --- core/css/header.css | 12 ++++++++++++ core/templates/layout.user.php | 16 ++++++++-------- settings/templates/apps.php | 4 +++- 3 files changed, 23 insertions(+), 9 deletions(-) diff --git a/core/css/header.css b/core/css/header.css index 5a8d092043..6fd30f657b 100644 --- a/core/css/header.css +++ b/core/css/header.css @@ -56,6 +56,17 @@ height: 45px; /* header height */ -moz-box-sizing: border-box; box-sizing: border-box; + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; +} +#owncloud:focus { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; + opacity: .75; +} +#owncloud:hover, +#owncloud:active { + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; + opacity: 1; } #header .logo { @@ -169,6 +180,7 @@ border-width: 10px; margin-left: -10px; } +/* position of dropdown arrow */ #navigation:after { left: 47%; } diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 138545f2cc..87342aca57 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -37,7 +37,7 @@

@@ -108,7 +108,7 @@