From 9fc095a0cc71d681ee942e7a3dd3808c8523d386 Mon Sep 17 00:00:00 2001
From: gaelle morin <gmorin.dev@gmail.com>
Date: Sun, 6 Dec 2020 16:20:33 +0100
Subject: [PATCH] feature: circle-profile + user-thumb update
---
src/page-circle.pug | 19 +++---
.../hubl-framework/commons/user-thumb.scss | 26 ++++++--
src/styles/hubl-framework/tags/_index.scss | 2 +-
src/views/admin/page-admin-circles.pug | 2 +-
src/views/admin/page-admin-projects.pug | 2 +-
src/views/circle/page-circle-profile.pug | 61 ++++++++++---------
6 files changed, 68 insertions(+), 44 deletions(-)
diff --git a/src/page-circle.pug b/src/page-circle.pug
index 71478d2a..ff3cf98c 100644
--- a/src/page-circle.pug
+++ b/src/page-circle.pug
@@ -1,15 +1,18 @@
.views-container.sidebar-is-closed
- .content-box.flex.full-width.with-form
- div.content-box__header
- solid-ac-checker.flex.space-between(permission='acl:Read', bind-resources)
- solid-display(
+ .content-box
+ solid-ac-checker(permission='acl:Read', bind-resources)
+ div.segment.padding-large.border-bottom.border-color-grey.clearfix
+ solid-display.text-xxlarge.text-letter-spacing-large(
bind-resources
- fields='name, description'
+ fields='name, dash, description'
- class-name='h1-like'
- class-description='h1-aside description'
+ value-dash=' - '
+
+ class-name='text-color-heading text-bold'
+ class-dash='text-color-heading text-bold'
)
- button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.menuRight.buttonMobile')
+ div.segment.lg-hidden
+ button.mobile-sidebar-button.jsMobileSidebarOpenButton.icon-arrow-left-circle(data-trans='circle.menuRight.buttonMobile')
div.content-box__height
solid-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden, data-view="circle-chat")
diff --git a/src/styles/hubl-framework/commons/user-thumb.scss b/src/styles/hubl-framework/commons/user-thumb.scss
index 70f515d2..69a83a96 100644
--- a/src/styles/hubl-framework/commons/user-thumb.scss
+++ b/src/styles/hubl-framework/commons/user-thumb.scss
@@ -63,15 +63,33 @@
&::before {
font-size: 15px;
}
+
+ &.top-align::before {
+ vertical-align: super;
+ margin-top: -10px;
+ margin-right: 5px;
+ }
+ }
+
+ .tag {
+ margin-top: -19px;
}
}
- .user-thumb-content__sub-text {
+ .user-thumb-content__sub-text{
display: flex;
- font-size: 12px;
- &::before {
- content: "@";
+ &.username {
+ font-size: 12px;
+
+ &::before {
+ content: "@";
+ }
+ }
+ &.community {
+ .icon::before {
+ font-size: 15px;
+ }
}
}
}
diff --git a/src/styles/hubl-framework/tags/_index.scss b/src/styles/hubl-framework/tags/_index.scss
index 5267fcfe..704e4beb 100644
--- a/src/styles/hubl-framework/tags/_index.scss
+++ b/src/styles/hubl-framework/tags/_index.scss
@@ -1,4 +1,4 @@
-.tag {
+.tag:not(:empty) {
cursor: pointer;
height: 17px;
font-size: 12px;
diff --git a/src/views/admin/page-admin-circles.pug b/src/views/admin/page-admin-circles.pug
index 248a3bed..1d46a31f 100644
--- a/src/views/admin/page-admin-circles.pug
+++ b/src/views/admin/page-admin-circles.pug
@@ -19,7 +19,7 @@
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'
+ class-sub='user-thumb-content__sub-text username'
class-username=''
widget-account.picture='hubl-user-avatar'
diff --git a/src/views/admin/page-admin-projects.pug b/src/views/admin/page-admin-projects.pug
index 9bb0af9a..5989c44e 100644
--- a/src/views/admin/page-admin-projects.pug
+++ b/src/views/admin/page-admin-projects.pug
@@ -62,7 +62,7 @@
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'
+ class-sub='user-thumb-content__sub-text username'
class-username=''
widget-account.picture='hubl-user-avatar'
diff --git a/src/views/circle/page-circle-profile.pug b/src/views/circle/page-circle-profile.pug
index 35f5f480..2c60d740 100644
--- a/src/views/circle/page-circle-profile.pug
+++ b/src/views/circle/page-circle-profile.pug
@@ -8,16 +8,15 @@ solid-router(default-route='circle-profile', hidden)
template
solid-link(data-src='\${value}', next='messages')
- .content-box__info.flex
-
+ div.segment.padding-large.clearfix
div#loader-circle-profile.loader
div
div
div
div
- .flex.space-between.with-padding.mobile-vertical-align
- solid-display.mobile-margin__bottom(
+ div.segment.clearfix
+ solid-display.segment.lg-half.float-left(
bind-resources
fields='creationDateSet(title, creationDate)'
loader-id='loader-circle-profile'
@@ -29,28 +28,27 @@ solid-router(default-route='circle-profile', hidden)
widget-creationDate='solid-display-value-date'
)
- solid-ac-checker(permission='acl:Append', bind-resources, nested-field='members')
+ solid-ac-checker.segment.lg-half.float-left.text-right.margin-bottom-large(permission='acl:Append', bind-resources, nested-field='members')
solid-ac-checker(permission='acl:Delete', bind-resources)
- solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonModify')
+ solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonModify')
solid-ac-checker(no-permission='acl:Delete', bind-resources)
- solid-link(class='button mobile-full-width text-bold text-uppercase reversed button-primary bordered with-icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonAdd')
-
-
- div.flex.desktop-button__end
- solid-ac-checker(permission='acl:Delete', bind-resources)
- solid-delete(
- class='button mobile-full-width text-bold text-uppercase button-primary bordered with-icon icon-trash'
- bind-resources
- data-label=''
- data-trans='data-label=circle.profile.buttonDelete'
- next='admin-circles'
- )
+ solid-link(class='button text-xsmall text-bold text-uppercase reversed color-secondary bordered icon icon-pencil' next='circle-edit' bind-resources data-trans='circle.profile.buttonAdd')
- solid-widget(name='hubl-circle-leave-button')
+ div.segment.lg-auto.float-right.margin-bottom-large
+ solid-ac-checker(permission='acl:Delete', bind-resources)
+ solid-delete(
+ class='button text-xsmall text-bold text-uppercase color-secondary bordered'
+ bind-resources
+ data-label=''
+ data-trans='data-label=circle.profile.buttonDelete'
+ next='admin-circles'
+ )
+
+ solid-widget.segment.lg-auto.float-right.margin-bottom-large(name='hubl-circle-leave-button')
template
solid-ac-checker(no-permission='acl:Delete', data-src="${src}", nested-field="circle")
solid-delete(
- class='button mobile-full-width desktop-btn-margin__left text-bold text-uppercase reversed button-secondary bordered with-icon icon-close'
+ class='button text-xsmall text-bold text-uppercase color-secondary bordered'
data-src="${src}"
data-label=''
data-trans='data-label=circle.profile.buttonQuit'
@@ -59,7 +57,7 @@ solid-router(default-route='circle-profile', hidden)
solid-widget(name='hubl-circle-join-button')
template
- button.button.desktop-btn-margin__left.text-bold.text-uppercase.reversed.button-primary.bordered.with-icon.icon-arrow-right-circle.flex
+ button.button.text-xsmall.text-bold.text-uppercase.reversed.color-secondary.bordered.icon.icon-arrow-right-circle
solid-form(
data-src=''
nested-field='members'
@@ -86,24 +84,29 @@ solid-router(default-route='circle-profile', hidden)
hubl-inherit-user-id="search-value-user"
)
- h2(data-trans='circle.profile.subTitle')
+ h3.text-color-heading.text-bold.text-letter-spacing-large(data-trans='circle.profile.subTitle')
solid-widget(name='hubl-circle-user-admin')
template ${value ? "Administrateur" : ""}
- solid-display.block(
+ solid-display.user-thumb(
bind-resources
nested-field='members'
loader-id='loader-circle-profile'
- fields='classGroup(user.account.picture, sup(user.name, user, is_admin), sub(user.communities))'
+ fields='user.account.picture, content(name-and-icon(user.name, user, is_admin), sub(atom, user.communities))'
widget-user='hubl-circle-team-contact'
- class-classGroup='user-thumb is-spaced'
- class-user.account.picture='avatar user-thumb__picture'
- class-user.name='user-thumb__name'
- class-user='user-thumb__send'
- class-is_admin='user-thumb__admin'
+ class-user.account.picture='user-thumb-avatar'
+ class-content='user-thumb-content'
+ class-name-and-icon='user-thumb-content__name-and-icon'
+ class-user.name='name'
+ class-user='icon top-align icon-secondary hover icon-speech'
+ class-is_admin='tag color-primary'
+ class-sub='user-thumb-content__sub-text community'
+ class-atom='icon icon-primary mdi-atom'
+
+
multiple-user.communities
multiple-user.communities-fields="community.name"
--
GitLab