autonomic-cooperative/hubl
0
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

patch: New right menu on mobile - JS fixed + extended through circle and project pages

Browse Source
This commit is contained in:
gaelle morin 2021-04-14 18:33:54 +02:00 committed by Jean-Baptiste Pasquier
parent 38e9ab1d7b
commit 5084e21d1f
10 changed files with 87 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.pug
View File

@ -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}`)

30
src/scripts/navigate-event.js
View File

@ -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');
};
})
)
}
);

5
src/styles/content/_index.scss
View File

@ -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);
}

2
src/views/page-admin.pug
View File

@ -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

3
src/views/partials/circle/page-circle-chat.pug
View File

@ -1,4 +1,5 @@
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
div.segment.full.sm-three-quarter
solid-display.text-xxlarge.text-letter-spacing-large(
bind-resources
fields='name, dash, subtitle'
@ -8,6 +9,8 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
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(

4
src/views/partials/circle/page-circle-edit.pug
View File

@ -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

3
src/views/partials/circle/page-circle-profile.pug
View File

@ -9,6 +9,7 @@ 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
div.segment.full.sm-three-quarter
solid-display.text-xxlarge.text-letter-spacing-large(
bind-resources
fields='name, dash, subtitle'
@ -18,6 +19,8 @@ div(
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`)

3
src/views/partials/project/page-project-chat.pug
View File

@ -1,4 +1,5 @@
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
div.segment.full.sm-three-quarter
solid-display.text-xxlarge.text-letter-spacing-large(
bind-resources
fields='const-title1, number, customer.name, dash, name'
@ -12,6 +13,8 @@ div.segment.full.padding-large.sm-padding-top-small.sm-padding-right-xsmall.sm-p
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(

4
src/views/partials/project/page-project-edit.pug
View File

@ -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

3
src/views/partials/project/page-project-profile.pug
View File

@ -9,6 +9,7 @@ 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
div.segment.full.sm-three-quarter
solid-display.text-xxlarge.text-letter-spacing-large(
bind-resources
fields='const-title1, number, customer.name, dash, name'
@ -22,6 +23,8 @@ div(
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`)