Merge branch 'circle-css' into 'staging'

Circle

See merge request startinblox/applications/sib-app!77
This commit is contained in:
Jean-Baptiste Pasquier 2019-11-19 15:07:51 +00:00
commit c5eb67b4d4
36 changed files with 1080 additions and 463 deletions

View File

@ -2,5 +2,7 @@
{ {
"inbox": "http://happy-dev.fr/owl/#inbox", "inbox": "http://happy-dev.fr/owl/#inbox",
"object": "http://happy-dev.fr/owl/#object", "object": "http://happy-dev.fr/owl/#object",
"author": "http://happy-dev.fr/owl/#author" "author": "http://happy-dev.fr/owl/#author",
"account": "http://happy-dev.fr/owl/#account",
"jabberID": "foaf:jabberID"
} }

View File

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

View File

@ -4,7 +4,8 @@ sib-widget(name='hd-counter')
sib-widget(name='hd-create') sib-widget(name='hd-create')
template template
p.create You are not part of any ${value} yet. To create a new one, you can go to the administration panel (coming soon). p.create You are not part of any ${value} yet. To create a new one, you can go to the
sib-link(next='admin') administration panel
nav#main__menu nav#main__menu
sib-router#navbar-router(default-route='members') sib-router#navbar-router(default-route='members')
@ -15,8 +16,8 @@ nav#main__menu
//- sib-route.menu(name='job-offers', rdf-type='hd:joboffer') //- sib-route.menu(name='job-offers', rdf-type='hd:joboffer')
//- div.menu-label Job offers //- div.menu-label Job offers
//- div.menu-icon.icon-briefcase //- div.menu-icon.icon-briefcase
//- sib-route(hidden, name='job-offer-create') //- sib-route(name='job-offer-create', hidden)
//- sib-route(hidden, name='job-offer-edit', use-id) //- sib-route(name='job-offer-edit', use-id, hidden)
//- div.divider //- div.divider
//- div.menu-wrapper //- div.menu-wrapper
//- div.menu //- div.menu
@ -24,7 +25,7 @@ nav#main__menu
//- div.menu-icon.icon-arrow-up //- div.menu-icon.icon-arrow-up
//- div.menu-label Projects //- div.menu-label Projects
//- div.menu-icon.icon-folder-alt //- 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='', hidden)
//- div.sub-menu.menu-notification //- div.sub-menu.menu-notification
//- sib-display( //- sib-display(
//- data-src=`${endpoints.projects}` //- data-src=`${endpoints.projects}`
@ -35,7 +36,8 @@ nav#main__menu
//- search-fields='team' //- search-fields='team'
//- search-widget-team='sib-form-hidden' //- search-widget-team='sib-form-hidden'
//- search-value-team='-' //- search-value-team='-'
//- set-user-id='search-value-team' //- hd-inherit-user-id='search-value-team'
//- hd-inherit-widgets
//- widget-badge='hd-counter' //- widget-badge='hd-counter'
//- action-badge='badge' //- action-badge='badge'
//- ) //- )
@ -43,10 +45,11 @@ nav#main__menu
div.menu-wrapper div.menu-wrapper
div.menu div.menu
div.menu-chevron div.menu-chevron
div.menu-icon.icon-arrow-up sib-link(next='admin-circle-list')
div.menu-icon.icon-arrow-right
div.menu-label Circles div.menu-label Circles
div.menu-icon.icon-folder-alt 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='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
sib-display( sib-display(
data-src=`${endpoints.circles}` data-src=`${endpoints.circles}`
@ -59,7 +62,8 @@ nav#main__menu
search-fields='team' search-fields='team'
search-widget-team='sib-form-hidden' search-widget-team='sib-form-hidden'
search-value-team='-' search-value-team='-'
set-user-id='search-value-team' hd-inherit-user-id='search-value-team'
hd-inherit-widgets
order-by='name' order-by='name'
next='circle' next='circle'
) )
@ -70,7 +74,7 @@ nav#main__menu
div.menu-icon.icon-arrow-up div.menu-icon.icon-arrow-up
div.menu-label Chat div.menu-label Chat
div.menu-icon.icon-envelope-letter 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='', hidden)
div.sub-menu.menu-notification div.sub-menu.menu-notification
sib-display( sib-display(
data-src=`${endpoints.users}` data-src=`${endpoints.users}`
@ -82,6 +86,7 @@ nav#main__menu
next='messages' next='messages'
) )
sib-route(name='admin', hidden)
//- div.divider //- div.divider
//- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='')

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'
next='admin-circle-list'
submit-button='Save'
)

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

@ -0,0 +1,105 @@
.content-box.full-width.with-form
sib-router(default-route='admin-circle-list', hidden)
sib-route(name='admin-circle-list')
sib-route(name='admin-circle-create')
div.content-box__header.with-description
div
p.name Administration
#admin-circle-list(hidden)
include templates/hd-user-avatar.pug
sib-widget(name='circle-owner')
template
sib-display(
data-src='${await value}'
fields='account.picture, sup(name), sub(username)'
widget-account.picture='hd-user-avatar'
)
div.content-box__info
div.admin-header
div.admin-header__title Circles
sib-link(
class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus'
next='admin-circle-create'
) Create a new circle
.table
div.table-header.grey-color
div Name
div Admins
div Join
sib-widget(name='admin-circle-leave-button')
template
sib-delete(
class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
data-src="${src}"
data-label='Leave circle'
)
sib-widget(name='admin-circle-join-button')
template
button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
sib-form(
data-src=''
nested-field='members'
fields='user.@id'
label-user.@id=''
value-user.@id=''
widget-user.@id='sib-form-hidden'
hd-inherit-bind-user2input="input[name='user.@id']"
hd-inherit-widgets
submit-button='Join Circle'
)
sib-widget(name="admin-circle-buttons")
template
sib-display(
data-src='${src}'
nested-field='members'
fields='relation'
action-relation='relation'
widget-relation='admin-circle-leave-button'
search-fields='user'
search-widget-user='sib-form-hidden'
search-value-user="-"
empty-widget='admin-circle-join-button'
hd-inherit-bind-resources='admin-circle-join-button'
hd-inherit-user-id="search-value-user"
hd-inherit-widgets
)
sib-display(
class='table-body'
data-src=`${endpoints.circles}`
fields='name, owner, buttons'
class-name='w33 cell border'
class-owner='w33 cell border'
widget-buttons="admin-circle-buttons"
action-buttons="buttons"
hd-inherit-widgets
hd-inherit-widgets-multiple
widget-owner='circle-owner'
)
#admin-circle-create(hidden)
include page-admin-circles-create.pug

View File

@ -0,0 +1,10 @@
.content-box.full-width.with-form
sib-router(default-route='admin-project-list', hidden)
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', hidden)
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

View File

@ -1,16 +1,9 @@
.content-box.full-width .chat-view
sib-display.content-box__header( sib-chat(
data-authentication='login',
data-auto-login='true',
data-bosh-service-url=`${xmpp}`,
data-debug='false',
data-locales-url='en',
bind-resources bind-resources
fields='name' )
class-name='name'
)
.chat-view
sib-chat(
data-authentication='login',
data-auto-login='true',
data-bosh-service-url=`${xmpp}`,
data-debug='false',
data-locales-url='en',
bind-resources
)

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'

View File

@ -3,11 +3,12 @@ div.content-box__info
include templates/hd-user-avatar.pug include templates/hd-user-avatar.pug
sib-widget(name='hd-user-groups') sib-widget(name='hd-user-groups')
template ${await value.name} template ${value.name}
sib-widget(name='team-template-edit') sib-widget(name='team-template-edit')
template template
sib-display( sib-display(
class='w50 cell border'
data-src='${await value.user}' data-src='${await value.user}'
fields='account.picture, sup(name, groups), sub(profile.city)' fields='account.picture, sup(name, groups), sub(profile.city)'
@ -18,38 +19,41 @@ div.content-box__info
) )
sib-ac-checker( sib-ac-checker(
class='w50 cell border'
permission="acl:Delete" permission="acl:Delete"
data-src="${await value['@id']}" data-src="${value['@id']}"
) )
sib-delete( sib-delete(
data-src="${await value['@id']}" class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
data-src="${value['@id']}"
data-label='Leave the circle' data-label='Leave the circle'
) )
//- Only to show the table grid //- Only to show the table grid
sib-ac-checker( sib-ac-checker(
class='w50 cell border'
no-permission="acl:Delete" no-permission="acl:Delete"
data-src="${await value['@id']}" data-src="${value['@id']}"
) )
sib-link(class="backlink", bind-resources, next='circle-profile') Back sib-link(class="backlink", bind-resources, next='circle-profile') Back
h1 Edit your circle h1 Edit your circle
sib-form.block( sib-form.block.circle-edit-form(
bind-resources bind-resources
fields='block-circle__info(name, owner), description' fields='block-circle__info(name, owner), description'
range-owner=`${endpoints.users}` range-owner=`${endpoints.users}`
label-owner='owner' label-owner='owner'
label-description='circle subtitle'
class-name='form-label is-light is-half-width' class-name='form-label is-light is-half-width'
class-owner='form-label is-light is-half-width member-select color' class-owner='form-label is-light is-half-width member-select color'
class-description='form-label is-light is-full-width' class-description='form-label is-light is-full-width'
widget-owner='sib-form-auto-completion' widget-owner='sib-form-auto-completion'
widget-description='sib-form-textarea'
partial='' partial=''
@ -58,14 +62,34 @@ div.content-box__info
h2 Members list h2 Members list
div.table-header //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517
div.cell Name //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team')
div.cell Access sib-form.block.team-form(
bind-resources
sib-display.table-body( nested-field='members'
bind-resources fields='user'
fields='members' range-user=`${endpoints.users}`
multiple-members='' class-user='team form-label is-dark'
widget-members='team-template-edit' label-user=''
widget-user='sib-form-auto-completion'
submit-button='Add a member'
) )
.table
div.table-header.grey-color
div Name
div Access
//-class='table-body'
sib-display(
class='table-body'
bind-resources
fields='members'
multiple-members=''
widget-members='team-template-edit'
)

View File

@ -1,55 +1,84 @@
.content-box.full-width.with-form sib-router(default-route='circle-profile', hidden)
sib-router(default-route='circle-profile') sib-route(name='circle-profile')
sib-route(name='circle-profile') sib-route(name='circle-edit')
sib-route(name='circle-edit')
#circle-profile(hidden) #circle-profile(hidden)
include templates/hd-circle-team.pug include templates/hd-circle-team.pug
.content-box__info
div.content-box__header.with-edit
.space-between
sib-display( sib-display(
bind-resources bind-resources
fields='name' fields='creationDateSet(title, creationDate)'
class-name='name' value-title='Creation date: '
widget-creationDate='sib-display-date'
) )
sib-ac-checker.testblock.circle-edit-button(permission='acl:Write', bind-resources)
sib-link(class='button text-bold text-uppercase reversed button-blue bordered with-icon icon-pencil' next='circle-edit' bind-resources) Edit and add Members
sib-link(class="editlink", next="circle-edit" bind-resources)
div.content-box__info h2(name="label-team") Members:
sib-display.block( sib-display.block(
bind-resources bind-resources
fields='label-description, description, entitled(title, creationDate)' fields='team'
value-label-description='Description: ' multiple-team=''
widget-team='circle-team-template'
)
default-description='No description available.' div.box-button
sib-ac-checker(permission='acl:Delete', bind-resources)
value-title='Creation date:' sib-delete(
) class='button text-bold text-uppercase button-blue bordered with-icon icon-trash'
bind-resources
sib-ac-checker(permission='acl:Write' bind-resources, nested-field='team') data-label='Delete Circle'
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( sib-widget(name='circle-leave-button')
bind-resources template
fields='team' sib-delete(
class='button btn-margin-left text-bold text-uppercase reversed button-dark bordered with-icon icon-close'
data-src="${src}"
data-label='Leave Circle'
)
multiple-team='' sib-widget(name='circle-join-button')
widget-team='team-template' template
button.button.btn-margin-left.text-bold.text-uppercase.reversed.button-dark.bordered.with-icon.icon-arrow-right-circle.test
sib-form(
data-src=''
nested-field='members'
fields='user.@id'
label-user.@id=''
value-user.@id=''
widget-user.@id='sib-form-hidden'
hd-inherit-bind-user2input="input[name='user.@id']"
hd-inherit-widgets
submit-button='Join Circle'
)
sib-display(
bind-resources
nested-field='members'
fields='relation'
action-relation='relation'
widget-relation='circle-leave-button'
search-fields='user'
search-widget-user='sib-form-hidden'
search-value-user=""
empty-widget='circle-join-button'
hd-inherit-bind-resources='circle-join-button'
hd-inherit-user-id="search-value-user"
hd-inherit-widgets
) )
#circle-edit(hidden)
include page-circle-edit.pug
#circle-edit(hidden)
include page-circle-edit.pug

View File

@ -1,10 +1,21 @@
.views-container .views-container
#circle-chat(hidden) .content-box.full-width.with-form
include page-circle-chat.pug div.content-box__header.with-description
#circle-information(hidden) sib-ac-checker(permission='acl:Read', bind-resources)
include page-circle-profile.pug sib-display(
//-#circle-create bind-resources
include page-circle-create.pug fields='name, description'
class-name='name'
class-description='description'
)
div.content-box__info
sib-ac-checker(permission='acl:Read', bind-resources)
#circle-chat(hidden)
include page-circle-chat.pug
#circle-information(hidden)
include page-circle-profile.pug
nav.jsRightMenu(role='navigation') nav.jsRightMenu(role='navigation')
sib-router(default-route='circle-chat') sib-router(default-route='circle-chat')
ul ul

View File

@ -10,7 +10,7 @@
value-const-title1='N°', value-const-title1='N°',
value-const-title2='-', value-const-title2='-',
value-entitled='Creation date:' value-entitled='Creation date: '
value-label-description='DESCRIPTION:', value-label-description='DESCRIPTION:',
widget-customer.logo='sib-display-img', widget-customer.logo='sib-display-img',
@ -25,7 +25,7 @@
widget-captain='captain-template', widget-captain='captain-template',
value-label-team='TEAM:', value-label-team='TEAM:',
widget-members='team-template', widget-members='project-team-template',
multiple-members, multiple-members,
bind-resources bind-resources

View File

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

View File

@ -1,3 +1,47 @@
function recursiveAdaptWidgets(prefix, element, user) {
//- This function is a workaround for the currently unworking populate
//- Feel free to see examples on page-circles-
element.querySelectorAll('[' + prefix + '-user-id]').forEach((el) => {
el.setAttribute(el.getAttribute(prefix + '-user-id'), user['@id']);
});
if (element != document) {
//- Allow to bind-user on selected attribute
if (element.getAttribute(prefix + '-user-id')) {
element.setAttribute(element.getAttribute(prefix + '-user-id'), user['@id']);
}
//- Allow to set data-src to a children sib-form
if (element.getAttribute(prefix + '-bind-resources')) {
let form = element.querySelector(element.getAttribute(prefix + '-bind-resources') + " sib-form");
if (form) {
form.setAttribute('data-src', element.component.resourceId.replace('members/', ''));
}
}
//- Allow to put user on a targetted search field
if (element.getAttribute(prefix + '-bind-user2input')) {
element.querySelector(element.getAttribute(prefix + '-bind-user2input')).value = user['@id'];
}
//- In case your sib-display use a multiple, you have to target sub-sib-display auto-generated
if (element.getAttribute(prefix + '-widgets-multiple') !== null) {
element.querySelectorAll('div > sib-display').forEach((el) => {
el.setAttribute(prefix + '-widgets', "");
});
}
}
//- This function is hooked every time a sib-something with prefix+"-widgets" is populated
element.querySelectorAll('[' + prefix + '-widgets]').forEach((elementChild) => {
elementChild.addEventListener('populate', () => {
recursiveAdaptWidgets(prefix, elementChild, user);
});
});
}
document.addEventListener('DOMContentLoaded', function (event) { document.addEventListener('DOMContentLoaded', function (event) {
const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper')); const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper'));
const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu')); const rightMenus = Array.from(document.querySelectorAll('nav.jsRightMenu'));
@ -25,25 +69,24 @@ document.addEventListener('DOMContentLoaded', function (event) {
}) })
}); });
//- Watch every sib-forms & update data-src of linked sib-display
document.querySelectorAll('sib-form[data-src], sib-form[bind-resource]').forEach(function(el) {
el.addEventListener("save", function() {
let dataSrc = el.getAttribute('data-src');
document.querySelectorAll('sib-display[data-src="'+dataSrc+'"]').forEach(function(e) {
e.setAttribute('data-src', dataSrc);
});
});
});
document.querySelector('sib-auth').getUser().then(user => { document.querySelector('sib-auth').getUser().then(user => {
if(user !== null) { if (user !== null) {
// Hide login button if already logged // Hide login button if already logged
document.querySelector('button[role="log in"]').style.display = 'none'; document.querySelector('button[role="log in"]').setAttribute('style', 'display:none !important');
// Set current user id on set-user-id of sib-display // Set current user id on set-user-id of sib-display
for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) { recursiveAdaptWidgets("hd-inherit", document, user);
sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']); for (leaveBtn of document.querySelectorAll('admin-circle-leave > sib-ac-checker:not([hidden])')) {
leaveBtn.parentNode.parentNode.parentNode.nextElementSibling.setAttribute('style', 'display:none !important'); // Hide Join button
} }
} }
}).catch(error => console.log(error)); }).catch(error => console.log(error));
// Document -> close menu
document.addEventListener("click", event => {
if (!event.target.closest('#user-controls')) {
let userControls = this.querySelector('#user-controls');
if (userControls) userControls.removeAttribute("open");
}
});
}); });

View File

@ -2,10 +2,6 @@
&.with-form { &.with-form {
sib-form {
padding-bottom: 2.55rem;
}
h1 { h1 {
color: $color-233-18-29; color: $color-233-18-29;
font-weight: bold; font-weight: bold;
@ -44,7 +40,7 @@
sib-set-default { sib-set-default {
clear: both; clear: both;
display: flex; display: flex!important;
flex-wrap: wrap; flex-wrap: wrap;
max-width: 100%; max-width: 100%;
@ -86,18 +82,16 @@
} }
} }
input[type='submit'] { sib-form[set-user-id-select] {
background-color: $color-233-18-29;
border: none; input[type="submit"] {
border-radius: 100em; margin-left: 0;
color: $color-0-0-100; margin-top: 0;
cursor: pointer; }
font-size: 1.4rem;
font-weight: bold; select {
margin-left: auto; display: none;
margin-top: 3.2rem; }
padding: 0.55rem 2.5rem;
text-transform: uppercase;
} }
/* CLASSES Peut-être à sortir de .content-box */ /* CLASSES Peut-être à sortir de .content-box */
@ -137,13 +131,15 @@
} }
>input[type='submit'] { >input[type='submit'] {
background-color: transparent; @extend
border: 1px solid #6157e5; .button,
color: #6157e5; .btn-margin-left,
font-size: 1.4rem; .text-bold,
align-self: flex-end; .text-uppercase,
margin-bottom: 0.6rem; .button-blue,
margin-left: 4.2rem; .bordered;
margin-top: auto;
margin-bottom: auto;
} }
} }

View File

@ -82,46 +82,6 @@ h5 {
font-size: 2rem; font-size: 2rem;
} }
button {
background: none;
border: none;
padding: 0;
}
sib-route,
sib-link,
button,
input,
a {
cursor: pointer;
&:hover,
&:link,
&:active {
cursor: pointer;
}
}
sib-delete {
button {
@include icon('close');
background-color: $color-233-18-29;
border: none;
border-radius: 100em;
color: $color-0-0-100;
cursor: pointer;
font-size: 1.4rem;
font-weight: bold;
padding: 0.55rem 2.5rem;
text-transform: uppercase;
&::before {
font-size: 1.6rem;
margin-right: 1rem;
}
}
}
%padding-main { %padding-main {
padding: 5rem; padding: 5rem;
} }
@ -170,31 +130,12 @@ sib-delete {
} }
} }
.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 { .drive {
width: 100%; width: 100%;
border: 0; border: 0;
} }
.content-box__header.with-edit { .content-box__header.with-description {
border-bottom: 1px solid $color-221-51-90; border-bottom: 1px solid $color-221-51-90;
div { div {
@ -203,40 +144,35 @@ sib-delete {
text-transform: uppercase; text-transform: uppercase;
} }
.edit { .description {
color: $color-213-4-50; color: $color-215-6-63;
font-size: 1.6rem; font-size: 1.8rem;
margin-left: auto;
&:not(:empty)::before {
color: $color-216-4-22;
content: '- ';
font-size: 2rem;
font-weight: bold;
margin-left: 0.60rem;
}
} }
} }
} }
.backlink { .backlink {
@include icon('arrow-left-circle');
color: $color-233-18-29;
font-size: 1.5rem; font-size: 1.5rem;
margin: 2rem 0 0 2rem; margin: 2rem 0 0 2rem;
@include icon('arrow-left-circle');
color: #3d4057;
text-decoration: underline; text-decoration: underline;
&::before {
text-decoration: none;
}
&::before { &::before {
font-size: 2rem; font-size: 2rem;
margin-right: 1rem; margin-right: 1rem;
text-decoration: none;
} }
} }
.editlink {
@include icon('pencil');
background: $color-244-73-62;
border-radius: 50%;
color: white;
padding: 12px;
}
.name { .name {
color: $color-216-4-22; color: $color-216-4-22;
font-size: 2rem; font-size: 2rem;
@ -250,6 +186,12 @@ sib-delete {
} }
} }
.space-between {
display: flex;
justify-content: space-between;
padding-bottom: 1.4rem;
}
.section { .section {
border-bottom: 1px solid $color-221-51-90; border-bottom: 1px solid $color-221-51-90;
padding: 4.5rem; padding: 4.5rem;
@ -260,4 +202,207 @@ sib-delete {
// Other base components // Other base components
@import 'form'; @import 'form';
@import 'header'; @import 'header';
@import 'menu-left'; @import 'menu-left';
@import 'user-avatar';
// Button global CSS
sib-delete,
sib-route,
sib-link,
button,
input[type='submit'],
a,
.button {
background: none;
border: none;
cursor: pointer;
display: inline-block;
padding: 0;
&.button {
padding: 0.55rem 2.5rem;
border-radius: 100em;
*,
& {
font-size: 1.4rem;
}
&.btn-margin-left {
margin-left: 2.2rem;
}
&.small {
*,
& {
font-size: 1rem;
}
}
&.text-bold {
*,
& {
font-weight: bold;
}
}
&.text-uppercase {
*,
& {
text-transform: uppercase;
}
}
&.rounded {
border-radius: 50%;
padding: 0.5rem 1rem;
}
&.button-link {
border-radius: 100em;
*,
& {
text-decoration: underline;
}
&:hover {
text-decoration: none;
}
}
&.with-icon::before {
font-size: 1.6rem;
margin-right: 1rem;
}
&.button-yellow {
background-color: white;
*,
& {
color: $color-43-100-50;
}
&.bordered {
border: 1px solid $color-43-100-50;
}
&:hover {
background-color: $color-43-100-50;
*,
& {
color: white;
}
}
}
&.button-blue {
background-color: white;
*,
& {
color: $color-244-73-62;
}
&.bordered {
border: 1px solid $color-244-73-62;
}
&:hover {
background-color: $color-244-73-62;
*,
& {
color: white;
}
}
}
&.button-dark {
color: $color-233-18-29;
background-color: white;
&.bordered {
border: 1px solid $color-233-18-29;
}
&:hover {
background-color: $color-233-18-29;
color: white;
}
}
&.test {
display: flex;
}
&.reversed {
&.button-yellow {
background-color: $color-43-100-50;
*,
& {
color: white;
}
&:hover {
background-color: white;
color: $color-43-100-50;
&.bordered {
border: 1px solid $color-43-100-50;
}
}
}
&.button-blue {
background-color: $color-244-73-62;
*,
& {
color: white;
}
&:hover {
background-color: white;
*,
& {
color: $color-244-73-62;
}
&.bordered {
border: 1px solid $color-244-73-62;
}
}
}
&.button-dark {
background-color: $color-233-18-29;
*,
& {
color: white;
}
&:hover {
background-color: white;
*,
& {
color: $color-233-18-29;
}
&.bordered {
border: 1px solid $color-233-18-29;
}
}
}
}
}
}

View File

@ -44,7 +44,7 @@
color: $color-46-100-67; color: $color-46-100-67;
} }
} }
.menu-icon { .menu-icon {
align-items: center; align-items: center;
display: flex; display: flex;

View File

@ -0,0 +1,29 @@
.project-profile-user-avatar {
align-self: center;
grid-column: 1 / span 1;
grid-row: 1 / span 2;
display: inline;
* {
height: 100%;
width: 100%;
}
div {
background-color: $color-0-0-100;
border-radius: 50%;
height: 7vh;
overflow: hidden;
position: relative;
width: 7vh;
img {
height: 100%;
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
}
}

View File

@ -53,7 +53,8 @@ $ci-icons: (
alien: '\e91e', alien: '\e91e',
drawing: '\e91f', drawing: '\e91f',
feedback: '\e920', feedback: '\e920',
globe: '\e921' globe: '\e921',
bubble-add: '\e922'
); );
%ci, %ci,

View File

@ -36,6 +36,8 @@
>ul { >ul {
cursor: pointer; cursor: pointer;
display: flex;
flex-direction: column;
list-style: none; list-style: none;
margin: 0; margin: 0;
padding-left: 0; padding-left: 0;
@ -69,7 +71,7 @@
display: inline-block; display: inline-block;
} }
&[name^='circle'], &[name*='circle'],
&[name^='project'] { &[name^='project'] {
>li::before { >li::before {
@ -96,6 +98,10 @@
&[name$='drive']>li { &[name$='drive']>li {
@include ci('file'); @include ci('file');
} }
&[name='admin-circles']>li {
@include ci('bubble-add');
}
} }
} }
} }

View File

@ -1,2 +1,5 @@
@import 'circle';
@import 'circle-profile'; @import 'circle-profile';
@import 'circle-edit'; @import 'circle-edit';
@import 'circle-admin';
@import 'admin-circle-create';

View File

@ -0,0 +1,13 @@
#admin-circle-create {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-dark,
.bordered;
margin-left: auto;
margin-top: 3.2rem;
}
}

View File

@ -0,0 +1,9 @@
.admin-header {
display: flex;
justify-content: space-between;
margin-bottom: 5rem;
.admin-header__title {
@extend h3;
}
}

View File

@ -1,149 +1,161 @@
h2 { #circle-edit {
font-size: 1.7rem;
font-weight: bold;
text-transform: uppercase;
}
.table-header { .circle-edit-form>form {
background: $color-228-25-79;
color: white;
display: flex;
font-size: 1.6rem;
font-weight: 600;
justify-content: space-around;
text-align: center;
>*{ input[type='submit'] {
border-right: 1px solid $color-228-25-79; @extend .button,
flex: 1; .text-bold,
padding: 1rem; .text-uppercase,
width: 50%; .reversed,
} .button-dark,
.bordered;
>*:last-of-type { margin-left: auto;
border-left: 1px solid white; margin-top: 3.2rem;
@media (max-width: 1220px) {
display: none;
} }
} }
}
.table-body div team-template-edit { /*.table-header {
display: flex; background: $color-228-25-79;
justify-content: space-between; color: white;
>* {
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;
display: flex; display: flex;
justify-content: flex-end; font-size: 1.6rem;
padding: 2.7rem 2.2rem; font-weight: 600;
justify-content: space-around;
text-align: center;
@media (max-width: 1220px) { >*{
display: none; border-right: 1px solid white;
} flex: 1;
} padding: 1rem;
} width: 50%;
}
.member-select.color { >*:last-of-type {
border-right: 1px solid $color-228-25-79;
.ss-main { @media (max-width: 1220px) {
color: $color-233-18-29; display: none;
} }
} }
}*/
sib-multiple[widget='team-template-edit'] { /*.table-body div team-template-edit {
display: flex;
justify-content: space-between;
label { >* {
display: none; border-bottom: 1px solid $color-228-25-79;
} flex: 1;
width: 50%;
}
>div>team-template-edit>sib-display>div { sib-display {
display: grid; border-left: 1px solid $color-228-25-79;
grid-column-gap: 1.6rem; padding: 0 2.2rem;
grid-template-columns: 7vh auto; }
grid-template-rows: repeat(2, 5.2vh);
>[name='account.picture'] { sib-ac-checker {
align-items: center; align-items: center;
align-self: center; border-left: 1px solid $color-228-25-79;
background-color: $color-213-20-91; border-right: 1px solid $color-228-25-79;
border-radius: 50%;
display: flex; display: flex;
grid-column: 1 / span 1; justify-content: flex-end;
grid-row: 1 / span 2; padding: 2.7rem 2.2rem;
height: 7vh;
justify-content: center;
overflow: hidden;
position: relative;
width: 7vh;
img { @media (max-width: 1220px) {
background-color: white; display: none;
height: 100%; }
left: 0;
object-fit: cover;
position: absolute;
top: 0;
width: 100%;
}
object {
height: 45%;
width: 45%;
}
} }
}*/
>[name='sup'] { .member-select.color {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
[name='name'] { .ss-main {
font-weight: 600; color: $color-233-18-29;
margin-right: 1rem;
}
sib-multiple {
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;
}
}
} }
} }
}
/*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'] {
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='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;
margin-right: 1rem;
}
sib-multiple {
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;
}
}
}
}
}*/
}

View File

@ -1,12 +1,8 @@
#circle-information, #circle-edit { #circle-information {
.content-box__info { .box-button {
@extend %padding-block; display: flex;
justify-content: flex-end;
.backlink {
text-align: right;
display: block;
}
} }
.block { .block {
@ -16,41 +12,10 @@
.form-label.is-dark>label { .form-label.is-dark>label {
margin-top: 0; 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 */ >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 { >sib-multiple {
@ -58,7 +23,7 @@
display: none; display: none;
} }
>div>team-template[name='team']>sib-display>div { >div>circle-team-template[name='team']>sib-display>div {
display: grid; display: grid;
grid-column-gap: 1.6rem; grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto; grid-template-columns: 7vh auto;

View File

@ -0,0 +1,191 @@
#circle-information,
#circle-edit,
#admin-circle-list,
#admin-circle-create {
h2 {
font-size: 1.7rem;
font-weight: bold;
text-transform: uppercase;
}
.content-box__info {
@extend %padding-block;
display: flex;
flex-direction: column;
.backlink {
text-align: right;
display: block;
}
}
.table {
.table-header {
display: flex;
flex: 1;
font-size: 1.6rem;
font-weight: 600;
justify-content: space-around;
text-align: center;
&.grey-color {
background: $color-228-25-79;
color: white;
}
>* {
border-right: 1px solid white;
flex: 1;
padding: 2.1rem 0;
text-align: center;
}
>*:last-of-type {
border-right: 1px solid $color-228-25-79;
}
}
.table-body {
>div:first-of-type>sib-display>div,
team-template-edit[name='members'] {
display: flex;
border-left: 1px solid $color-228-25-79;
}
.border {
border-bottom: 1px solid $color-228-25-79;
border-right: 1px solid $color-228-25-79;
}
.cell {
text-align: center;
word-wrap: break-word;
}
.w33 {
width: 33.3333%;
}
.w50 {
width: 50%;
}
[name="buttons"] {
@extend .border;
@extend .cell;
@extend .w33;
}
}
.table-body>div>sib-display>div>sib-display-value[name='name'] {
color: $color-233-18-29;
font-weight: 600;
padding-top: 2.5rem;
}
[name='members']>sib-display>div,
[name='owner']>sib-display>div {
display: grid;
grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto;
grid-template-rows: repeat(2, 5.2vh);
padding: 0 2.2rem;
>[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='sup'] {
align-self: end;
display: flex;
grid-column: 2 / span 1;
grid-row: 1 / span 1;
margin-bottom: 0.50rem;
[name$='name'] {
color: #7A7F85;
font-weight: 600;
margin-right: 1rem;
}
sib-multiple>div {
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$='username']:not(:empty) {
align-items: center;
display: flex;
&::before {
content: '@';
}
}
}
}
sib-set-default[name='buttons'] {
align-items: center;
justify-content: center;
[name='button'] {
input[type='submit'] {
@extend .button,
.text-bold,
.text-uppercase,
.reversed,
.button-blue,
.bordered,
.btn-margin-left;
}
}
}
sib-ac-checker {
align-items: center;
display: flex;
justify-content: center;
}
}
}

View File

@ -193,7 +193,7 @@
} }
} }
team-template[name='members'], captain-template[name='captain'] { project-team-template[name='members'], captain-template[name='captain'] {
display: grid; display: grid;
grid-column-gap: 1.6rem; grid-column-gap: 1.6rem;
grid-template-columns: 7vh auto; grid-template-columns: 7vh auto;
@ -231,13 +231,4 @@
} }
} }
} }
.project-profile-user-avatar {
display: inline;
* {
height: 100%;
width: 100%;
}
}
} }

View File

@ -1,6 +1,6 @@
include hd-user-avatar.pug include hd-user-avatar.pug
sib-widget(name='team-template') sib-widget(name='circle-team-template')
template template
sib-display( sib-display(
data-src="${await value}" data-src="${await value}"

View File

@ -1,2 +1,2 @@
sib-widget(name='hd-user-avatar') sib-widget(name='hd-user-avatar')
template ${value ? `<img src="${value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`} template ${await value ? `<img src="${await value}" style="max-width:100%; max-height: 100%;" />` : `<object type="image/svg+xml" data="/images/alien.svg"></object>`}

View File

@ -1,6 +1,6 @@
include hd-user-avatar.pug include hd-user-avatar.pug
sib-widget(name='team-template') sib-widget(name='project-team-template')
template template
sib-display.project-profile-user-avatar( sib-display.project-profile-user-avatar(
data-src="${value.user ? value.user['@id'] : ''}" data-src="${value.user ? value.user['@id'] : ''}"

Binary file not shown.

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 144 KiB

After

Width:  |  Height:  |  Size: 146 KiB

Binary file not shown.

Binary file not shown.