From 65c6b77fbc10e916fa6b62e05f15fc9ce34cec99 Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Thu, 21 Nov 2019 20:45:57 +0100 Subject: [PATCH 1/4] feature: admin of a circle displayed - CSS added - architecture reworked - new field 'is-admin' used - members field used instead of team field. --- src/page-circle-profile.pug | 6 +- src/styles/components/_index.scss | 2 +- src/styles/components/tags.scss | 19 +++ src/styles/components/user-role.scss | 9 -- src/styles/layout/circle/circle-edit.scss | 2 +- src/styles/layout/circle/circle-profile.scss | 137 +++++++++--------- src/styles/layout/circle/circle.scss | 2 +- src/styles/layout/job-offers/job-offers.scss | 2 +- src/styles/layout/members/members.scss | 2 +- .../project-profile/project-profile.scss | 5 - src/styles/layout/user/user-profile.scss | 2 +- src/templates/hd-circle-team.pug | 17 ++- 12 files changed, 108 insertions(+), 97 deletions(-) create mode 100644 src/styles/components/tags.scss delete mode 100644 src/styles/components/user-role.scss diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index 5a7302e..cd4e302 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden) sib-display.block( bind-resources - fields='team' + fields='members' - multiple-team='' - widget-team='circle-team-template' + multiple-members='' + widget-members='circle-team-template' ) div.box-button diff --git a/src/styles/components/_index.scss b/src/styles/components/_index.scss index ce38dc6..eecf780 100644 --- a/src/styles/components/_index.scss +++ b/src/styles/components/_index.scss @@ -4,4 +4,4 @@ @import 'howto'; @import 'sidebar'; @import 'skills'; -@import 'user-role'; \ No newline at end of file +@import 'tags'; \ No newline at end of file diff --git a/src/styles/components/tags.scss b/src/styles/components/tags.scss new file mode 100644 index 0000000..6fb27df --- /dev/null +++ b/src/styles/components/tags.scss @@ -0,0 +1,19 @@ +%tag-role { + border: 1px solid $color-45-95-54; + border-radius: 3px; + color: $color-210-4-50; + font-size: 1.4rem; + font-weight: 400; + margin-right: 0.6rem; + padding: 0.2rem 0.98rem; +} + +%tag-admin { + border: 1px solid $color-244-73-62; + border-radius: 3px; + color: $color-244-73-62; + font-size: 1.4rem; + font-weight: 400; + margin-left: 0.6rem; + padding: 0.3rem 0.98rem; +} \ No newline at end of file diff --git a/src/styles/components/user-role.scss b/src/styles/components/user-role.scss deleted file mode 100644 index 4e2c47e..0000000 --- a/src/styles/components/user-role.scss +++ /dev/null @@ -1,9 +0,0 @@ -%user-role { - border: 1px solid $color-45-95-54; - border-radius: 3px; - color: $color-210-4-50; - font-size: 1.4rem; - font-weight: 400; - margin-right: 0.4rem; - padding: 0.2rem 0.98rem; - } \ No newline at end of file diff --git a/src/styles/layout/circle/circle-edit.scss b/src/styles/layout/circle/circle-edit.scss index a491e70..c1e2683 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -133,7 +133,7 @@ display: flex; [name='groups'] { - @extend %user-role; + @extend %tag-role; } } } diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 7810d26..73e2b4e 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -15,87 +15,84 @@ } } - >div { /* peut-être à mettre dans main.scss */ - - >sib-multiple { + /* peut-être à mettre dans main.scss */ - label { - display: none; + circle-team-template>sib-display>div { + display: grid; + grid-column-gap: 1.6rem; + grid-template-columns: 7vh auto; + grid-template-rows: repeat(2, 5.2vh); + + >[name='account.picture'] { + align-items: center; + align-self: center; + background-color: $color-213-20-91; + border-radius: 50%; + display: flex; + grid-column: 1 / span 1; + grid-row: 1 / span 2; + height: 7vh; + justify-content: center; + overflow: hidden; + position: relative; + width: 7vh; + + img { + background-color: white; + height: 100%; + left: 0; + object-fit: cover; + position: absolute; + top: 0; + width: 100%; } - >div>circle-team-template[name='team']>sib-display>div { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + object { + height: 45%; + width: 45%; + } + } - >[name='account.picture'] { - align-items: center; - align-self: center; - background-color: $color-213-20-91; - border-radius: 50%; - display: flex; - grid-column: 1 / span 1; - grid-row: 1 / span 2; - height: 7vh; - justify-content: center; - overflow: hidden; - position: relative; - width: 7vh; + >[name='sup'] { + align-items: center; + align-self: end; + display: flex; + grid-column: 2 / span 1; + grid-row: 1 / span 1; + margin-bottom: 0.50rem; - img { - background-color: white; - height: 100%; - left: 0; - object-fit: cover; - position: absolute; - top: 0; - width: 100%; - } + .user-name { + font-weight: 600; + } - object { - height: 45%; - width: 45%; - } + .tag-group { + display: flex; + margin-left: 0.6rem; + + [name='user.groups'] { + @extend %tag-role; } + } - >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + .tag-admin:not(:empty) { + @extend %tag-admin; + } + } - [name='name'] { - font-weight: 600; - } + >[name='sub'] { + align-self: start; + grid-column: 2 / span 1; + grid-row: 2 / span 1; + margin-top: 0.50rem; - sib-multiple { - display: flex; - margin-left: 1rem; + >.city:not(:empty) { + @include mdi('atom'); + align-items: center; + display: flex; - [name='groups'] { - @extend %user-role; - } - } - } - - >[name='sub'] { - align-self: start; - grid-column: 2 / span 1; - grid-row: 2 / span 1; - margin-top: 0.50rem; - - >[name$='profile.city']:not(:empty) { - @include mdi('atom'); - align-items: center; - display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } - } + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; } } } diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss index 2d483cf..160ecae 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -135,7 +135,7 @@ display: flex; [name='groups'] { - @extend %user-role; + @extend %tag-role; } } } diff --git a/src/styles/layout/job-offers/job-offers.scss b/src/styles/layout/job-offers/job-offers.scss index d8324ab..172e863 100644 --- a/src/styles/layout/job-offers/job-offers.scss +++ b/src/styles/layout/job-offers/job-offers.scss @@ -88,7 +88,7 @@ sib-job-board { } >* { - @extend %user-role; + @extend %tag-role; } } diff --git a/src/styles/layout/members/members.scss b/src/styles/layout/members/members.scss index 79ffa52..6ee0e9c 100644 --- a/src/styles/layout/members/members.scss +++ b/src/styles/layout/members/members.scss @@ -32,7 +32,7 @@ } member-info-groups { - @extend %user-role; + @extend %tag-role; } #members-list { diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 287172f..51893e1 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -117,11 +117,6 @@ @include mdi('atom'); align-items: center; display: flex; - - &::before { - color: $color-43-100-50; - margin-right: 0.50rem; - } } } } diff --git a/src/styles/layout/user/user-profile.scss b/src/styles/layout/user/user-profile.scss index 60a05c2..2192233 100644 --- a/src/styles/layout/user/user-profile.scss +++ b/src/styles/layout/user/user-profile.scss @@ -35,7 +35,7 @@ padding-left: 1.4rem; groups-name { - @extend %user-role; + @extend %tag-role; } } } diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index 7db73b7..fa64815 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -3,14 +3,23 @@ include hd-user-avatar.pug sib-widget(name='circle-team-template') template sib-display( - data-src="${await value}" - fields='account.picture, sup(name, groups), sub(profile.city)' + data-src='${await value}' + fields='account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)' + + class-user.name='user-name' + class-is_admin='tag-admin' + class-user.groups='tag-group' + class-user.profile.city='city' widget-account.picture='hd-user-avatar' - widget-groups='hd-user-groups' + widget-is_admin='hd-user-admin' + widget-user.groups='hd-user-groups' - multiple-groups='' + multiple-user.groups='' ) +sib-widget(name='hd-user-admin') + template ${await value ? "Administrator" : ""} + sib-widget(name='hd-user-groups') template ${await value.name} From 7fae8e63877d0f98622d0d51650704fafc33ab07 Mon Sep 17 00:00:00 2001 From: gaelle morin Date: Fri, 20 Dec 2019 16:09:18 +0100 Subject: [PATCH 2/4] feature: members' name of a project now displayed --- src/page-project-profile.pug | 7 +++-- src/styles/layout/circle/circle-profile.scss | 1 + .../project-profile/project-profile.scss | 30 ++++++++++++++++--- src/templates/hd-captain.pug | 8 ++++- src/templates/hd-project-team.pug | 20 +++++++++++++ 5 files changed, 58 insertions(+), 8 deletions(-) create mode 100644 src/templates/hd-project-team.pug diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index f8b72ff..aefb717 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -7,6 +7,7 @@ sib-router(default-route='project-profile', hidden) include templates/hd-captain.pug include templates/hd-circle-team.pug include templates/hd-customer.pug + include templates/hd-project-team.pug .content-box__info @@ -65,10 +66,10 @@ sib-router(default-route='project-profile', hidden) sib-display( bind-resources - fields='team' + fields='members' - widget-team='circle-team-template' - multiple-team + widget-members='hd-project-team' + multiple-members ) sib-widget(name='project-leave-button') diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 73e2b4e..cba66e5 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -67,6 +67,7 @@ .tag-group { display: flex; + margin-bottom: 1px; margin-left: 0.6rem; [name='user.groups'] { diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 51893e1..b2c594e 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -50,7 +50,7 @@ } hd-captain>sib-display>div, - circle-team-template>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */ + hd-project-team>sib-display>div { /* Maybe move it in main.scss. /!\ some fields are different */ display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; @@ -93,7 +93,7 @@ grid-row: 1 / span 1; margin-bottom: 0.50rem; - [name='name'] { + .user-name { font-weight: 600; } @@ -101,8 +101,9 @@ display: flex; margin-left: 1rem; - [name='groups'] { - @extend %user-role; + [name='groups'], + [name='user.groups'] { + @extend %tag-role; } } } @@ -117,6 +118,27 @@ @include mdi('atom'); align-items: center; display: flex; + margin-right: 1.6rem; + + &::before { + color: $color-43-100-50; + margin-right: 0.50rem; + } + } + + >[name$='name']:not(:empty), + >[name='is_lead'] { + @include icon('eyeglass'); + align-items: center; + display: flex; + + &::before { + color: $color-43-100-50; + font-size: 1.9rem; + font-weight: bold; + margin-left: 0; + margin-right: 0.50rem; + } } } } diff --git a/src/templates/hd-captain.pug b/src/templates/hd-captain.pug index f16a51a..7119ea2 100644 --- a/src/templates/hd-captain.pug +++ b/src/templates/hd-captain.pug @@ -4,8 +4,14 @@ sib-widget(name='hd-captain') template sib-display( data-src="${await value}" - fields='account.picture, sup(name), sub(profile.city)' + fields='account.picture, sup(name), sub(profile.city, is_lead)' + + class-name='user-name' + class-profile.city='city' widget-account.picture='hd-user-avatar' + widget-is_lead='hd-user-lead' ) +sib-widget(name='hd-user-lead') + template Project lead diff --git a/src/templates/hd-project-team.pug b/src/templates/hd-project-team.pug new file mode 100644 index 0000000..639e2ff --- /dev/null +++ b/src/templates/hd-project-team.pug @@ -0,0 +1,20 @@ +include hd-user-avatar.pug + +sib-widget(name='hd-project-team') + template + sib-display( + data-src='${await value}' + fields='account.picture, sup(user.name, user.groups), sub(user.profile.city, name)' + + class-user.name='user-name' + class-user.groups='tag-group' + class-user.profile.city='city' + + widget-account.picture='hd-user-avatar' + widget-user.groups='hd-user-groups' + + multiple-user.groups='' + ) + +sib-widget(name='hd-user-groups') + template ${await value.name} From 2e7d8f5ec9cc9bc56354efd73db7fa1551d180c6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Fri, 20 Dec 2019 15:29:05 +0000 Subject: [PATCH 3/4] Gm fixbug --- src/menu-left.pug | 2 +- src/styles/base/menu-left.scss | 10 +++++++++- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/menu-left.pug b/src/menu-left.pug index 29b0242..99d227c 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -27,7 +27,7 @@ nav#main__menu div.menu-icon.icon-folder-alt sib-route(name='project', rdf-type='hd:project', use-id='', hidden) div.sub-menu.menu-notification - sib-display( + sib-display.project-tab( data-src=`${endpoints.projects}` fields='project(customer.name, name), badge' class-customer.name='project-customer' diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 2ab7273..606db3c 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -113,8 +113,12 @@ width: calc(150px - 10px); /* 10px = padding of the sib-set-default = better alignment */ } + } - &:hover { + .project-tab>div>sib-display[fields='project(customer.name, name), badge']>div:hover { + background-color: $color-233-20-17; + + sib-set-default[name='project'] { background-color: $color-233-20-17; box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26); color: $color-218-100-98; @@ -126,6 +130,10 @@ .project-name { width: auto; } + + .project-name { + font-weight: normal; + } } } From f3890f49e00bfa7b5a739603362d0e115f2506f1 Mon Sep 17 00:00:00 2001 From: Calum Mackervoy Date: Fri, 20 Dec 2019 23:22:59 +0000 Subject: [PATCH 4/4] avatar displayed correctly --- src/styles/layout/circle/circle-profile.scss | 2 +- src/templates/hd-circle-team.pug | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index cba66e5..96e50e5 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -23,7 +23,7 @@ grid-template-columns: 7vh auto; grid-template-rows: repeat(2, 5.2vh); - >[name='account.picture'] { + >[name='user.account.picture'] { align-items: center; align-self: center; background-color: $color-213-20-91; diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index fa64815..ff90ce0 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -4,14 +4,14 @@ sib-widget(name='circle-team-template') template sib-display( data-src='${await value}' - fields='account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)' + fields='user.account.picture, sup(user.name, is_admin, user.groups), sub(user.profile.city)' class-user.name='user-name' class-is_admin='tag-admin' class-user.groups='tag-group' class-user.profile.city='city' - widget-account.picture='hd-user-avatar' + widget-user.account.picture='hd-user-avatar' widget-is_admin='hd-user-admin' widget-user.groups='hd-user-groups'