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

update: add administration & circle creation

Browse Source
This commit is contained in:
Jean-Baptiste Pasquier
2019-10-25 19:15:45 +02:00
parent 1c2789812e
commit 09f35bd3c0
11 changed files with 285 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
src/index.pug
View File

@ -37,6 +37,9 @@ html(lang="en")
#messages(hidden).with-sidebar
include page-messages.pug
#admin(hidden).with-sidebar
include page-admin.pug
//- #my-profile(hidden).no-sidebar
//- include page-user-profile.pug

11
src/menu-left.pug
View File

@ -15,8 +15,8 @@ nav#main__menu
//- sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
//- div.menu-label Job offers
//- div.menu-icon.icon-briefcase
//- sib-route(hidden, name='job-offer-create')
//- sib-route(hidden, name='job-offer-edit', use-id)
//- sib-route(name='job-offer-create')
//- sib-route(name='job-offer-edit', use-id)
//- div.divider
//- div.menu-wrapper
//- div.menu
@ -24,7 +24,7 @@ nav#main__menu
//- div.menu-icon.icon-arrow-up
//- div.menu-label Projects
//- div.menu-icon.icon-folder-alt
//- sib-route(hidden,name='project', id-prefix=`${endpoints.projects}`, rdf-type='hd:project', use-id='')
//- sib-route(name='project', rdf-type='hd:project', use-id='')
//- div.sub-menu.menu-notification
//- sib-display(
//- data-src=`${endpoints.projects}`
@ -46,7 +46,7 @@ nav#main__menu
div.menu-icon.icon-arrow-up
div.menu-label Circles
div.menu-icon.icon-folder-alt
sib-route(hidden,name='circle', id-prefix=`${endpoints.circles}`, rdf-type='hd:circle', use-id='')
sib-route(name='circle', rdf-type='hd:circle', use-id='')
div.sub-menu.menu-notification
sib-display(
data-src=`${endpoints.circles}`
@ -70,7 +70,7 @@ nav#main__menu
div.menu-icon.icon-arrow-up
div.menu-label Chat
div.menu-icon.icon-envelope-letter
sib-route(hidden, name='messages', id-prefix=`${endpoints.users}`, rdf-type='foaf:user', use-id='')
sib-route(name='messages', rdf-type='foaf:user', use-id='')
div.sub-menu.menu-notification
sib-display(
data-src=`${endpoints.users}`
@ -82,6 +82,7 @@ nav#main__menu
next='messages'
)
sib-route(name='admin')
//- div.divider
//- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')

19
src/page-admin-circles-create.pug Normal file
View File

@ -0,0 +1,19 @@
div.content-box__info
sib-link(class="backlink", next='admin-circle-list') Back
h1 New circle
p.center Here you can create a new circle according to your interests, what you want to share, etc.
sib-form.block(
data-src=`${endpoints.circles}`
fields='name, description'
class-name='form-label is-light is-full-width'
class-description='form-label is-light is-full-width'
widget-description='sib-form-textarea'
submit-button='Save'
)

56
src/page-admin-circles.pug Normal file
View File

@ -0,0 +1,56 @@
.content-box.full-width.with-form
sib-router(default-route='admin-circle-list')
sib-route(name='admin-circle-list')
sib-route(name='admin-circle-create')
div.content-box__header
h2 Administration
#admin-circle-list(hidden)
sib-widget(name="admin-circle-leave")
template
sib-ac-checker(
permission="acl:Delete"
data-src="${value['@id']}"
)
sib-delete(
data-src="${value['@id']}"
data-label='Leave'
)
sib-widget(name="admin-circle-join")
template
sib-form(
data-src="${src}"
nested-field='members'
fields='user'
label-user=''
range-user=`${endpoints.users}`
widget-user='sib-form-dropdown'
set-user-id-select="user"
submit-button='Join'
)
div.content-box__info
sib-link(class="right-btn", next="admin-circle-create") Create a new circle
h3 Circles
sib-display.block(
data-src=`${endpoints.circles}`
fields="name, owner.name, buttons(members, button)"
search-fields="name"
search-label-name="Search a Circle"
multiple-groups=""
widget-members="admin-circle-leave"
multiple-members=""
widget-button="admin-circle-join"
action-button="button"
)
#admin-circle-create(hidden)
include page-admin-circles-create.pug

10
src/page-admin-projects.pug Normal file
View File

@ -0,0 +1,10 @@
.content-box.full-width.with-form
sib-router(default-route='admin-project-list')
sib-route(name='admin-project-list')
sib-route(name='admin-project-create')
#admin-project-list(hidden)
#admin-project-create(hidden)

18
src/page-admin-users.pug Normal file
View File

@ -0,0 +1,18 @@
.content-box.full-width.with-form
sib-router(default-route='admin-users-list')
sib-route(name='admin-users-list')
sib-route(name='admin-users-create')
div.content-box__header
h2 Administration
#admin-users-list(hidden)
div.content-box__info
sib-display.block(
data-src=`${endpoints.users}`
fields="account.picture, name, username, email, groups"
multiple-groups=""
)
#admin-users-create(hidden)

21
src/page-admin.pug Normal file
View File

@ -0,0 +1,21 @@
.views-container
#admin-circles(hidden)
include page-admin-circles.pug
//- #admin-users(hidden)
//- include page-admin-users.pug
//- #admin-projects(hidden)
//- include page-admin-projects.pug
nav.jsRightMenu(role='navigation')
sib-router(default-route='admin-circles')
ul
li.jsOffsiteToggle
a Fold menu
//- sib-route(name='admin-users')
li
a Users
sib-route(name='admin-circles')
li
a Circles
//- sib-route(name='admin-projects')
li
a Projects

26
src/page-circle-create.pug
View File

@ -1,26 +0,0 @@
.content-box.with-padding.with-form.full-width
h1 New group
p Here you can create a new group according to your interests, what you want to share, etc.
sib-form(
data-src=`${endpoints.circles}`,
range-owner=`${endpoints.users}`,
range-team=`${endpoints.users}`
fields='name, description, description-text, owner, owner-text, team, team-text, jabberRoom, foaf:jabberID',
label-name="Channel's name",
label-description='Description',
label-owner='Owner of this channel',
label-foaf:jabberID='Chatroom id',
label-team='Member(s) of this channel',
value-description-text='You can write a short description like "Here, we are like Pinky and the Brain, we talk about strategy to conquer the world".',
value-owner-text='The one who will admin this channel',
value-team-text='Add any members as you want.',
widget-description='sib-form-textarea',
widget-jabberRoom='sib-form-checkbox',
)
//- widget-team='sib-form-multiple-dropdown'

4
src/page-user-panel.pug
View File

@ -4,6 +4,6 @@ nav(role="user's functionalities menu")
//- sib-link(next='my-profile') My profile
//-li
sib-link(next='user-settings') Settings
//-li
sib-link(name='user-admin') Admin
li
sib-link(next='admin') Admin
button(role='log out' onclick="document.querySelector('sib-auth').logout();") Log out

9
src/scripts/index.js
View File

@ -46,9 +46,9 @@ document.addEventListener('DOMContentLoaded', function (event) {
for(sibForm of document.querySelectorAll('[set-user-id-select]')) {
sibForm.addEventListener('populate', () => {
document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'none';
if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="Leave circle"]').length == 0) {
document.querySelector('sib-form[submit-button="Join Circle"]').style.display = 'inline-block';
document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.style.display = 'none');
if(document.querySelectorAll('sib-ac-checker:not([hidden]) > sib-delete[data-label="^Leave"]').length == 0) {
document.querySelectorAll('sib-form[submit-button^="Join"]').forEach(el=>el.style.display = 'inline-block');
}
// BUG: Populate event trigger before the view is fully loaded! - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/521
for(select of sibForm.querySelectorAll('select[name="'+sibForm.getAttribute('set-user-id-select')+'"]')) {
@ -58,6 +58,9 @@ document.addEventListener('DOMContentLoaded', function (event) {
}
});
}
for(leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.style.display = "none"; // Hide Join button
}
}
}).catch(error => console.log(error));

293
src/styles/layout/circle/circle-edit.scss
View File

@ -1,178 +1,173 @@
#circle-edit {
.table-header {
background: $color-228-25-79;
color: white;
display: flex;
font-size: 1.6rem;
font-weight: 600;
justify-content: space-around;
text-align: center;
>*{
border-right: 1px solid $color-228-25-79;
flex: 1;
padding: 1rem;
width: 50%;
}
>*:last-of-type {
border-left: 1px solid white;
@media (max-width: 1220px) {
display: none;
}
}
}
.table-body div team-template-edit {
display: flex;
justify-content: space-between;
>* {
border-bottom: 1px solid $color-228-25-79;
flex: 1;
width: 50%;
}
sib-display {
border-left: 1px solid $color-228-25-79;
border-right: 1px solid $color-228-25-79;
padding: 0 2.2rem;
}
sib-ac-checker {
align-items: center;
border-right: 1px solid $color-228-25-79;
.table-header {
background: $color-228-25-79;
color: white;
display: flex;
justify-content: flex-end;
padding: 2.7rem 2.2rem;
font-size: 1.6rem;
font-weight: 600;
justify-content: space-around;
text-align: center;
@media (max-width: 1220px) {
display: none;
}
>*{
border-right: 1px solid $color-228-25-79;
flex: 1;
padding: 1rem;
width: 50%;
}
>*:last-of-type {
border-left: 1px solid white;
@media (max-width: 1220px) {
display: none;
}
}
}
.table-body div team-template-edit {
display: flex;
justify-content: space-between;
>* {
border-bottom: 1px solid $color-228-25-79;
flex: 1;
width: 50%;
}
>*:nth-child(odd) {
border-left: 1px solid $color-228-25-79;
border-right: 1px solid $color-228-25-79;
padding: 0 2.2rem;
}
>*:nth-child(even) {
display: flex;
border-right: 1px solid $color-228-25-79;
justify-content: flex-end;
padding: 2.7rem 2.2rem;
}
}
justify-content: space-between;
.member-select.color {
>* {
border-bottom: 1px solid $color-228-25-79;
flex: 1;
width: 50%;
}
.ss-main {
color: $color-233-18-29;
}
}
sib-display {
border-left: 1px solid $color-228-25-79;
border-right: 1px solid $color-228-25-79;
padding: 0 2.2rem;
}
sib-multiple[widget='team-template-edit'] {
label {
display: none;
}
>div>team-template-edit>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'] {
sib-ac-checker {
align-items: center;
align-self: center;
background-color: $color-213-20-91;
border-radius: 50%;
border-right: 1px solid $color-228-25-79;
display: flex;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
height: 7vh;
justify-content: center;
overflow: hidden;
position: relative;
width: 7vh;
justify-content: flex-end;
padding: 2.7rem 2.2rem;
img {
background-color: white;
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss
object {
height: 45%;
width: 45%;
}
=======
[name='name'] {
font-weight: 600;
margin-right: 1rem;
>>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss
@media (max-width: 1220px) {
display: none;
}
}
>[name='sup'] {
align-self: end;
.table-body div team-template-edit {
display: flex;
<<<<<<< HEAD:src/styles/layout/circle-profile/circle-edit.scss
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
=======
>>>>>>> 81d885730dd7673ee424a72b6f0c663c7c1cc5b7:src/styles/layout/circle/circle-edit.scss
justify-content: space-between;
[name='name'] {
font-weight: 600;
>* {
border-bottom: 1px solid $color-228-25-79;
flex: 1;
width: 50%;
}
>*:nth-child(odd) {
border-left: 1px solid $color-228-25-79;
border-right: 1px solid $color-228-25-79;
padding: 0 2.2rem;
}
>*:nth-child(even) {
display: flex;
border-right: 1px solid $color-228-25-79;
justify-content: flex-end;
padding: 2.7rem 2.2rem;
}
}
.member-select.color {
.ss-main {
color: $color-233-18-29;
}
}
sib-multiple[widget='team-template-edit'] {
label {
display: none;
}
sib-multiple {
display: flex;
margin-left: 1rem;
>div>team-template-edit>sib-display>div {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
[name='groups'] {
@extend %user-role;
>[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%;
}
object {
height: 45%;
width: 45%;
}
[name='name'] {
font-weight: 600;
margin-right: 1rem;
}
}
}
>[name='sub'] {
align-self: start;
grid-column: 2 / span 1;
grid-row: 2 / span 1;
margin-top: 0.50rem;
>[name='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
>[name$='profile.city']:not(:empty) {
@include mdi('atom');
align-items: center;
display: flex;
[name='name'] {
font-weight: 600;
}
&::before {
color: $color-43-100-50;
margin-right: 0.50rem;
sib-multiple {
display: flex;
margin-left: 1rem;
[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;
}
}
}
}
}
}
}
}
}