diff --git a/src/context.jsonld b/src/context.jsonld index be7f99d..6ffc880 100644 --- a/src/context.jsonld +++ b/src/context.jsonld @@ -2,5 +2,7 @@ { "inbox": "http://happy-dev.fr/owl/#inbox", "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" } diff --git a/src/index.pug b/src/index.pug index cf0f8d0..ab13cbd 100644 --- a/src/index.pug +++ b/src/index.pug @@ -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 diff --git a/src/menu-left.pug b/src/menu-left.pug index 1213473..c2d902d 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -4,7 +4,8 @@ sib-widget(name='hd-counter') sib-widget(name='hd-create') 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 sib-router#navbar-router(default-route='members') @@ -15,8 +16,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', hidden) + //- sib-route(name='job-offer-edit', use-id, hidden) //- div.divider //- div.menu-wrapper //- div.menu @@ -24,7 +25,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='', hidden) //- div.sub-menu.menu-notification //- sib-display( //- data-src=`${endpoints.projects}` @@ -35,7 +36,8 @@ nav#main__menu //- search-fields='team' //- search-widget-team='sib-form-hidden' //- search-value-team='-' - //- set-user-id='search-value-team' + //- hd-inherit-user-id='search-value-team' + //- hd-inherit-widgets //- widget-badge='hd-counter' //- action-badge='badge' //- ) @@ -43,10 +45,11 @@ nav#main__menu div.menu-wrapper div.menu 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-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 sib-display( data-src=`${endpoints.circles}` @@ -59,7 +62,8 @@ nav#main__menu search-fields='team' search-widget-team='sib-form-hidden' search-value-team='-' - set-user-id='search-value-team' + hd-inherit-user-id='search-value-team' + hd-inherit-widgets order-by='name' next='circle' ) @@ -70,7 +74,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='', hidden) div.sub-menu.menu-notification sib-display( data-src=`${endpoints.users}` @@ -82,6 +86,7 @@ nav#main__menu next='messages' ) + sib-route(name='admin', hidden) //- div.divider //- sib-route.menu(hidden, name='my-profile', rdf-type='foaf:user', use-id='') diff --git a/src/page-admin-circles-create.pug b/src/page-admin-circles-create.pug new file mode 100644 index 0000000..4be5618 --- /dev/null +++ b/src/page-admin-circles-create.pug @@ -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' + ) diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug new file mode 100644 index 0000000..e478630 --- /dev/null +++ b/src/page-admin-circles.pug @@ -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 diff --git a/src/page-admin-projects.pug b/src/page-admin-projects.pug new file mode 100644 index 0000000..80f8d3f --- /dev/null +++ b/src/page-admin-projects.pug @@ -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) \ No newline at end of file diff --git a/src/page-admin-users.pug b/src/page-admin-users.pug new file mode 100644 index 0000000..7085fe7 --- /dev/null +++ b/src/page-admin-users.pug @@ -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) diff --git a/src/page-admin.pug b/src/page-admin.pug new file mode 100644 index 0000000..15fdfd1 --- /dev/null +++ b/src/page-admin.pug @@ -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 diff --git a/src/page-circle-chat.pug b/src/page-circle-chat.pug index 34b02a8..37a3cbc 100644 --- a/src/page-circle-chat.pug +++ b/src/page-circle-chat.pug @@ -1,16 +1,9 @@ -.content-box.full-width - sib-display.content-box__header( +.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 - 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 - ) \ No newline at end of file + ) \ No newline at end of file diff --git a/src/page-circle-create.pug b/src/page-circle-create.pug deleted file mode 100644 index 6ad81a1..0000000 --- a/src/page-circle-create.pug +++ /dev/null @@ -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' diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 1121969..3cc10e3 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -3,11 +3,12 @@ div.content-box__info include templates/hd-user-avatar.pug sib-widget(name='hd-user-groups') - template ${await value.name} + template ${value.name} sib-widget(name='team-template-edit') template sib-display( + class='w50 cell border' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' @@ -18,38 +19,41 @@ div.content-box__info ) sib-ac-checker( + class='w50 cell border' permission="acl:Delete" - data-src="${await value['@id']}" + data-src="${value['@id']}" ) 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' ) //- Only to show the table grid sib-ac-checker( + class='w50 cell border' no-permission="acl:Delete" - data-src="${await value['@id']}" + data-src="${value['@id']}" ) sib-link(class="backlink", bind-resources, next='circle-profile') Back h1 Edit your circle - sib-form.block( + sib-form.block.circle-edit-form( bind-resources - + fields='block-circle__info(name, owner), description' range-owner=`${endpoints.users}` label-owner='owner' + label-description='circle subtitle' class-name='form-label is-light is-half-width' class-owner='form-label is-light is-half-width member-select color' class-description='form-label is-light is-full-width' widget-owner='sib-form-auto-completion' - widget-description='sib-form-textarea' partial='' @@ -58,14 +62,34 @@ div.content-box__info h2 Members list - div.table-header - div.cell Name - div.cell Access - - sib-display.table-body( - bind-resources - fields='members' + //- TODO: sib-ac-checker unworking - https://git.happy-dev.fr/startinblox/framework/sib-core/issues/517 + //- sib-ac-checker(permission='acl:Write', bind-resources, nested-field='team') + sib-form.block.team-form( + bind-resources + nested-field='members' + fields='user' + range-user=`${endpoints.users}` - multiple-members='' - widget-members='team-template-edit' + class-user='team form-label is-dark' + 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' + ) + diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index ae12929..8846ae8 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -1,55 +1,84 @@ -.content-box.full-width.with-form - sib-router(default-route='circle-profile') - sib-route(name='circle-profile') - sib-route(name='circle-edit') +sib-router(default-route='circle-profile', hidden) + sib-route(name='circle-profile') + sib-route(name='circle-edit') - #circle-profile(hidden) - include templates/hd-circle-team.pug - - div.content-box__header.with-edit +#circle-profile(hidden) + include templates/hd-circle-team.pug + .content-box__info + + .space-between sib-display( 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( - bind-resources - fields='label-description, description, entitled(title, creationDate)' + sib-display.block( + bind-resources + fields='team' - value-label-description='Description: ' + multiple-team='' + widget-team='circle-team-template' + ) - default-description='No description available.' - - value-title='Creation date:' - ) - - sib-ac-checker(permission='acl:Write' bind-resources, nested-field='team') - 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' + div.box-button + sib-ac-checker(permission='acl:Delete', bind-resources) + sib-delete( + class='button text-bold text-uppercase button-blue bordered with-icon icon-trash' + bind-resources + data-label='Delete Circle' ) - sib-display.block( - bind-resources - fields='team' + sib-widget(name='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' + ) - multiple-team='' - widget-team='team-template' + sib-widget(name='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-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 \ No newline at end of file + + +#circle-edit(hidden) + include page-circle-edit.pug diff --git a/src/page-circle.pug b/src/page-circle.pug index f132b75..0c23098 100644 --- a/src/page-circle.pug +++ b/src/page-circle.pug @@ -1,10 +1,21 @@ .views-container - #circle-chat(hidden) - include page-circle-chat.pug - #circle-information(hidden) - include page-circle-profile.pug - //-#circle-create - include page-circle-create.pug + .content-box.full-width.with-form + div.content-box__header.with-description + sib-ac-checker(permission='acl:Read', bind-resources) + sib-display( + bind-resources + 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') sib-router(default-route='circle-chat') ul diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index 9cbbb5f..0510d97 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -10,7 +10,7 @@ value-const-title1='N°', value-const-title2='-', - value-entitled='Creation date:' + value-entitled='Creation date: ' value-label-description='DESCRIPTION:', widget-customer.logo='sib-display-img', @@ -25,7 +25,7 @@ widget-captain='captain-template', value-label-team='TEAM:', - widget-members='team-template', + widget-members='project-team-template', multiple-members, bind-resources diff --git a/src/page-user-panel.pug b/src/page-user-panel.pug index d3491ac..6e6c310 100644 --- a/src/page-user-panel.pug +++ b/src/page-user-panel.pug @@ -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 diff --git a/src/scripts/index.js b/src/scripts/index.js index 68240af..a3412a6 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -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) { const menuWrappers = Array.from(document.querySelectorAll('.menu-wrapper')); 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 => { - if(user !== null) { + if (user !== null) { // 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 - for(sibDisplay of document.querySelectorAll('sib-display[set-user-id]')) { - sibDisplay.setAttribute(sibDisplay.getAttribute('set-user-id'), user['@id']); + recursiveAdaptWidgets("hd-inherit", document, user); + 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)); + // Document -> close menu + document.addEventListener("click", event => { + if (!event.target.closest('#user-controls')) { + let userControls = this.querySelector('#user-controls'); + if (userControls) userControls.removeAttribute("open"); + } + }); + }); \ No newline at end of file diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 650e85f..dbaeeff 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -2,10 +2,6 @@ &.with-form { - sib-form { - padding-bottom: 2.55rem; - } - h1 { color: $color-233-18-29; font-weight: bold; @@ -44,7 +40,7 @@ sib-set-default { clear: both; - display: flex; + display: flex!important; flex-wrap: wrap; max-width: 100%; @@ -86,18 +82,16 @@ } } - input[type='submit'] { - 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; - margin-left: auto; - margin-top: 3.2rem; - padding: 0.55rem 2.5rem; - text-transform: uppercase; + sib-form[set-user-id-select] { + + input[type="submit"] { + margin-left: 0; + margin-top: 0; + } + + select { + display: none; + } } /* CLASSES Peut-être à sortir de .content-box */ @@ -137,13 +131,15 @@ } >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; + @extend + .button, + .btn-margin-left, + .text-bold, + .text-uppercase, + .button-blue, + .bordered; + margin-top: auto; + margin-bottom: auto; } } diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index e534537..283f1be 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -82,46 +82,6 @@ h5 { 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: 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 { width: 100%; border: 0; } -.content-box__header.with-edit { +.content-box__header.with-description { border-bottom: 1px solid $color-221-51-90; div { @@ -203,40 +144,35 @@ sib-delete { text-transform: uppercase; } - .edit { - color: $color-213-4-50; - font-size: 1.6rem; - margin-left: auto; + .description { + color: $color-215-6-63; + font-size: 1.8rem; + + &:not(:empty)::before { + color: $color-216-4-22; + content: '- '; + font-size: 2rem; + font-weight: bold; + margin-left: 0.60rem; + } } } } .backlink { + @include icon('arrow-left-circle'); + color: $color-233-18-29; font-size: 1.5rem; margin: 2rem 0 0 2rem; - @include icon('arrow-left-circle'); - color: #3d4057; text-decoration: underline; - &::before { - text-decoration: none; - } - &::before { font-size: 2rem; margin-right: 1rem; + text-decoration: none; } } -.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; @@ -250,6 +186,12 @@ sib-delete { } } +.space-between { + display: flex; + justify-content: space-between; + padding-bottom: 1.4rem; +} + .section { border-bottom: 1px solid $color-221-51-90; padding: 4.5rem; @@ -260,4 +202,207 @@ sib-delete { // Other base components @import 'form'; @import 'header'; -@import 'menu-left'; \ No newline at end of file +@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; + } + } + } + } + } +} diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index f96318e..6dbea23 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -44,7 +44,7 @@ color: $color-46-100-67; } } - + .menu-icon { align-items: center; display: flex; diff --git a/src/styles/base/user-avatar.scss b/src/styles/base/user-avatar.scss new file mode 100644 index 0000000..0c93093 --- /dev/null +++ b/src/styles/base/user-avatar.scss @@ -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%; + } + } +} \ No newline at end of file diff --git a/src/styles/components/icons/custom-icons.scss b/src/styles/components/icons/custom-icons.scss index 543a627..2848ce4 100644 --- a/src/styles/components/icons/custom-icons.scss +++ b/src/styles/components/icons/custom-icons.scss @@ -53,7 +53,8 @@ $ci-icons: ( alien: '\e91e', drawing: '\e91f', feedback: '\e920', - globe: '\e921' + globe: '\e921', + bubble-add: '\e922' ); %ci, diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index f9d2499..bc5d339 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -36,6 +36,8 @@ >ul { cursor: pointer; + display: flex; + flex-direction: column; list-style: none; margin: 0; padding-left: 0; @@ -69,7 +71,7 @@ display: inline-block; } - &[name^='circle'], + &[name*='circle'], &[name^='project'] { >li::before { @@ -96,6 +98,10 @@ &[name$='drive']>li { @include ci('file'); } + + &[name='admin-circles']>li { + @include ci('bubble-add'); + } } } } diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 6efac3d..17b4580 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -1,2 +1,5 @@ +@import 'circle'; @import 'circle-profile'; -@import 'circle-edit'; \ No newline at end of file +@import 'circle-edit'; +@import 'circle-admin'; +@import 'admin-circle-create'; \ No newline at end of file diff --git a/src/styles/layout/circle/admin-circle-create.scss b/src/styles/layout/circle/admin-circle-create.scss new file mode 100644 index 0000000..ac5bee0 --- /dev/null +++ b/src/styles/layout/circle/admin-circle-create.scss @@ -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; + } +} diff --git a/src/styles/layout/circle/circle-admin.scss b/src/styles/layout/circle/circle-admin.scss new file mode 100644 index 0000000..d3241dc --- /dev/null +++ b/src/styles/layout/circle/circle-admin.scss @@ -0,0 +1,9 @@ +.admin-header { + display: flex; + justify-content: space-between; + margin-bottom: 5rem; + + .admin-header__title { + @extend h3; + } +} \ 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 547e399..a491e70 100644 --- a/src/styles/layout/circle/circle-edit.scss +++ b/src/styles/layout/circle/circle-edit.scss @@ -1,149 +1,161 @@ -h2 { - font-size: 1.7rem; - font-weight: bold; - text-transform: uppercase; -} +#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; + .circle-edit-form>form { - >*{ - 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; + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; } } -} -.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 white; + flex: 1; + padding: 1rem; + width: 50%; + } -.member-select.color { + >*:last-of-type { + border-right: 1px solid $color-228-25-79; - .ss-main { - color: $color-233-18-29; - } -} + @media (max-width: 1220px) { + 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 { - display: grid; - grid-column-gap: 1.6rem; - grid-template-columns: 7vh auto; - grid-template-rows: repeat(2, 5.2vh); + sib-display { + border-left: 1px solid $color-228-25-79; + padding: 0 2.2rem; + } - >[name='account.picture'] { + sib-ac-checker { align-items: center; - align-self: center; - background-color: $color-213-20-91; - border-radius: 50%; + border-left: 1px solid $color-228-25-79; + 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%; - } - - object { - height: 45%; - width: 45%; - } + @media (max-width: 1220px) { + display: none; + } } + }*/ - >[name='sup'] { - align-self: end; - display: flex; - grid-column: 2 / span 1; - grid-row: 1 / span 1; - margin-bottom: 0.50rem; + .member-select.color { - [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; - } - } + .ss-main { + color: $color-233-18-29; } } -} \ No newline at end of file + + /*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; + } + } + } + } + }*/ +} + diff --git a/src/styles/layout/circle/circle-profile.scss b/src/styles/layout/circle/circle-profile.scss index 834985a..7810d26 100644 --- a/src/styles/layout/circle/circle-profile.scss +++ b/src/styles/layout/circle/circle-profile.scss @@ -1,12 +1,8 @@ -#circle-information, #circle-edit { +#circle-information { - .content-box__info { - @extend %padding-block; - - .backlink { - text-align: right; - display: block; - } + .box-button { + display: flex; + justify-content: flex-end; } .block { @@ -16,41 +12,10 @@ .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 { @@ -58,7 +23,7 @@ display: none; } - >div>team-template[name='team']>sib-display>div { + >div>circle-team-template[name='team']>sib-display>div { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; diff --git a/src/styles/layout/circle/circle.scss b/src/styles/layout/circle/circle.scss new file mode 100644 index 0000000..61e3e67 --- /dev/null +++ b/src/styles/layout/circle/circle.scss @@ -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; + } + } +} \ No newline at end of file diff --git a/src/styles/layout/project-profile/project-profile.scss b/src/styles/layout/project-profile/project-profile.scss index 1a8b0f2..0770e3a 100644 --- a/src/styles/layout/project-profile/project-profile.scss +++ b/src/styles/layout/project-profile/project-profile.scss @@ -193,7 +193,7 @@ } } - team-template[name='members'], captain-template[name='captain'] { + project-team-template[name='members'], captain-template[name='captain'] { display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; @@ -231,13 +231,4 @@ } } } - - .project-profile-user-avatar { - display: inline; - - * { - height: 100%; - width: 100%; - } - } } \ No newline at end of file diff --git a/src/templates/hd-circle-team.pug b/src/templates/hd-circle-team.pug index 62f7b37..7db73b7 100644 --- a/src/templates/hd-circle-team.pug +++ b/src/templates/hd-circle-team.pug @@ -1,6 +1,6 @@ include hd-user-avatar.pug -sib-widget(name='team-template') +sib-widget(name='circle-team-template') template sib-display( data-src="${await value}" diff --git a/src/templates/hd-user-avatar.pug b/src/templates/hd-user-avatar.pug index ec37182..8ee2dba 100644 --- a/src/templates/hd-user-avatar.pug +++ b/src/templates/hd-user-avatar.pug @@ -1,2 +1,2 @@ sib-widget(name='hd-user-avatar') - template ${value ? `` : ``} + template ${await value ? `` : ``} diff --git a/src/templates/template-team.pug b/src/templates/template-team.pug index 9a89ada..eeecc90 100644 --- a/src/templates/template-team.pug +++ b/src/templates/template-team.pug @@ -1,6 +1,6 @@ include hd-user-avatar.pug -sib-widget(name='team-template') +sib-widget(name='project-team-template') template sib-display.project-profile-user-avatar( data-src="${value.user ? value.user['@id'] : ''}" diff --git a/www/fonts/custom-icons.eot b/www/fonts/custom-icons.eot index 25e855d..4d91e63 100644 Binary files a/www/fonts/custom-icons.eot and b/www/fonts/custom-icons.eot differ diff --git a/www/fonts/custom-icons.svg b/www/fonts/custom-icons.svg index 05662ce..e24b0c4 100644 --- a/www/fonts/custom-icons.svg +++ b/www/fonts/custom-icons.svg @@ -1,46 +1,45 @@ - Generated by IcoMoon - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file +Generated by IcoMoon + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/www/fonts/custom-icons.ttf b/www/fonts/custom-icons.ttf index 55352f0..ee7fef2 100644 Binary files a/www/fonts/custom-icons.ttf and b/www/fonts/custom-icons.ttf differ diff --git a/www/fonts/custom-icons.woff b/www/fonts/custom-icons.woff index d640fa6..ae227e7 100644 Binary files a/www/fonts/custom-icons.woff and b/www/fonts/custom-icons.woff differ