feature: right-hand menu

This commit is contained in:
gaelle morin 2020-12-11 18:13:03 +01:00
parent aa6939922e
commit 64a78a927a
No known key found for this signature in database
GPG Key ID: 028426702B95CF9C
8 changed files with 249 additions and 170 deletions

View File

@ -1,4 +1,4 @@
.views-container.sidebar-is-closed.bg-color-white .views-container.sidebar-is-closed
if endpoints.circles || (endpoints.get && endpoints.get.circles) if endpoints.circles || (endpoints.get && endpoints.get.circles)
#admin-circles(hidden, data-view="admin-circles") #admin-circles(hidden, data-view="admin-circles")
include views/admin/page-admin-circles.pug include views/admin/page-admin-circles.pug

View File

@ -1,26 +1,24 @@
.views-container.sidebar-is-closed.bg-color-white .views-container.sidebar-is-closed
.content-box solid-ac-checker(permission='acl:Read', bind-resources)
.content-box__height #project-chat(hidden, data-view="project-chat")
solid-ac-checker(permission='acl:Read', bind-resources) include views/project/page-project-chat.pug
#project-chat(hidden, data-view="project-chat") #project-information(hidden, data-view="project-information")
include views/project/page-project-chat.pug include views/project/page-project-profile.pug
#project-information.content-box__height(hidden, data-view="project-information") #project-picture(hidden, data-view="project-picture")
include views/project/page-project-profile.pug include views/project/page-project-picture.pug
#project-picture(hidden, data-view="project-picture")
include views/project/page-project-picture.pug
nav.jsRightMenu(role='navigation') nav.jsRightMenu(role='navigation')
solid-router.text-color-heading.reverse.text-bold(default-route='project-chat') solid-router.text-color-heading.text-bold(default-route='project-chat')
ul ul
li.segment.padding-small.text-right.jsOffsiteToggle li.segment.padding-small.text-right.text-normal.jsOffsiteToggle
span.icon.icon-arrow-right.xxsmall.icon-margin-right-xxsmall span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
a(data-trans='project.menuRight.fold') a(data-trans='project.menuRight.fold')
solid-route(name='project-chat') solid-route(name='project-chat')
li.segment.padding-large li.segment.padding-medium
span.icon.ci-chat.large.icon-margin-right span.icon.ci-chat.icon-xlarge.margin-right-small
a(data-trans='project.menuRight.chat') a(data-trans='project.menuRight.chat')
solid-route(name='project-information') solid-route(name='project-information')
li.segment.padding-large li.segment.padding-medium
span.icon.ci-information.large.icon-margin-right span.icon.ci-information.icon-xlarge.margin-right-small
a(data-trans='project.menuRight.information') a(data-trans='project.menuRight.information')
solid-route(name='project-picture' use-id) solid-route(name='project-picture' use-id)

View File

@ -1,3 +1,97 @@
main { main {
height: calc(100vh - 72px); height: calc(100vh - 72px);
}
/* Styles of the right-hand menu + pages with that menu */
.with-sidebar {
flex-grow: 1;
display: flex;
flex-direction: row;
align-items: stretch;
/*margin-top: 50px;*/
overflow: hidden;
/*@media($large) {
margin-top: 0;
}*/
.views-container {
flex: 1 0 0;
/*-webkit-backface-visibility: hidden;*/
&.sidebar-is-closed {
@media($large) {
margin-left: -152px;
transform: translate(152px);
}
}
}
>div {
transition: all 0.5s;
}
nav {
background: #F1F1F1;
transition: all 0.5s;
width: 217px;
ul {
li {
border-bottom: 1px solid #D6CECE;
&>a {
vertical-align: super;
}
}
&>li:first-child>a {
vertical-align: middle;
}
>solid-route {
&[active]>li {
background-color: var(--color-heading);
color: white;
}
&:hover:not([active])>li {
background: #E4E4E4;
}
}
}
&.jsRightMenu {
display: none;
@media($large) {
display: block;
}
}
&.jsRightMenu:not([open]) {
transform: translate(152px);
}
&.jsRightMenu[open] {
@media($large) {
display: block;
bottom: 0;
box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.12);
min-width: 60%;
position: fixed;
right: 0;
top: 50px;
z-index: 1;
}
@media($large) {
box-shadow: none;
min-width: unset;
position: unset;
z-index: unset;
}
}
}
} }

View File

@ -4,4 +4,4 @@
@import 'borders'; @import 'borders';
@import 'shadows'; @import 'shadows';
@import 'user-thumb'; @import 'user-thumb';
@import 'lists' @import 'lists';

View File

@ -65,17 +65,6 @@
} }
} }
.bg-color-grey {
background-color: #F1F1F1;
&.active:active {
background-color: var(--color-heading);
}
&.hover:hover:not(:active) {
background-color: #E4E4E4;
}
}
.bg-color-white { .bg-color-white {
background: white; background: white;
} }

View File

@ -63,7 +63,6 @@ $ci-icons: (
display: inline-block; display: inline-block;
/* use !important to prevent issues with browser extensions that change fonts */ /* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$ci-font-name}' !important; font-family: '#{$ci-font-name}' !important;
font-size: 25px;
font-style: normal; font-style: normal;
font-weight: normal; font-weight: normal;
line-height: 1; line-height: 1;

View File

@ -1,162 +1,161 @@
.content-box.full-width solid-router(default-route='admin-project-list', hidden)
solid-router(default-route='admin-project-list', hidden) solid-route(name='admin-project-list')
solid-route(name='admin-project-list') solid-route(name='admin-project-create')
solid-route(name='admin-project-create') solid-route(name='project-left')
solid-route(name='project-left')
#project-left(hidden, data-view="project-left") #project-left(hidden, data-view="project-left")
include ../project/page-project-left.pug include ../project/page-project-left.pug
#admin-project-list.content-box__height(hidden, data-view="admin-project-list") #admin-project-list(hidden, data-view="admin-project-list")
include ../../templates/hubl-user-avatar.pug include ../../templates/hubl-user-avatar.pug
div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading div.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading
div div
h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title') h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
div.segment.lg-hidden div.segment.lg-hidden
button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile') button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')
div.segment.padding-large div.segment.padding-large
div.segment.margin-bottom-medium.clearfix div.segment.margin-bottom-medium.clearfix
div.segment.lg-half.float-left div.segment.lg-half.float-left
h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle') h3.text-color-heading.text-semibold.text-letter-spacing-large(data-trans='project.list.subTitle')
div.segment.lg-half.float-left.text-right.padding-top-xxsmall div.segment.lg-half.float-left.text-right.padding-top-xxsmall
solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append') solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
solid-link( solid-link(
class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus' class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
next='admin-project-create' next='admin-project-create'
data-trans='project.list.buttonCreate' data-trans='project.list.buttonCreate'
)
.table-wrapper
.table
div.table-header.bg-color-third.text-color-heading
div.table-cell.w280(data-trans='project.list.tableHeader1')
div.table-cell.w280(data-trans='project.list.tableHeader2')
div.table-cell.w280(data-trans='project.list.tableHeader3')
div.table-cell.w230(data-trans='project.list.tableHeader4')
solid-widget(name="hubl-admin-project-leave-button")
template
solid-delete(
class='button text-xsmall text-bold text-uppercase color-secondary bordered'
data-src="${src}"
data-label=''
data-trans='data-label=project.list.buttonQuit'
)
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`)
hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`)
solid-widget(name='hubl-project-captain')
template
solid-display.segment.margin-left-xlarge.user-thumb(
data-src='${await value}'
fields='account.picture, content(name-and-icon(name), sub(username))'
class-account.picture='user-thumb-avatar'
class-content='user-thumb-content'
class-name-and-icon='user-thumb-content__name-and-icon'
class-name='name'
class-sub='user-thumb-content__sub-text username'
class-username=''
widget-account.picture='hubl-user-avatar'
) )
.table-wrapper solid-widget(name='hubl-project-admins')
.table template
solid-display(
data-src='${value}'
fields='user'
search-fields='is_admin'
search-value-is_admin='true'
search-widget-is_admin='solid-form-hidden'
widget-user='hubl-project-captain'
)
div.table-header.bg-color-third.text-color-heading solid-widget(name='hubl-admin-project-leave-button')
div.table-cell.w280(data-trans='project.list.tableHeader1') template
div.table-cell.w280(data-trans='project.list.tableHeader2') solid-delete(
div.table-cell.w280(data-trans='project.list.tableHeader3') class='button text-xsmall text-bold text-uppercase color-secondary bordered'
div.table-cell.w230(data-trans='project.list.tableHeader4') data-src="${src}"
data-label=''
data-trans='data-label=project.list.buttonQuit'
)
solid-widget(name="hubl-admin-project-leave-button") solid-display(
template class='table-body'
solid-delete(
class='button text-xsmall text-bold text-uppercase color-secondary bordered'
data-src="${src}"
data-label=''
data-trans='data-label=project.list.buttonQuit'
)
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${src}`)
hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${src}`)
solid-widget(name='hubl-project-captain') bind-user
template nested-field="projects"
solid-display.segment.margin-left-xlarge.user-thumb( fields='project.name, project.members, project.captain, leaveButton'
data-src='${await value}' loader-id='loader-admin-projects'
fields='account.picture, content(name-and-icon(name), sub(username))'
class-account.picture='user-thumb-avatar' class-project.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
class-content='user-thumb-content' class-project.members='table-cell w280'
class-name-and-icon='user-thumb-content__name-and-icon' class-project.captain='table-cell w280'
class-name='name' class-leaveButton='table-cell w230'
class-sub='user-thumb-content__sub-text username'
class-username=''
widget-account.picture='hubl-user-avatar' action-leaveButton="joinButton"
) widget-leaveButton="hubl-admin-project-leave-button"
solid-widget(name='hubl-project-admins') widget-project.captain='hubl-project-captain'
template widget-project.members='hubl-project-admins'
solid-display(
data-src='${value}'
fields='user'
search-fields='is_admin'
search-value-is_admin='true'
search-widget-is_admin='solid-form-hidden'
widget-user='hubl-project-captain'
)
solid-widget(name='hubl-admin-project-leave-button') order-by="project.name"
template )
solid-delete(
class='button text-xsmall text-bold text-uppercase color-secondary bordered'
data-src="${src}"
data-label=''
data-trans='data-label=project.list.buttonQuit'
)
solid-display( solid-widget(name='hubl-admin-project-join-button')
class='table-body' template
solid-form(
class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
data-src='${src}'
nested-field="members"
bind-user fields='user.username'
nested-field="projects" value-user.username='hubl-workaround-493'
fields='project.name, project.members, project.captain, leaveButton' widget-user.username='solid-form-hidden'
loader-id='loader-admin-projects'
class-project.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline' submit-button=''
class-project.members='table-cell w280' data-trans='submit-button=project.list.buttonJoin'
class-project.captain='table-cell w280' )
class-leaveButton='table-cell w230' hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`)
hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`)
action-leaveButton="joinButton" solid-display(
widget-leaveButton="hubl-admin-project-leave-button" class='table-body'
widget-project.captain='hubl-project-captain' data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
widget-project.members='hubl-project-admins' fields='name, members, captain, joinButton'
loader-id='loader-admin-projects'
order-by="project.name" class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
) class-members='table-cell w280'
class-captain='table-cell w280'
class-joinButton='table-cell w230'
solid-widget(name='hubl-admin-project-join-button') action-joinButton="joinButton" # Workaround: I need members two times
template widget-joinButton="hubl-admin-project-join-button"
solid-form(
class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-arrow-right-circle'
data-src='${src}'
nested-field="members"
fields='user.username' widget-captain='hubl-project-captain'
value-user.username='hubl-workaround-493' widget-members='hubl-project-admins'
widget-user.username='solid-form-hidden'
submit-button='' order-by="name"
data-trans='submit-button=project.list.buttonJoin' )
)
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}` target-src='${src}')
hubl-reactivity(data-src=`${endpoints.projects || endpoints.get.projects}joinable/` target-src='${src}')
hubl-reactivity(bind-user nested-field="projects" target-src='${src}')
if (endpoints.post && endpoints.post.projects) && (endpoints.get && endpoints.get.projects)
hubl-reactivity(data-src=`${endpoints.post.projects}joinable/` target-src=`${value}`)
hubl-reactivity(data-src=`${endpoints.post.projects}` target-src=`${value}`)
solid-display( div#loader-admin-projects.loader.loader-top
class='table-body' div
div
div
div
data-src=`${endpoints.projects || endpoints.get.projects}joinable/` #admin-project-create(hidden, data-view="admin-project-create")
fields='name, members, captain, joinButton' include page-admin-projects-create.pug
loader-id='loader-admin-projects'
class-name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
class-members='table-cell w280'
class-captain='table-cell w280'
class-joinButton='table-cell w230'
action-joinButton="joinButton" # Workaround: I need members two times
widget-joinButton="hubl-admin-project-join-button"
widget-captain='hubl-project-captain'
widget-members='hubl-project-admins'
order-by="name"
)
div#loader-admin-projects.loader.loader-top
div
div
div
div
#admin-project-create.content-box__height(hidden, data-view="admin-project-create")
include page-admin-projects-create.pug

View File

@ -122,5 +122,5 @@ solid-router(default-route='project-profile', hidden)
widget-user.account.picture='hubl-user-avatar' widget-user.account.picture='hubl-user-avatar'
) )
#project-edit.content-box__height(hidden, data-view="project-edit") #project-edit(hidden, data-view="project-edit")
include page-project-edit.pug include page-project-edit.pug