From 64a78a927aa5bb7b399bfdf49e7f84f162ce68f7 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Fri, 11 Dec 2020 18:13:03 +0100
Subject: [PATCH] feature: right-hand menu
---
src/page-admin.pug | 2 +-
src/page-project.pug | 32 +-
src/styles/hubl-app/content/_index.scss | 94 ++++++
src/styles/hubl-framework/commons/_index.scss | 2 +-
src/styles/hubl-framework/commons/colors.scss | 11 -
.../hubl-framework/icons/custom-icons.scss | 1 -
src/views/admin/page-admin-projects.pug | 307 +++++++++---------
src/views/project/page-project-profile.pug | 2 +-
8 files changed, 265 insertions(+), 186 deletions(-)
diff --git a/src/page-admin.pug b/src/page-admin.pug
index 2d297765..fb62e260 100644
--- a/src/page-admin.pug
+++ b/src/page-admin.pug
@@ -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)
#admin-circles(hidden, data-view="admin-circles")
include views/admin/page-admin-circles.pug
diff --git a/src/page-project.pug b/src/page-project.pug
index ff4ff8b8..13b40a39 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -1,26 +1,24 @@
-.views-container.sidebar-is-closed.bg-color-white
- .content-box
- .content-box__height
- solid-ac-checker(permission='acl:Read', bind-resources)
- #project-chat(hidden, data-view="project-chat")
- include views/project/page-project-chat.pug
- #project-information.content-box__height(hidden, data-view="project-information")
- include views/project/page-project-profile.pug
- #project-picture(hidden, data-view="project-picture")
- include views/project/page-project-picture.pug
+.views-container.sidebar-is-closed
+ solid-ac-checker(permission='acl:Read', bind-resources)
+ #project-chat(hidden, data-view="project-chat")
+ include views/project/page-project-chat.pug
+ #project-information(hidden, data-view="project-information")
+ include views/project/page-project-profile.pug
+ #project-picture(hidden, data-view="project-picture")
+ include views/project/page-project-picture.pug
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
- li.segment.padding-small.text-right.jsOffsiteToggle
- span.icon.icon-arrow-right.xxsmall.icon-margin-right-xxsmall
+ li.segment.padding-small.text-right.text-normal.jsOffsiteToggle
+ span.icon.icon-arrow-right.xxsmall.margin-right-xxsmall
a(data-trans='project.menuRight.fold')
solid-route(name='project-chat')
- li.segment.padding-large
- span.icon.ci-chat.large.icon-margin-right
+ li.segment.padding-medium
+ span.icon.ci-chat.icon-xlarge.margin-right-small
a(data-trans='project.menuRight.chat')
solid-route(name='project-information')
- li.segment.padding-large
- span.icon.ci-information.large.icon-margin-right
+ li.segment.padding-medium
+ span.icon.ci-information.icon-xlarge.margin-right-small
a(data-trans='project.menuRight.information')
solid-route(name='project-picture' use-id)
diff --git a/src/styles/hubl-app/content/_index.scss b/src/styles/hubl-app/content/_index.scss
index c1bef4ee..cfd8a433 100644
--- a/src/styles/hubl-app/content/_index.scss
+++ b/src/styles/hubl-app/content/_index.scss
@@ -1,3 +1,97 @@
main {
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;
+ }
+ }
+ }
}
\ No newline at end of file
diff --git a/src/styles/hubl-framework/commons/_index.scss b/src/styles/hubl-framework/commons/_index.scss
index 5880cf9d..23979fd0 100644
--- a/src/styles/hubl-framework/commons/_index.scss
+++ b/src/styles/hubl-framework/commons/_index.scss
@@ -4,4 +4,4 @@
@import 'borders';
@import 'shadows';
@import 'user-thumb';
-@import 'lists'
+@import 'lists';
diff --git a/src/styles/hubl-framework/commons/colors.scss b/src/styles/hubl-framework/commons/colors.scss
index a246438c..79ff7ff1 100644
--- a/src/styles/hubl-framework/commons/colors.scss
+++ b/src/styles/hubl-framework/commons/colors.scss
@@ -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 {
background: white;
}
diff --git a/src/styles/hubl-framework/icons/custom-icons.scss b/src/styles/hubl-framework/icons/custom-icons.scss
index b8c030cb..7c51b641 100644
--- a/src/styles/hubl-framework/icons/custom-icons.scss
+++ b/src/styles/hubl-framework/icons/custom-icons.scss
@@ -63,7 +63,6 @@ $ci-icons: (
display: inline-block;
/* use !important to prevent issues with browser extensions that change fonts */
font-family: '#{$ci-font-name}' !important;
- font-size: 25px;
font-style: normal;
font-weight: normal;
line-height: 1;
diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug
index 5989c44e..a1b4f790 100644
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@@ -1,162 +1,161 @@
-.content-box.full-width
- solid-router(default-route='admin-project-list', hidden)
- solid-route(name='admin-project-list')
- solid-route(name='admin-project-create')
- solid-route(name='project-left')
+solid-router(default-route='admin-project-list', hidden)
+ solid-route(name='admin-project-list')
+ solid-route(name='admin-project-create')
+ solid-route(name='project-left')
+
+#project-left(hidden, data-view="project-left")
+ include ../project/page-project-left.pug
+
+#admin-project-list(hidden, data-view="admin-project-list")
+ 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
+ h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
+ div.segment.lg-hidden
+ button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')
+
+ div.segment.padding-large
+ div.segment.margin-bottom-medium.clearfix
+ div.segment.lg-half.float-left
+ 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
+ solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
+ solid-link(
+ class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
+ next='admin-project-create'
+ data-trans='project.list.buttonCreate'
+ )
- #project-left(hidden, data-view="project-left")
- include ../project/page-project-left.pug
+ .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'
+ )
- #admin-project-list.content-box__height(hidden, data-view="admin-project-list")
- include ../../templates/hubl-user-avatar.pug
+ solid-widget(name='hubl-project-admins')
+ 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.segment.padding-top-xsmall.padding-right-large.padding-bottom-xsmall.padding-left-large.border-bottom.border-color-grey.text-color-heading
- div
- h2.text-uppercase.text-xlarge.text-letter-spacing-large(data-trans='project.list.title')
- div.segment.lg-hidden
- button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='project.list.buttonMobile')
-
- div.segment.padding-large
- div.segment.margin-bottom-medium.clearfix
- div.segment.lg-half.float-left
- 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
- solid-ac-checker(data-src=`${endpoints.projects || (endpoints.post && endpoints.post.projects)}`, permission='acl:Append')
- solid-link(
- class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-plus'
- next='admin-project-create'
- data-trans='project.list.buttonCreate'
+ 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'
)
- .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'
- )
-
- solid-widget(name='hubl-project-admins')
- 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'
- )
-
- 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'
- )
-
- solid-display(
- class='table-body'
-
- bind-user
- nested-field="projects"
- fields='project.name, project.members, project.captain, leaveButton'
- loader-id='loader-admin-projects'
-
- class-project.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
- class-project.members='table-cell w280'
- class-project.captain='table-cell w280'
- class-leaveButton='table-cell w230'
-
- action-leaveButton="joinButton"
- widget-leaveButton="hubl-admin-project-leave-button"
-
- widget-project.captain='hubl-project-captain'
- widget-project.members='hubl-project-admins'
-
- order-by="project.name"
- )
+ solid-display(
+ class='table-body'
- solid-widget(name='hubl-admin-project-join-button')
- 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"
-
- fields='user.username'
- value-user.username='hubl-workaround-493'
- widget-user.username='solid-form-hidden'
-
- submit-button=''
- 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(
- class='table-body'
-
- data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
- fields='name, members, captain, joinButton'
- 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"
- )
+ bind-user
+ nested-field="projects"
+ fields='project.name, project.members, project.captain, leaveButton'
+ loader-id='loader-admin-projects'
+
+ class-project.name='table-cell w280 text-xlarge text-color-heading text-semibold text-letter-spacing-large text-underline'
+ class-project.members='table-cell w280'
+ class-project.captain='table-cell w280'
+ class-leaveButton='table-cell w230'
+
+ action-leaveButton="joinButton"
+ widget-leaveButton="hubl-admin-project-leave-button"
+
+ widget-project.captain='hubl-project-captain'
+ widget-project.members='hubl-project-admins'
+
+ order-by="project.name"
+ )
+
+ solid-widget(name='hubl-admin-project-join-button')
+ 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"
+
+ fields='user.username'
+ value-user.username='hubl-workaround-493'
+ widget-user.username='solid-form-hidden'
- div#loader-admin-projects.loader.loader-top
- div
- div
- div
- div
+ submit-button=''
+ 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(
+ class='table-body'
+
+ data-src=`${endpoints.projects || endpoints.get.projects}joinable/`
+ fields='name, members, captain, joinButton'
+ 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
+#admin-project-create(hidden, data-view="admin-project-create")
+ include page-admin-projects-create.pug
diff --git a/src/views/project/page-project-profile.pug b/src/views/project/page-project-profile.pug
index 935dc553..931d5278 100644
--- a/src/views/project/page-project-profile.pug
+++ b/src/views/project/page-project-profile.pug
@@ -122,5 +122,5 @@ solid-router(default-route='project-profile', hidden)
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
--
GitLab