From da28404b3d16f83faf1e0cbeb703c579c1239b17 Mon Sep 17 00:00:00 2001 From: Hadi Nategh Date: Fri, 22 Apr 2016 10:50:05 +0000 Subject: [PATCH] Mobile theme: - Implement application selector toggle in sidemenu - Change applications list style - Restyle top toolbar and reposition avatar --- pixelegg/css/mobile.css | 13 +++-- pixelegg/css/mobile.less | 16 +++--- pixelegg/head_mobile.tpl | 10 +++- pixelegg/images/apps.svg | 99 +++++++++++++++++++++++++++++++++ pixelegg/mobile/app_colors.css | 33 +++++++++++ pixelegg/mobile/app_colors.less | 13 ++++- pixelegg/mobile/fw_mobile.css | 74 ++++++++++++++++++++---- pixelegg/mobile/fw_mobile.less | 23 ++++++-- 8 files changed, 247 insertions(+), 34 deletions(-) create mode 100644 pixelegg/images/apps.svg diff --git a/pixelegg/css/mobile.css b/pixelegg/css/mobile.css index 6b0bb5cb2b..24fa428e82 100644 --- a/pixelegg/css/mobile.css +++ b/pixelegg/css/mobile.css @@ -6038,7 +6038,7 @@ span.egw_tutorial_title { position: absolute; } body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout { - float: right; + display: inline-block; } body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout a#topmenu_logout { background-image: url(../images/logout.png); @@ -6201,14 +6201,16 @@ span.egw_tutorial_title { background-position: center; } body #egw_fw_basecontainer #egw_fw_userinfo { - height: 50px; + height: 60px; z-index: 1000; display: inline-block; - margin-left: 40%; } body #egw_fw_basecontainer #egw_fw_userinfo span.avatar { display: inline-block; float: left; + height: 45px; + width: 45px; + margin-top: 1px; } body #egw_fw_basecontainer #egw_fw_userinfo span.user { display: inline-block; @@ -6645,8 +6647,9 @@ span.egw_tutorial_title { background-image: url(../images/topmenu_items/mobile/menu.png); } body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo, - body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout { - display: none; + body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout, + body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_appsToggle { + display: none !important; } body .sidebar-toggle #egw_fw_sidebar { top: 70px; diff --git a/pixelegg/css/mobile.less b/pixelegg/css/mobile.less index 0eb79b6aa9..f10c06a683 100644 --- a/pixelegg/css/mobile.less +++ b/pixelegg/css/mobile.less @@ -151,7 +151,7 @@ width:300px; position:absolute; .egw_fw_logout { - float:right; + display:inline-block; a#topmenu_logout{ background-image: url(../images/logout.png); background-repeat: no-repeat; @@ -330,13 +330,15 @@ } } #egw_fw_userinfo { - height:50px; + height:60px; z-index:1000; display: inline-block; - margin-left:40%; span.avatar { display: inline-block; float:left; + height: 45px; + width: 45px; + margin-top: 1px; } span.user { display: inline-block; @@ -717,11 +719,9 @@ //ToggleClass .sidebar-toggle{ - #egw_fw_top_toolbar div#egw_fw_menu{ - background-image: url(../images/topmenu_items/mobile/menu.png); - } - #egw_fw_top_toolbar #egw_fw_userinfo,#egw_fw_top_toolbar .egw_fw_logout { - display: none; + #egw_fw_top_toolbar { + div#egw_fw_menu {background-image: url(../images/topmenu_items/mobile/menu.png);} + #egw_fw_userinfo, .egw_fw_logout, #egw_fw_appsToggle {display: none !important;} } #egw_fw_sidebar{ top: 70px; diff --git a/pixelegg/head_mobile.tpl b/pixelegg/head_mobile.tpl index 3ceff05e8d..ace2fe92d5 100644 --- a/pixelegg/head_mobile.tpl +++ b/pixelegg/head_mobile.tpl @@ -34,15 +34,19 @@ +
+ +
+
+ +
-
- -
+
diff --git a/pixelegg/images/apps.svg b/pixelegg/images/apps.svg new file mode 100644 index 0000000000..c141f7e88f --- /dev/null +++ b/pixelegg/images/apps.svg @@ -0,0 +1,99 @@ + + + +image/svg+xml \ No newline at end of file diff --git a/pixelegg/mobile/app_colors.css b/pixelegg/mobile/app_colors.css index 31b94ea2c3..16eea7111f 100644 --- a/pixelegg/mobile/app_colors.css +++ b/pixelegg/mobile/app_colors.css @@ -20,6 +20,9 @@ div[id^="addressbook-"] .dialogHeadbar, form[id^="addressbook-"] .dialogHeadbar { background-color: #333399; } +#addressbook_sidebox_header { + border-left: 6px solid #333399 !important; +} div[id^="admin-"] .plus_button, form[id^="admin-"] .plus_button, div[id^="admin-"] .search.nm-mob-header, @@ -28,6 +31,9 @@ div[id^="admin-"] .dialogHeadbar, form[id^="admin-"] .dialogHeadbar { background-color: #0073ce; } +#admin_sidebox_header { + border-left: 6px solid #0073ce !important; +} div[id^="bookmarks-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="bookmarks-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="bookmarks-"] .plus_button, @@ -38,6 +44,9 @@ div[id^="bookmarks-"] .dialogHeadbar, form[id^="bookmarks-"] .dialogHeadbar { background-color: #db0087; } +#bookmarks_sidebox_header { + border-left: 6px solid #db0087 !important; +} div[id^="calendar-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="calendar-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="calendar-"] .plus_button, @@ -48,6 +57,9 @@ div[id^="calendar-"] .dialogHeadbar, form[id^="calendar-"] .dialogHeadbar { background-color: #cc0033; } +#calendar_sidebox_header { + border-left: 6px solid #cc0033 !important; +} div[id^="filemanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="filemanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="filemanager-"] .plus_button, @@ -58,6 +70,9 @@ div[id^="filemanager-"] .dialogHeadbar, form[id^="filemanager-"] .dialogHeadbar { background-color: #f9d730; } +#filemanager_sidebox_header { + border-left: 6px solid #f9d730 !important; +} div[id^="infolog-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="infolog-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="infolog-"] .plus_button, @@ -68,6 +83,9 @@ div[id^="infolog-"] .dialogHeadbar, form[id^="infolog-"] .dialogHeadbar { background-color: #ffb936; } +#infolog_sidebox_header { + border-left: 6px solid #ffb936 !important; +} div[id^="mail-"] .plus_button, form[id^="mail-"] .plus_button, div[id^="mail-"] .search.nm-mob-header, @@ -76,6 +94,9 @@ div[id^="mail-"] .dialogHeadbar, form[id^="mail-"] .dialogHeadbar { background-color: #47b2d4; } +#mail_sidebox_header { + border-left: 6px solid #47b2d4 !important; +} div[id^="projectmanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="projectmanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="projectmanager-"] .plus_button, @@ -86,6 +107,9 @@ div[id^="projectmanager-"] .dialogHeadbar, form[id^="projectmanager-"] .dialogHeadbar { background-color: #75de27; } +#projectmanager_sidebox_header { + border-left: 6px solid #75de27 !important; +} div[id^="resources-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="resources-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="resources-"] .plus_button, @@ -96,6 +120,9 @@ div[id^="resources-"] .dialogHeadbar, form[id^="resources-"] .dialogHeadbar { background-color: #009966; } +#resources_sidebox_header { + border-left: 6px solid #009966 !important; +} div[id^="timesheet-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="timesheet-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="timesheet-"] .plus_button, @@ -106,6 +133,9 @@ div[id^="timesheet-"] .dialogHeadbar, form[id^="timesheet-"] .dialogHeadbar { background-color: #9d15ea; } +#timesheet_sidebox_header { + border-left: 6px solid #9d15ea !important; +} div[id^="tracker-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="tracker-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="tracker-"] .plus_button, @@ -116,3 +146,6 @@ div[id^="tracker-"] .dialogHeadbar, form[id^="tracker-"] .dialogHeadbar { background-color: #006666; } +#tracker_sidebox_header { + border-left: 6px solid #006666 !important; +} diff --git a/pixelegg/mobile/app_colors.less b/pixelegg/mobile/app_colors.less index 41d80a8bd1..6c14b7f643 100644 --- a/pixelegg/mobile/app_colors.less +++ b/pixelegg/mobile/app_colors.less @@ -30,43 +30,54 @@ div[id^="addressbook-"],form[id^="addressbook-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @addressbook-color;} } +#addressbook_sidebox_header {border-left:6px solid @addressbook-color !important;} // Admin div[id^="admin-"],form[id^="admin-"] { .plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @admin-color;} } +#admin_sidebox_header {border-left:6px solid @admin-color !important;} // Bookmarks div[id^="bookmarks-"],form[id^="bookmarks-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @bookmarks-color;} } +#bookmarks_sidebox_header {border-left:6px solid @bookmarks-color !important;} // Calendar div[id^="calendar-"],form[id^="calendar-"]{ .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @calendar-color;} } +#calendar_sidebox_header {border-left:6px solid @calendar-color !important;} // Filemanager div[id^="filemanager-"],form[id^="filemanager-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @filemanager-color;} } +#filemanager_sidebox_header {border-left:6px solid @filemanager-color !important;} // Infolog div[id^="infolog-"],form[id^="infolog-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @infolog-color;} } +#infolog_sidebox_header {border-left:6px solid @infolog-color !important;} // Mail div[id^="mail-"],form[id^="mail-"] { .plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @mail-color;} } +#mail_sidebox_header {border-left:6px solid @mail-color !important;} // Projectmanager div[id^="projectmanager-"],form[id^="projectmanager-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @projectmanager-color;} } +#projectmanager_sidebox_header {border-left:6px solid @projectmanager-color !important;} // Resources div[id^="resources-"],form[id^="resources-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @resources-color;} } +#resources_sidebox_header {border-left:6px solid @resources-color !important;} // Timesheet div[id^="timesheet-"],form[id^="timesheet-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @timesheet-color;} } +#timesheet_sidebox_header {border-left:6px solid @timesheet-color !important;} // Tracker div[id^="tracker-"],form[id^="tracker-"] { .nm_favorites_div .et2_dropdown button:nth-child(2),.plus_button,.search.nm-mob-header,.dialogHeadbar {background-color: @tracker-color;} -} \ No newline at end of file +} +#tracker_sidebox_header {border-left:6px solid @tracker-color !important;} \ No newline at end of file diff --git a/pixelegg/mobile/fw_mobile.css b/pixelegg/mobile/fw_mobile.css index c2ffb31146..40085b8f81 100644 --- a/pixelegg/mobile/fw_mobile.css +++ b/pixelegg/mobile/fw_mobile.css @@ -4345,7 +4345,7 @@ td.message span.message { } #egw_fw_sidebar #egw_fw_toggler { display: block; - width: 28px; + width: 30px; height: 30px; position: relative; z-index: 1; @@ -4353,7 +4353,6 @@ td.message span.message { margin-top: 0; margin-bottom: -30px; float: right; - margin-right: -15px; } #egw_fw_sidebar #egw_fw_toggler span { background-color: transparent; @@ -4364,6 +4363,7 @@ td.message span.message { backface-visibility: hidden; border-radius: 2px; top: 11px; + left: 10px; } #egw_fw_sidebar #egw_fw_toggler span:before { transition-duration: 0.7s; @@ -4411,6 +4411,7 @@ td.message span.message { transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; + left: 0; } #egw_fw_sidebar #egw_fw_sidemenu.egw_fw_sidebar_toggleOn #egw_fw_toggler span:before, #egw_fw_sidebar #egw_fw_sidemenu.egw_fw_sidebar_toggleOn #egw_fw_toggler span:after { @@ -6048,7 +6049,7 @@ span.egw_tutorial_title { position: absolute; } body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout { - float: right; + display: inline-block; } body #egw_fw_basecontainer #egw_fw_top_toolbar .egw_fw_logout a#topmenu_logout { background-image: url(../images/logout.png); @@ -6211,14 +6212,16 @@ span.egw_tutorial_title { background-position: center; } body #egw_fw_basecontainer #egw_fw_userinfo { - height: 50px; + height: 60px; z-index: 1000; display: inline-block; - margin-left: 40%; } body #egw_fw_basecontainer #egw_fw_userinfo span.avatar { display: inline-block; float: left; + height: 45px; + width: 45px; + margin-top: 1px; } body #egw_fw_basecontainer #egw_fw_userinfo span.user { display: inline-block; @@ -6655,8 +6658,9 @@ span.egw_tutorial_title { background-image: url(../images/topmenu_items/mobile/menu.png); } body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_userinfo, - body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout { - display: none; + body .sidebar-toggle #egw_fw_top_toolbar .egw_fw_logout, + body .sidebar-toggle #egw_fw_top_toolbar #egw_fw_appsToggle { + display: none !important; } body .sidebar-toggle #egw_fw_sidebar { top: 70px; @@ -6767,6 +6771,9 @@ div[id^="addressbook-"] .dialogHeadbar, form[id^="addressbook-"] .dialogHeadbar { background-color: #333399; } +#addressbook_sidebox_header { + border-left: 6px solid #333399 !important; +} div[id^="admin-"] .plus_button, form[id^="admin-"] .plus_button, div[id^="admin-"] .search.nm-mob-header, @@ -6775,6 +6782,9 @@ div[id^="admin-"] .dialogHeadbar, form[id^="admin-"] .dialogHeadbar { background-color: #0073ce; } +#admin_sidebox_header { + border-left: 6px solid #0073ce !important; +} div[id^="bookmarks-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="bookmarks-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="bookmarks-"] .plus_button, @@ -6785,6 +6795,9 @@ div[id^="bookmarks-"] .dialogHeadbar, form[id^="bookmarks-"] .dialogHeadbar { background-color: #db0087; } +#bookmarks_sidebox_header { + border-left: 6px solid #db0087 !important; +} div[id^="calendar-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="calendar-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="calendar-"] .plus_button, @@ -6795,6 +6808,9 @@ div[id^="calendar-"] .dialogHeadbar, form[id^="calendar-"] .dialogHeadbar { background-color: #cc0033; } +#calendar_sidebox_header { + border-left: 6px solid #cc0033 !important; +} div[id^="filemanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="filemanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="filemanager-"] .plus_button, @@ -6805,6 +6821,9 @@ div[id^="filemanager-"] .dialogHeadbar, form[id^="filemanager-"] .dialogHeadbar { background-color: #f9d730; } +#filemanager_sidebox_header { + border-left: 6px solid #f9d730 !important; +} div[id^="infolog-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="infolog-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="infolog-"] .plus_button, @@ -6815,6 +6834,9 @@ div[id^="infolog-"] .dialogHeadbar, form[id^="infolog-"] .dialogHeadbar { background-color: #ffb936; } +#infolog_sidebox_header { + border-left: 6px solid #ffb936 !important; +} div[id^="mail-"] .plus_button, form[id^="mail-"] .plus_button, div[id^="mail-"] .search.nm-mob-header, @@ -6823,6 +6845,9 @@ div[id^="mail-"] .dialogHeadbar, form[id^="mail-"] .dialogHeadbar { background-color: #47b2d4; } +#mail_sidebox_header { + border-left: 6px solid #47b2d4 !important; +} div[id^="projectmanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="projectmanager-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="projectmanager-"] .plus_button, @@ -6833,6 +6858,9 @@ div[id^="projectmanager-"] .dialogHeadbar, form[id^="projectmanager-"] .dialogHeadbar { background-color: #75de27; } +#projectmanager_sidebox_header { + border-left: 6px solid #75de27 !important; +} div[id^="resources-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="resources-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="resources-"] .plus_button, @@ -6843,6 +6871,9 @@ div[id^="resources-"] .dialogHeadbar, form[id^="resources-"] .dialogHeadbar { background-color: #009966; } +#resources_sidebox_header { + border-left: 6px solid #009966 !important; +} div[id^="timesheet-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="timesheet-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="timesheet-"] .plus_button, @@ -6853,6 +6884,9 @@ div[id^="timesheet-"] .dialogHeadbar, form[id^="timesheet-"] .dialogHeadbar { background-color: #9d15ea; } +#timesheet_sidebox_header { + border-left: 6px solid #9d15ea !important; +} div[id^="tracker-"] .nm_favorites_div .et2_dropdown button:nth-child(2), form[id^="tracker-"] .nm_favorites_div .et2_dropdown button:nth-child(2), div[id^="tracker-"] .plus_button, @@ -6863,6 +6897,9 @@ div[id^="tracker-"] .dialogHeadbar, form[id^="tracker-"] .dialogHeadbar { background-color: #006666; } +#tracker_sidebox_header { + border-left: 6px solid #006666 !important; +} /********************************/ /* */ /* MEDIA DEFINITION */ @@ -7151,6 +7188,24 @@ form[id^="tracker-"] .dialogHeadbar { position: absolute; width: 300px; } + body #egw_fw_basecontainer #egw_fw_top_toolbar #egw_fw_userinfo { + float: right; + } + body #egw_fw_basecontainer #egw_fw_top_toolbar #egw_fw_appsToggle { + height: 50px; + z-index: 1000; + display: inline-block; + width: 50px; + float: left; + margin-left: 60px; + background-image: url(../images/apps.svg); + background-size: 24px; + background-repeat: no-repeat; + background-position: center; + } + body #egw_fw_basecontainer #egw_fw_top_toolbar #egw_fw_appsToggle.toggled { + background-image: url(../images/sidebar.svg); + } body #egw_fw_basecontainer #egw_fw_top_toolbar div#egw_fw_topmenu_items { padding-top: 8px; } @@ -7197,10 +7252,7 @@ form[id^="tracker-"] .dialogHeadbar { box-shadow: none; } body #egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_apps > div { - display: inline-block; - } - body #egw_fw_basecontainer .egw_fw_ui_sidemenu_entry_apps > div h1 { - display: none; + margin-bottom: 5px; } body div.dhtmlxMenu_egw_SubLevelArea_Polygon { font-size: medium; diff --git a/pixelegg/mobile/fw_mobile.less b/pixelegg/mobile/fw_mobile.less index fd04483103..0031f95d85 100644 --- a/pixelegg/mobile/fw_mobile.less +++ b/pixelegg/mobile/fw_mobile.less @@ -321,7 +321,22 @@ position:absolute; width:300px; #egw_fw_userinfo { - + float: right; + } + #egw_fw_appsToggle { + height: 50px; + z-index: 1000; + display: inline-block; + width: 50px; + float: left; + margin-left: 60px; + background-image:url(../images/apps.svg); + background-size: 24px; + background-repeat: no-repeat; + background-position: center; + } + #egw_fw_appsToggle.toggled { + background-image:url(../images/sidebar.svg); } div#egw_fw_topmenu_items { padding-top: 8px; @@ -379,11 +394,7 @@ box-shadow: none; } .egw_fw_ui_sidemenu_entry_apps> div{ - display: inline-block; - h1 { - display: none; - } - + margin-bottom: 5px; } }