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

feature: new page to display info about a circle and add members

Browse Source 
- New styles for "add users" drodown
- New custom widget to display members
- Use of the permission system
This commit is contained in:
Gaëlle Morin 2019-09-25 16:16:17 +02:00
parent 61be5d780c
commit 5a865693a1
15 changed files with 312 additions and 135 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/page-circle-chat.pug
View File

@ -1,7 +1,9 @@
.content-box.full-width
sib-display.chat-header(
sib-display.content-box__header(
bind-resources
fields='name'
class-name='name'
)
.chat-view
sib-chat(

60
src/page-circle-profile.pug
View File

@ -1,29 +1,49 @@
.content-box.with-padding.full-width
h2 Channel's name:
.content-box.full-width.with-form
include templates/hd-circle-team.pug
div.content-box__header.with-edit
sib-display(
fields='name',
bind-resources
fields='name'
class-name='name'
)
h2 Description:
sib-display(
fields='description',
sib-link(class="editlink", next="circle-edit" bind-resources)
div.content-box__info
sib-display.block(
bind-resources
fields='label-description, description, entitled(title, creationDate)'
value-label-description='Description: '
default-description='No description available.'
value-title='Creation date:'
)
h2 In group:
sib-display.block-group(
nested-field='team',
fields='teammate-img(account.picture), teammate-name(name), teammate-pseudonym(before-pseudo, username), teammate-profile, teammate-contact',
template-teammate-contact='chat-link',
value-before-pseudo='@',
value-teammate-contact='Send a message',
value-teammate-profile='View profile',
widget-account.picture='sib-display-img',
next='member',
sib-ac-checker(permission='acl:Write' bind-resources)
sib-form.block.team-form(
bind-resources
fields='team'
range-team=`${endpoints.users}`
partial=''
class-team='team form-label is-dark'
label-team='Members:'
widget-team='sib-form-auto-completion'
submit-button='Add a member'
)
sib-display.block(
bind-resources
fields='team'
multiple-team=''
widget-team='team-template'
)

46
src/page-circle.pug
View File

@ -1,26 +1,26 @@
.views-container
#circle-chat
include page-circle-chat.pug
//- #circle-profile
//- include page-circle-profile.pug
//- #circle-edit
//- include page-circle-edit.pug
//- #circle-create
//- include page-circle-create.pug
//- nav.jsRightMenu(role='navigation')
//- sib-router(default-route='circle-chat')
//- ul
//- li.jsOffsiteToggle
//- a Fold menu
//- sib-route(name='circle-chat')
//- li
//- a Chat
//- sib-route(name='circle-profile')
//- li
//- a Information
//- sib-route(name='circle-edit')
//- //- li
//- //- a Edit
//- sib-route(name='circle-create')
//- //- li
//- //- a Add new
#circle-profile
include page-circle-profile.pug
//-#circle-edit
include page-circle-edit.pug
//-#circle-create
include page-circle-create.pug
nav.jsRightMenu(role='navigation')
sib-router(default-route='circle-chat')
ul
li.jsOffsiteToggle
a Fold menu
sib-route(name='circle-chat')
li
a Chat
sib-route(name='circle-profile')
li
a Information
//-sib-route(name='circle-edit')
li
a Edit
//-sib-route(name='circle-create')
li
a Add new

4
src/page-messages.pug
View File

@ -1,7 +1,9 @@
.content-box.full-width
sib-display.chat-header(
sib-display.content-box__header(
bind-resources
fields='username'
class-username='name'
)
.chat-view
sib-chat(

1
src/styles/_index.scss
View File

@ -16,7 +16,6 @@ div#viewport {
@import 'components/index';
@import 'layout/members/index';
@import 'layout/job-offers/index';
@import 'components/comment.scss';
@import 'layout/project-profile/index';
@import 'layout/circle-profile/index';
@import 'layout/user/index';

45
src/styles/base/form.scss
View File

@ -102,6 +102,51 @@
/* CLASSES Peut-être à sortir de .content-box */
.block.team-form>form { /* circle-profile */
display: flex;
flex-direction: row;
label {
>.ss-main {
font-weight: normal;
min-width: 35vw;
text-transform: none;
>.ss-single-selected {
align-items: center;
background-color: #ebeffa;
border: none;
border-radius: 0px;
display: flex;
justify-content: flex-end;
min-height: 4.2rem;
padding-left: 1.2rem;
.ss-arrow {
font-size: 1.8rem;
margin: 0 18px 0 0;
span {
border: solid $color-244-73-62;
border-width: 0 2px 2px 0;
}
}
}
}
}
>input[type='submit'] {
background-color: transparent;
border: 1px solid #6157e5;
color: #6157e5;
font-size: 1.4rem;
align-self: flex-end;
margin-bottom: 0.6rem;
margin-left: 4.2rem;
}
}
.form-container>form {
margin-top: 2.7rem;
}

1
src/styles/base/header.scss
View File

@ -145,6 +145,7 @@
}
img {
background-color: white;
height: 100%;
object-fit: cover;
object-position: center;

60
src/styles/base/main.scss
View File

@ -56,14 +56,14 @@ h6 {
font-weight: 600;
padding: 0;
span {
/*span {
font-weight: 400;
padding-left: 0.85rem;
&:before {
content: '// ';
}
}
}*/
}
h1 {
@ -75,7 +75,7 @@ h2 {
}
h3 {
font-size: 1.6rem;
font-size: 1.7rem;
}
h4 {
@ -109,6 +109,10 @@ a {
padding: 5rem;
}
%padding-block {
padding: 3.2rem;
}
.content-box {
@include window-style-modal();
display: flex;
@ -119,7 +123,7 @@ a {
&.full-width {
background: $color-0-0-100;
flex: 1;
font-size: 1.5rem;
font-size: 1.6rem;
margin: 0 auto;
min-height: calc(100vh - 84px);
}
@ -129,6 +133,45 @@ a {
}
}
.content-box__header {
padding: 2.3rem 3rem;
div {
color: $color-233-18-29;
display: flex;
font-size: 2rem;
&>* {
align-self: center;
}
.name {
font-size: 2rem;
font-weight: bold;
margin: 1.1rem 0;
}
}
}
.content-box__header.with-edit {
border-bottom: 1px solid $color-221-51-90;
display: flex;
justify-content: space-between;
sib-display {
display: flex;
text-transform: uppercase;
}
sib-link {
display: flex;
&::before {
align-self: center;
display: flex;
}
}
}
.drive {
width: 100%;
border: 0;
@ -151,6 +194,15 @@ a {
}
}
.editlink {
@include icon('pencil');
background: $color-244-73-62;
border-radius: 50%;
color: white;
padding: 12px;
}
.name {
color: $color-216-4-22;
font-size: 2rem;

1
src/styles/components/_index.scss
View File

@ -1,4 +1,5 @@
@import 'chat';
@import 'comment.scss';
@import 'filters';
@import 'howto';
@import 'sidebar';

17
src/styles/components/chat.scss
View File

@ -1,20 +1,3 @@
// chat
.chat-header {
div {
color: $color-233-18-29;
display: flex;
flex-direction: column;
margin: 3rem;
&>:first-child {
font-size: 2rem;
font-weight: bold;
}
}
}
.chat-view {
padding: 0;
height: calc(100vh - 84px - 83px);

2
src/styles/components/user-role.scss
View File

@ -5,5 +5,5 @@
font-size: 1.4rem;
font-weight: 400;
margin-right: 0.4rem;
padding: calc(1.6rem - 0.8em) 0.7em;
padding: 0.2rem 0.98rem;
}

157
src/styles/layout/circle-profile/circle-profile.scss
View File

@ -1,78 +1,133 @@
#circle-profile {
.block-group > div {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
margin: 0;
padding: 0;
sib-display > div {
align-items: center;
box-shadow: 0 0 6px 0 rgba(0, 0, 0, 0.14);
display: grid;
font-size: 1.6rem;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(3, 1fr);
height: auto;
justify-items: center;
margin: 1rem 0.5rem 1rem 0;
position: relative;
padding-right: 1rem;
padding-top: 1rem;
text-align: center;
width: 14em;
&:hover {
cursor: pointer;
box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.24);
top: -2px;
.content-box__info {
@extend %padding-block;
}
> sib-set-default[name='teammate-img'] {
background-color: $color-215-9-73;
.block {
>form { /* peut-être à mettre dans main.scss */
margin-bottom: 2.6rem;
.form-label.is-dark>label {
margin-top: 0;
>div:first-child {
@extend h3;
font-weight: bold;
margin: 0 0 1.4rem;
text-transform: uppercase;
}
}
}
>div { /* peut-être à mettre dans main.scss */
display: flex;
flex-direction: column;
margin-bottom: 2.6rem;
position: relative;
>[name^='label'] {
@extend h3;
font-weight: bold;
margin: 0 0 1.4rem;
text-transform: uppercase;
}
>[name='description'] {
max-width: 80%;
}
>[name='entitled'] {
align-self: flex-end;
position: absolute;
>*:first-child {
margin-right: 0.8rem;
}
}
>sib-multiple {
label {
display: none;
}
>div>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);
>[name='account.picture'] {
align-items: center;
align-self: center;
background-color: $color-213-20-91;
border-radius: 50%;
grid-column: 1 / span 2;
display: flex;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
height: 6vh;
height: 7vh;
justify-content: center;
overflow: hidden;
width: 6vh;
position: relative;
width: 7vh;
img {
background-color: white;
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
object {
height: 45%;
width: 45%;
}
}
sib-set-default[name='teammate-name'] {
grid-column: 3 / span 2;
>[name='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
[name='name'] {
font-weight: 600;
}
> sib-set-default[name='teammate-pseudonym'] {
sib-multiple {
display: flex;
margin-left: 1rem;
[name='groups'] {
@extend %user-role;
}
}
}
>[name='sub'] {
align-self: start;
font-size: 1.2rem;
grid-column: 3 / span 2;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
}
margin-top: 0.50rem;
> sib-display-value[name='teammate-profile'] {
color: $color-216-4-22;
display: block;
font-size: 1.2rem;
grid-column: 1 / span 2;
grid-row: 3 / span 1;
}
>[name$='profile.city']:not(:empty) {
@include mdi('atom');
align-items: center;
display: flex;
> sib-display-value[name='teammate-contact'] {
color: $color-244-73-62;
font-size: 1.2rem;
justify-self: stretch;
grid-column: 3 / span 2;
grid-row: 3 / span 1;
&::before {
color: $color-43-100-50;
margin-right: 0.50rem;
}
}
}
}
}
}
}

2
src/styles/layout/project-profile/project-profile.scss
View File

@ -6,7 +6,7 @@
[name^='label-'] {
display: block;
font-weight: bold;
margin-bottom: 1.4rem;
margin: 1.4rem 0;
text-transform: uppercase;
@extend h2;
}

16
src/templates/hd-circle-team.pug Normal file
View File

@ -0,0 +1,16 @@
include hd-user-avatar.pug
sib-widget(name='team-template')
template
sib-display(
data-src="${await value}"
fields='account.picture, sup(name, groups), sub(profile.city)'
widget-account.picture='hd-user-avatar'
widget-groups='hd-user-groups'
multiple-groups=''
)
sib-widget(name='hd-user-groups')
template ${await value.name}

1
src/templates/template-team.pug
View File

@ -21,3 +21,4 @@ sib-widget(name='team-template')
data-src="${value.user ? value.user['@id'] : ''}"
fields='username'
)