From 17b622d3cf9a106557ffa68503c157544c880ae2 Mon Sep 17 00:00:00 2001 From: Shailesh Baldaniya Date: Tue, 21 Apr 2020 07:16:59 +0000 Subject: [PATCH 01/13] feat: Make Sidebar FullScreen For PWA --- .../imports/components/main-content.css | 5 ++- .../imports/components/sidebar/sidebar.css | 15 +++++--- app/ui-utils/client/lib/menu.js | 37 +++++++++++-------- 3 files changed, 35 insertions(+), 22 deletions(-) diff --git a/app/theme/client/imports/components/main-content.css b/app/theme/client/imports/components/main-content.css index bda5cf955e32..e3f1cc686f91 100644 --- a/app/theme/client/imports/components/main-content.css +++ b/app/theme/client/imports/components/main-content.css @@ -2,7 +2,7 @@ position: relative; - z-index: 0; + z-index: 2; display: flex; flex-direction: column; @@ -11,6 +11,9 @@ width: 1vw; height: 100%; + + transition: transform 0.3s; + transform: translate3d(100%, 0, 0); } .messages-container .room-icon { diff --git a/app/theme/client/imports/components/sidebar/sidebar.css b/app/theme/client/imports/components/sidebar/sidebar.css index 6a273c8fa646..6d3b241676d3 100644 --- a/app/theme/client/imports/components/sidebar/sidebar.css +++ b/app/theme/client/imports/components/sidebar/sidebar.css @@ -2,13 +2,13 @@ position: relative; - z-index: 2; + z-index: 0; display: flex; flex-direction: column; flex: 0 0 var(--sidebar-width); - width: var(--sidebar-width); + width: 100%; max-width: var(--sidebar-width); height: 100%; @@ -71,11 +71,13 @@ @media (width < 780px) { .sidebar { position: absolute; + + max-width: none; } .sidebar:not(.sidebar-light) { user-select: none; - transform: translate3d(-100%, 0, 0); + transform: translate3d(0, 0, 0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); touch-action: pan-y; -webkit-user-drag: none; @@ -91,15 +93,16 @@ .sidebar { flex: 0 0 var(--sidebar-small-width); - width: var(--sidebar-small-width); - max-width: var(--sidebar-small-width); + width: 100%; + + max-width: none; &__footer { display: none; } &:not(&--light) { - transform: translate3d(-100%, 0, 0); + transform: translate3d(0, 0, 0); } } diff --git a/app/ui-utils/client/lib/menu.js b/app/ui-utils/client/lib/menu.js index a5f09573039a..ba8397c355c9 100644 --- a/app/ui-utils/client/lib/menu.js +++ b/app/ui-utils/client/lib/menu.js @@ -1,3 +1,4 @@ +import { FlowRouter } from 'meteor/kadira:flow-router'; import { Session } from 'meteor/session'; import { Meteor } from 'meteor/meteor'; import _ from 'underscore'; @@ -116,11 +117,16 @@ export const menu = new class extends EventEmitter { if (diff === undefined) { diff = this.isRtl ? -1 * sideNavW : sideNavW; } - this.sidebarWrap.css('width', '100%'); + this.wrapper.css('overflow', 'hidden'); + + this.sidebarWrap.css('width', '100%'); + this.sidebarWrap.css('z-index', '1'); this.sidebarWrap.css('background-color', '#000'); - this.sidebarWrap.css('opacity', map(Math.abs(diff) / width, 0, 1, -0.1, 0.8).toFixed(2)); - this.isRtl ? this.sidebar.css('transform', `translate3d(${ (sideNavW + diff).toFixed(3) }px, 0 , 0)`) : this.sidebar.css('transform', `translate3d(${ (diff - sideNavW).toFixed(3) }px, 0 , 0)`); + this.sidebarWrap.css('opacity', map(Math.abs(diff) / width, 0, 1, 0.8, -0.1).toFixed(2)); + + // Translate main content + this.isRtl ? this.mainContent.css('transform', `translate3d(${ - diff.toFixed(3) }px, 0 , 0)`) : this.mainContent.css('transform', `translate3d(${ diff.toFixed(3) }px, 0 , 0)`); } touchend() { @@ -154,6 +160,8 @@ export const menu = new class extends EventEmitter { this.sidebar = this.menu; this.sidebarWrap = $('.sidebar-wrap'); this.wrapper = $('.messages-box > .wrapper'); + this.mainContent = $('.main-content'); + const ignore = (fn) => (event) => document.body.clientWidth <= 780 && fn(event); document.body.addEventListener('touchstart', ignore((e) => this.touchstart(e))); @@ -163,21 +171,20 @@ export const menu = new class extends EventEmitter { e.target === this.sidebarWrap[0] && this.isOpen() && this.emit('clickOut', e); })); this.on('close', () => { - this.sidebarWrap.css('width', ''); - // this.sidebarWrap.css('z-index', ''); - this.sidebarWrap.css('background-color', ''); - this.sidebar.css('transform', ''); - this.sidebar.css('box-shadow', ''); - this.sidebar.css('transition', ''); - this.sidebarWrap.css('transition', ''); - this.wrapper && this.wrapper.css('overflow', ''); + // Open main content + this.mainContent.css('transform', 'translate3d( 0, 0 , 0)'); }); this.on('open', ignore(() => { - this.sidebar.css('box-shadow', '0 0 15px 1px rgba(0,0,0,.3)'); - // this.sidebarWrap.css('z-index', '9998'); - this.translate(); + this.sidebarWrap.css('width', ''); + this.sidebarWrap.css('z-index', ''); + this.sidebarWrap.css('background-color', ''); + + // Close main content + this.mainContent.css('transform', 'translate3d( 100%, 0 , 0)'); + FlowRouter.withReplaceState(function() { + FlowRouter.go('/home'); + }); })); - this.mainContent = $('.main-content'); this.list = $('.rooms-list'); this._open = false; From 7c5db4378f3d7ad462ec877c17ba469aabb10c16 Mon Sep 17 00:00:00 2001 From: shubhsherl Date: Wed, 6 May 2020 17:58:39 +0530 Subject: [PATCH 02/13] change the theme color to primary --- client/head.html | 2 ++ public/images/manifest.json | 3 ++- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/client/head.html b/client/head.html index e92d2c10606a..201ad3afac60 100644 --- a/client/head.html +++ b/client/head.html @@ -13,6 +13,8 @@ + + diff --git a/public/images/manifest.json b/public/images/manifest.json index b846cad037e9..3646a280e8dc 100644 --- a/public/images/manifest.json +++ b/public/images/manifest.json @@ -1,7 +1,8 @@ { "name": "Rocket.Chat", "short_name": "Rocket.Chat", - "background_color": "#fff", + "background_color": "#2f343d", + "theme_color": "#2f343d", "icons": [ { "src": "/assets/favicon_192.png", From 740a8962e37855c49a78ca284d44eae843867701 Mon Sep 17 00:00:00 2001 From: shubhsherl Date: Wed, 6 May 2020 18:07:19 +0530 Subject: [PATCH 03/13] change burger button to back --- app/ui/client/views/app/burger.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/ui/client/views/app/burger.html b/app/ui/client/views/app/burger.html index 825dcd4f18c2..f05021230d85 100644 --- a/app/ui/client/views/app/burger.html +++ b/app/ui/client/views/app/burger.html @@ -1,5 +1,5 @@ diff --git a/app/ui-sidenav/client/sidebarHeader.js b/app/ui-sidenav/client/sidebarHeader.js index b748f0367835..027d310029c5 100644 --- a/app/ui-sidenav/client/sidebarHeader.js +++ b/app/ui-sidenav/client/sidebarHeader.js @@ -4,7 +4,7 @@ import { FlowRouter } from 'meteor/kadira:flow-router'; import { Template } from 'meteor/templating'; import { popover, AccountBox, menu, SideNav, modal } from '../../ui-utils'; -import { t } from '../../utils'; +import { t, getUserPreference, handleError, isMobile } from '../../utils'; import { callbacks } from '../../callbacks'; import { settings } from '../../settings'; import { hasAtLeastOnePermission } from '../../authorization'; @@ -20,12 +20,25 @@ const setStatus = (status, statusText) => { }; const showToolbar = new ReactiveVar(false); +let hideHeader = true; +const selectorSearch = '.toolbar__search .rc-input__element'; export const toolbarSearch = { shortcut: false, - show(fromShortcut) { + clear() { + const $inputMessage = $('.js-input-message'); + + if ($inputMessage.length === 0) { + return; + } + + $inputMessage.focus(); + $(selectorSearch).val(''); + }, + show(fromShortcut, header = true) { menu.open(); showToolbar.set(true); + hideHeader = header; this.shortcut = fromShortcut; }, close() { @@ -39,7 +52,7 @@ export const toolbarSearch = { const toolbarButtons = (/* user */) => [{ name: t('Home'), icon: 'home', - condition: () => settings.get('Layout_Show_Home_Button'), + condition: () => !isMobile() && settings.get('Layout_Show_Home_Button'), action: () => { FlowRouter.go('home'); }, @@ -47,13 +60,24 @@ const toolbarButtons = (/* user */) => [{ { name: t('Search'), icon: 'magnifier', + condition: () => !isMobile(), action: () => { toolbarSearch.show(false); }, }, +{ + name: t('Search Input'), + icon: '', + condition: () => isMobile(), + action: () => { + toolbarSearch.show(false, false); + }, + searchBar: true, +}, { name: t('Directory'), icon: 'discover', + condition: () => !isMobile(), action: () => { menu.close(); FlowRouter.go('directory'); @@ -62,6 +86,7 @@ const toolbarButtons = (/* user */) => [{ { name: t('Sort'), icon: 'sort', + condition: () => !isMobile(), hasPopup: true, action: async (e) => { const options = []; @@ -148,7 +173,6 @@ const toolbarButtons = (/* user */) => [{ { name: t('Options'), icon: 'menu', - condition: () => AccountBox.getItems().length || hasAtLeastOnePermission(['manage-emoji', 'manage-oauth-apps', 'manage-outgoing-integrations', 'manage-incoming-integrations', 'manage-own-outgoing-integrations', 'manage-own-incoming-integrations', 'manage-selected-settings', 'manage-sounds', 'view-logs', 'view-privileged-setting', 'view-room-administration', 'view-statistics', 'view-user-administration', 'access-setting-permissions']), hasPopup: true, action: (e) => { let adminOption; @@ -167,6 +191,21 @@ const toolbarButtons = (/* user */) => [{ }; } + const sortOption = { + name: t('Sort'), + icon: 'sort', + type: 'sort-action', + }; + + const directoryOption = { + name: t('Directory'), + icon: 'discover', + action: () => { + menu.close(); + FlowRouter.go('directory'); + }, + }; + const config = { popoverClass: 'sidebar-header', columns: [ @@ -209,6 +248,9 @@ const toolbarButtons = (/* user */) => [{ offsetVertical: e.currentTarget.clientHeight + 10, }; + if (isMobile()) { + config.columns[0].groups[0].items = config.columns[0].groups[0].items.concat([sortOption, directoryOption]); + } popover.open(config); }, }]; @@ -232,6 +274,9 @@ Template.sidebarHeader.helpers({ showToolbar() { return showToolbar.get(); }, + hideHeader() { + return hideHeader; + }, }); Template.sidebarHeader.events({ @@ -241,6 +286,15 @@ Template.sidebarHeader.events({ } return this.action && this.action.apply(this, [e]); }, + 'click #searchBar'() { + toolbarSearch.show(false, false); + }, + 'focus #searchBar'() { + toolbarSearch.show(false, false); + }, + 'blur #searchBar'() { + toolbarSearch.clear(); + }, 'click .sidebar__header .avatar'(e) { if (!(Meteor.userId() == null && settings.get('Accounts_AllowAnonymousRead'))) { const user = Meteor.user(); diff --git a/app/ui-sidenav/client/toolbar.html b/app/ui-sidenav/client/toolbar.html index a2b0ab0596db..bd3be2dd355f 100644 --- a/app/ui-sidenav/client/toolbar.html +++ b/app/ui-sidenav/client/toolbar.html @@ -1,21 +1,9 @@