From 5084e21d1f24e98136845a39a142dd9c46c061f0 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Wed, 14 Apr 2021 18:33:54 +0200 Subject: [PATCH] patch: New right menu on mobile - JS fixed + extended through circle and project pages --- src/index.pug | 4 +-- src/scripts/navigate-event.js | 30 +++++++++++++++++-- src/styles/content/_index.scss | 5 ++-- src/views/page-admin.pug | 2 +- .../partials/circle/page-circle-chat.pug | 17 ++++++----- .../partials/circle/page-circle-edit.pug | 4 ++- .../partials/circle/page-circle-profile.pug | 17 ++++++----- .../partials/project/page-project-chat.pug | 25 +++++++++------- .../partials/project/page-project-edit.pug | 4 ++- .../partials/project/page-project-profile.pug | 25 +++++++++------- 10 files changed, 87 insertions(+), 46 deletions(-) diff --git a/src/index.pug b/src/index.pug index bbcaf98..fd4c073 100644 --- a/src/index.pug +++ b/src/index.pug @@ -99,7 +99,7 @@ html(lang="en") include views/page-messages.pug if component.type == "circles" - .with-sidebar.whitespace-normal + .with-sidebar.whitespace-normal.jsMobileContentSidebarControl hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.circles") hubl-reactivity(bind-user nested-field="circles" target-src="store://user") hubl-reactivity(data-src=`${component.endpoints.get}joinable/` target-src=`${component.endpoints.get}`) @@ -141,7 +141,7 @@ html(lang="en") include views/page-polls.pug if component.type == "projects" - .with-sidebar.whitespace-normal + .with-sidebar.whitespace-normal.jsMobileContentSidebarControl hubl-reactivity(bind-user nested-field='inbox' target-src="store://user.projects") hubl-reactivity(bind-user nested-field="projects" target-src="store://user") hubl-reactivity(data-src=`${component.endpoints.post}joinable/` target-src=`${component.endpoints.get}`) diff --git a/src/scripts/navigate-event.js b/src/scripts/navigate-event.js index 0e9f171..7aa43d9 100644 --- a/src/scripts/navigate-event.js +++ b/src/scripts/navigate-event.js @@ -35,9 +35,9 @@ function openRightMenu() { ); } -const control = document.querySelector('.jsMobileSidebarControl'); -const buttons = control.querySelectorAll('.jsMobileRightMenuButton'); -const rightMenu = control.querySelector('.jsRightMenu'); +const adminControl = document.querySelector('.jsMobileSidebarAdminControl'); +const buttons = adminControl.querySelectorAll('.jsMobileRightMenuButton'); +const rightMenu = adminControl.querySelector('.jsRightMenu'); Array.from(buttons).forEach(button => button.addEventListener("click", () => { @@ -54,6 +54,30 @@ Array.from(buttons).forEach(button => }) ) +const contentControls = Array.from(document.querySelectorAll('.jsMobileContentSidebarControl')); + +contentControls.forEach( + contentControl => { + const contentSidebar = contentControl.querySelector('.jsRightMenu'); + const contentButtons = contentControl.querySelectorAll('.jsMobileRightMenuButton'); + + Array.from(contentButtons).forEach(contentButton => + contentButton.addEventListener('click', () => { + if (contentButton.classList.contains('icon-close')) { + contentButton.classList.remove('icon-close'); + contentButton.classList.add('icon-options-vertical'); + totosidebar.setAttribute('hidden', ''); + } + else { + contentButton.classList.remove('icon-options-vertical'); + contentButton.classList.add('icon-close'); + totosidebar.removeAttribute('hidden'); + }; + }) + ) + } +); + diff --git a/src/styles/content/_index.scss b/src/styles/content/_index.scss index 0a38228..a65f419 100644 --- a/src/styles/content/_index.scss +++ b/src/styles/content/_index.scss @@ -55,7 +55,7 @@ main { vertical-align: middle; } - /*>solid-route { + >solid-route { &[active]>li { background-color: var(--color-heading); @@ -64,7 +64,7 @@ main { &:hover:not([active])>li { background: #E4E4E4; } - }*/ + } } /* Styles use with JS to open/close the sidebar */ @@ -76,6 +76,7 @@ main { top: 101px; right: 3px; height: auto; + z-index: 2999; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.14); } diff --git a/src/views/page-admin.pug b/src/views/page-admin.pug index 8e06f40..81fb335 100644 --- a/src/views/page-admin.pug +++ b/src/views/page-admin.pug @@ -1,4 +1,4 @@ -.with-sidebar.jsMobileSidebarControl.whitespace-normal.bg-color-white.only-on-admin(hidden) +.with-sidebar.jsMobileSidebarAdminControl.whitespace-normal.bg-color-white.only-on-admin(hidden) .scrollbar-content.views-container.sidebar-is-closed for component of components if component.route diff --git a/src/views/partials/circle/page-circle-chat.pug b/src/views/partials/circle/page-circle-chat.pug index 16a1ebf..8d55b39 100644 --- a/src/views/partials/circle/page-circle-chat.pug +++ b/src/views/partials/circle/page-circle-chat.pug @@ -1,13 +1,16 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal - solid-display.text-xxlarge.text-letter-spacing-large( - bind-resources - fields='name, dash, subtitle' + div.segment.full.sm-three-quarter + solid-display.text-xxlarge.text-letter-spacing-large( + bind-resources + fields='name, dash, subtitle' - value-dash=' - ' + value-dash=' - ' - class-name='text-color-heading text-bold' - class-dash='text-color-heading text-bold' - ) + class-name='text-color-heading text-bold' + class-dash='text-color-heading text-bold' + ) + div.segment.lg-hidden.sm-quarter.text-right + div.jsMobileRightMenuButton.icon.icon-close.icon-heading .chat-view.segment.full.whitespace-normal solid-xmpp-chat( diff --git a/src/views/partials/circle/page-circle-edit.pug b/src/views/partials/circle/page-circle-edit.pug index 7249a40..8e4bbd7 100644 --- a/src/views/partials/circle/page-circle-edit.pug +++ b/src/views/partials/circle/page-circle-edit.pug @@ -1,6 +1,6 @@ solid-ac-checker(permission='acl:Read', bind-resources) div.segment.full.padding-large.border-bottom.border-color-grey - div.segment.half.sm-full + div.segment.half.sm-three-quarter solid-display.text-xxlarge.text-letter-spacing-large( bind-resources fields='name, dash, subtitle' @@ -12,6 +12,8 @@ solid-ac-checker(permission='acl:Read', bind-resources) ) div.segment.half.sm-hidden.text-right solid-link(class="backlink", bind-resources, next=`${component.route}-profile` data-trans='circle.edit.backlink') + div.segment.lg-hidden.sm-quarter.text-right + div.jsMobileRightMenuButton.icon.icon-close.icon-heading div.segment.full.padding-large.whitespace-normal diff --git a/src/views/partials/circle/page-circle-profile.pug b/src/views/partials/circle/page-circle-profile.pug index 30a5b43..4a35005 100644 --- a/src/views/partials/circle/page-circle-profile.pug +++ b/src/views/partials/circle/page-circle-profile.pug @@ -9,15 +9,18 @@ div( ) solid-ac-checker.segment.block(permission='acl:Read', bind-resources) div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal - solid-display.text-xxlarge.text-letter-spacing-large( - bind-resources - fields='name, dash, subtitle' + div.segment.full.sm-three-quarter + solid-display.text-xxlarge.text-letter-spacing-large( + bind-resources + fields='name, dash, subtitle' - value-dash=' - ' + value-dash=' - ' - class-name='text-color-heading text-bold' - class-dash='text-color-heading text-bold' - ) + class-name='text-color-heading text-bold' + class-dash='text-color-heading text-bold' + ) + div.segment.lg-hidden.sm-quarter.text-right + div.jsMobileRightMenuButton.icon.icon-close.icon-heading div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge div.loader(id=`loader-${component.route}-profile-1`) diff --git a/src/views/partials/project/page-project-chat.pug b/src/views/partials/project/page-project-chat.pug index 6130ed1..e458583 100644 --- a/src/views/partials/project/page-project-chat.pug +++ b/src/views/partials/project/page-project-chat.pug @@ -1,17 +1,20 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal - solid-display.text-xxlarge.text-letter-spacing-large( - bind-resources - fields='const-title1, number, customer.name, dash, name' + div.segment.full.sm-three-quarter + solid-display.text-xxlarge.text-letter-spacing-large( + bind-resources + fields='const-title1, number, customer.name, dash, name' - class-const-title1='text-color-heading text-bold text-uppercase' - class-number='text-color-heading text-bold text-uppercase word-spacing-right' - class-customer.name='text-color-heading text-bold text-uppercase' - class-dash='text-color-heading text-bold text-xlarge' - class-name='' + class-const-title1='text-color-heading text-bold text-uppercase' + class-number='text-color-heading text-bold text-uppercase word-spacing-right' + class-customer.name='text-color-heading text-bold text-uppercase' + class-dash='text-color-heading text-bold text-xlarge' + class-name='' - value-const-title1='N°' - value-dash=' - ' - ) + value-const-title1='N°' + value-dash=' - ' + ) + div.segment.lg-hidden.sm-quarter.text-right + div.jsMobileRightMenuButton.icon.icon-close.icon-heading .chat-view.segment.full.whitespace-normal solid-xmpp-chat( diff --git a/src/views/partials/project/page-project-edit.pug b/src/views/partials/project/page-project-edit.pug index 325ff6b..b70343b 100644 --- a/src/views/partials/project/page-project-edit.pug +++ b/src/views/partials/project/page-project-edit.pug @@ -1,6 +1,6 @@ solid-ac-checker(permission='acl:Read', bind-resources) div.segment.full.padding-large.border-bottom.border-color-grey - div.segment.half.sm-full + div.segment.half.sm-three-quarter solid-display.text-xxlarge.text-letter-spacing-large( bind-resources fields='const-title1, number, customer.name, dash, name' @@ -16,6 +16,8 @@ solid-ac-checker(permission='acl:Read', bind-resources) ) div.segment.half.sm-hidden.text-right solid-link(class='backlink', bind-resources, next=`${component.route}-profile` data-trans='project.edit.backlink') + div.segment.lg-hidden.sm-quarter.text-right + div.jsMobileRightMenuButton.icon.icon-close.icon-heading div.segment.full.padding-large.whitespace-normal diff --git a/src/views/partials/project/page-project-profile.pug b/src/views/partials/project/page-project-profile.pug index 9620c6d..0a9f023 100644 --- a/src/views/partials/project/page-project-profile.pug +++ b/src/views/partials/project/page-project-profile.pug @@ -9,19 +9,22 @@ div( ) solid-ac-checker.segment.block(permission='acl:Read', bind-resources) div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-padding-bottom-small.sm-padding-left-xsmall.border-bottom.border-color-grey.whitespace-normal - solid-display.text-xxlarge.text-letter-spacing-large( - bind-resources - fields='const-title1, number, customer.name, dash, name' + div.segment.full.sm-three-quarter + solid-display.text-xxlarge.text-letter-spacing-large( + bind-resources + fields='const-title1, number, customer.name, dash, name' - class-const-title1='text-color-heading text-bold text-uppercase' - class-number='text-color-heading text-bold text-uppercase word-spacing-right' - class-customer.name='text-color-heading text-bold text-uppercase' - class-dash='text-color-heading text-bold text-xlarge' - class-name='' + class-const-title1='text-color-heading text-bold text-uppercase' + class-number='text-color-heading text-bold text-uppercase word-spacing-right' + class-customer.name='text-color-heading text-bold text-uppercase' + class-dash='text-color-heading text-bold text-xlarge' + class-name='' - value-const-title1='N°' - value-dash=' - ' - ) + value-const-title1='N°' + value-dash=' - ' + ) + div.segment.lg-hidden.sm-quarter.text-right + div.jsMobileRightMenuButton.icon.icon-close.icon-heading div.segment.full.padding-large.sm-padding-xsmall.sm-padding-top-xlarge div.loader(id=`loader-${component.route}-profile`)