diff --git a/src/dependencies.pug b/src/dependencies.pug index 5d5051d..d2927ab 100644 --- a/src/dependencies.pug +++ b/src/dependencies.pug @@ -33,5 +33,6 @@ script(data-default-context, type="application/ld+json") | "jabberID": "foaf:jabberID", | "picture": "foaf:depiction", | "firstName": "http://happy-dev.fr/owl/#first_name", - | "lastName": "http://happy-dev.fr/owl/#last_name" + | "lastName": "http://happy-dev.fr/owl/#last_name", + | "isAdmin": "http://happy-dev.fr/owl/#is_admin" | } diff --git a/src/menu-left.pug b/src/menu-left.pug index c633329..44880da 100644 --- a/src/menu-left.pug +++ b/src/menu-left.pug @@ -45,7 +45,7 @@ nav#main__menu //- next='project' //- ) div.divider - div.menu-wrapper + div div.menu div.menu-chevron sib-link(next='admin-circle-list') diff --git a/src/page-admin-circles-create.pug b/src/page-admin-circles-create.pug index 4be5618..ef8661d 100644 --- a/src/page-admin-circles-create.pug +++ b/src/page-admin-circles-create.pug @@ -1,7 +1,7 @@ div.content-box__info sib-link(class="backlink", next='admin-circle-list') Back - h1 New circle + h1.centered New circle p.center Here you can create a new circle according to your interests, what you want to share, etc. diff --git a/src/page-admin-circles.pug b/src/page-admin-circles.pug index 1c72ae7..3d202b5 100644 --- a/src/page-admin-circles.pug +++ b/src/page-admin-circles.pug @@ -4,8 +4,7 @@ sib-route(name='admin-circle-create') div.content-box__header.with-description - div - p.name Administration + h1.title-left.without-margin Administration #admin-circle-list(hidden) @@ -89,8 +88,9 @@ data-src=`${endpoints.circles}` fields='name, owner, buttons' - class-name='w33 cell border' - class-owner='w33 cell border' + class-name='w33 cell border cell-with-name' + class-owner='w33 cell border cell-with-id-card' + class-buttons='w33 cell border cell-with-buttons' widget-buttons="admin-circle-buttons" action-buttons="buttons" diff --git a/src/page-admin-projects-create.pug b/src/page-admin-projects-create.pug new file mode 100644 index 0000000..7a36080 --- /dev/null +++ b/src/page-admin-projects-create.pug @@ -0,0 +1,86 @@ +sib-widget(name='hd-template-project-title') + template + p ${value} + +div.content-box__info + sib-link(class="backlink" next='admin-project-list') Back + + sib-widget(name="admin-project-add-user") + template + sib-form( + data-holder + fields='user, project' + range-user=`${endpoints.users}` + value-project='${src}' + widget-project='sib-form-hidden' + naked + ) + + h1.centered New project + + sib-form.block( + data-src=`${endpoints.projects}` + + fields='line-1(customer.name, name), line-2(customer.logo), line-3(project.description), fieldset-fee, line-4(businessProvider.name, businessProvider.fee), fieldset-customer, line-5(customer.companyRegister), line-6(customer.address), line-7(customer.firstName, customer.lastName), line-8(customer.role), line-9(customer.email, customer.phone), fieldset-captain, line-10(captain)' + + class-fieldset-fee='fieldset' + value-fieldset-fee='Fee' + widget-fieldset-fee='hd-template-project-title' + + class-fieldset-customer='fieldset' + value-fieldset-customer='Customer\'s information' + widget-fieldset-customer='hd-template-project-title' + + class-fieldset-captain='fieldset' + value-fieldset-captain='Captain' + widget-fieldset-captain='hd-template-project-title' + + label-customer.name='Customer\'s name*' + class-customer.name='form-label is-light is-half-width' + + label-name='Project\'s name*' + class-name='form-label is-light is-half-width' + + label-customer.logo='Customer\'s logo' + class-customer.logo='form-label is-light is-half-width' + + label-project.description='Project description' + class-project.description='form-label is-light is-full-width' + widget-project.description='sib-form-textarea' + + label-businessProvider.name='Business provider*' + class-businessProvider.name='form-label is-light is-half-width' + + label-businessProvider.fee='Amount of the contribution' + class-businessProvider.fee='form-label is-light is-half-width' + + label-customer.companyregister='Company register' + class-customer.companyregister='form-label is-light is-half-width' + + label-customer.address='Address' + class-customer.address='form-label is-light is-full-width' + widget-customer.address='sib-form-textarea' + + label-customer.firstName='Name of the contact' + class-customer.firstName='form-label is-light is-half-width' + + label-customer.lastName='Firstname of the contact' + class-customer.lastName='form-label is-light is-half-width' + + label-customer.role='Role within the company' + class-customer.role='form-label is-light is-half-width' + + label-customer.email='Email' + class-customer.email='form-label is-light is-half-width' + + label-customer.phone='Phone' + class-customer.phone='form-label is-light is-half-width' + + range-captain=`${endpoints.users}` + class-captain='member-select form-label is-light is-half-width' + widget-captain='sib-form-auto-completion' + + next='admin-project-list' + + submit-button='Save' + ) diff --git a/src/page-admin-projects.pug b/src/page-admin-projects.pug index 80f8d3f..f9866f8 100644 --- a/src/page-admin-projects.pug +++ b/src/page-admin-projects.pug @@ -3,8 +3,89 @@ sib-route(name='admin-project-list') sib-route(name='admin-project-create') + div.content-box__header.with-description + h1.title-left.without-margin Administration #admin-project-list(hidden) + include templates/hd-user-avatar.pug + div.content-box__info + div.admin-header + div.admin-header__title Projects + sib-link( + class='button text-bold text-uppercase reversed button-yellow bordered with-icon icon-plus' + next='admin-project-create' + ) Create a new project - #admin-project-create(hidden) \ No newline at end of file + .table + div.table-header.grey-color + div Name + div Admins + div Captain + div Leave + + sib-widget(name="admin-project-leave-button") + template + sib-delete( + class='button text-bold text-uppercase reversed button-dark bordered with-icon icon-close' + data-src="${src}" + data-label='Leave' + ) + + sib-widget(name='project-captain') + template + sib-display( + data-src='${await value}' + fields='account.picture, sup(name), sub(username)' + + widget-account.picture='hd-user-avatar' + ) + + sib-widget(name='project-admins') + template + sib-display( + data-src='${value}' + fields='user' + search-fields='isAdmin' + search-value-isAdmin='true' + search-widget-isAdmin='sib-form-hidden' + widget-user='project-captain' + ) + + sib-widget(name="admin-project-buttons") + template + sib-display( + data-src='${src}' + nested-field='members' + fields='relation' + action-relation='relation' + widget-relation='admin-project-leave-button' + search-fields='user' + search-widget-user='sib-form-hidden' + search-value-user="-" + hd-inherit-user-id="search-value-user" + hd-inherit-widgets + ) + + sib-display( + class='table-body' + + data-src=`${endpoints.projects}` + fields='name, members, captain, buttons' + + class-name='w25 cell border cell-with-name hashtag' + class-members='w25 cell border' + class-captain='w25 cell border cell-with-id-card' + class-buttons='w25 cell border cell-with-buttons' + + widget-buttons="admin-project-buttons" + action-buttons="buttons" + hd-inherit-widgets + hd-inherit-widgets-multiple + + widget-captain='project-captain' + widget-members='project-admins' + ) + + #admin-project-create(hidden) + include page-admin-projects-create.pug \ No newline at end of file diff --git a/src/page-admin.pug b/src/page-admin.pug index 15fdfd1..2dd6834 100644 --- a/src/page-admin.pug +++ b/src/page-admin.pug @@ -1,10 +1,10 @@ .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 + #admin-projects(hidden) + include page-admin-projects.pug + //- #admin-users(hidden) + include page-admin-users.pug nav.jsRightMenu(role='navigation') sib-router(default-route='admin-circles') ul @@ -16,6 +16,6 @@ nav.jsRightMenu(role='navigation') sib-route(name='admin-circles') li a Circles - //- sib-route(name='admin-projects') + sib-route(name='admin-projects') li a Projects diff --git a/src/page-circle-edit.pug b/src/page-circle-edit.pug index 2ef1c0a..2a7bab0 100644 --- a/src/page-circle-edit.pug +++ b/src/page-circle-edit.pug @@ -8,7 +8,7 @@ div.content-box__info sib-widget(name='team-template-edit') template sib-display( - class='w50 cell border' + class='w50 cell border cell-with-id-card' data-src='${await value.user}' fields='account.picture, sup(name, groups), sub(profile.city)' @@ -64,7 +64,7 @@ div.content-box__info h2 Members list - sib-ac-checker(permission='acl:Append', bind-resources, nested-field='team') + sib-ac-checker(permission='acl:Append', bind-resources, nested-field='members') sib-form.block.team-form( bind-resources nested-field='members' diff --git a/src/page-circle-profile.pug b/src/page-circle-profile.pug index cd4e302..eb36bfc 100644 --- a/src/page-circle-profile.pug +++ b/src/page-circle-profile.pug @@ -25,10 +25,10 @@ sib-router(default-route='circle-profile', hidden) sib-display.block( bind-resources - fields='members' + fields='members.user' - multiple-members='' - widget-members='circle-team-template' + multiple-members.user='' + widget-members.user='circle-team-template' ) div.box-button diff --git a/src/page-project-create.pug b/src/page-project-create.pug deleted file mode 100644 index 80cbcea..0000000 --- a/src/page-project-create.pug +++ /dev/null @@ -1,30 +0,0 @@ -.content-box.with-padding.with-form.full-width - h1 New project - p Here you can create your project, add members and assign them a job. - - sib-form.block( - data-src=`${endpoints.projects}`, - range-members=`${endpoints.users}`, - range-team=`${endpoints.users}`, - - fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProviderFee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone)', - - label-customer.name='Customer\'s name', - label-name='Project\'s name', - label-customer.logo='Customer\'s logo', - label-description='Project description', - - widget-fieldset-fee='hd-template-project-title', - label-businessProvider='Business provider', - label-businessProviderFee='Amount of the contribution', - - widget-fieldset-customer='hd-template-project-title', - label-customer.companyRegister='Company register', - label-customer.address='Address', - label-customer.firstName='Name of the contact at the customer\'s premises', - label-customer.lastName='Firstname of the contact at the customer\'s premises', - label-customer.role='Role within the company', - label-customer.email='Email', - label-customer.phone='Phone' - ) - \ No newline at end of file diff --git a/src/page-project-drive.pug b/src/page-project-drive.pug deleted file mode 100644 index 1c06462..0000000 --- a/src/page-project-drive.pug +++ /dev/null @@ -1,11 +0,0 @@ -sib-widget(name='hd-drive') - template - iframe.drive.chat-view( - src='https://drive.google.com/embeddedfolderview?id=${value}' - ) -.content-box.with-padding.full-width.chat-view - sib-display( - bind-resources="" - fields="driveID" - widget-driveID='hd-drive' - ) \ No newline at end of file diff --git a/src/page-project.pug b/src/page-project.pug index eac8312..00ec69a 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -19,8 +19,6 @@ include page-project-chat.pug #project-information(hidden) include page-project-profile.pug - #project-drive(hidden) - include page-project-drive.pug dialog(id='project-contributions-help').modal sib-link(next='project-profile') @@ -38,7 +36,4 @@ nav.jsRightMenu(role='navigation') sib-route(name='project-information') li a Information - sib-route(name='project-drive', use-id) - li - a Drive - sib-route(name='project-contributions-help') + sib-route(name='project-contributions-help') \ No newline at end of file diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss index 8ef5984..3dff76e 100644 --- a/src/styles/base/form.scss +++ b/src/styles/base/form.scss @@ -6,7 +6,10 @@ color: $color-233-18-29; font-weight: bold; font-size: 2rem; - text-align: center; + + &.centered { + text-align: center; + } } .fieldset { @@ -16,7 +19,8 @@ flex: 1 0 100%; font-size: 1.8rem; font-weight: 600; - padding-bottom: 1rem; + margin: 2.6rem 0 1.8rem; + padding-bottom: 0.8rem; } p.center { diff --git a/src/styles/base/main.scss b/src/styles/base/main.scss index 8c7f2e4..4afff70 100644 --- a/src/styles/base/main.scss +++ b/src/styles/base/main.scss @@ -34,7 +34,8 @@ $breakpoints: (phone: 480px, /* Quick fix. Will be removed later */ -#admin-circles { +#admin-circles, +#admin-projects { display: contents; } @@ -75,6 +76,10 @@ h1, .h1-like { color: $color-233-18-29; font-size: 2rem; text-transform: uppercase; + + &.without-margin { + margin: 0; + } } h2, .h2-like { @@ -104,6 +109,21 @@ h5 { padding: 3.2rem; } +#admin-circle-create, +#admin-project-create { + + input[type='submit'] { + @extend .button, + .text-bold, + .text-uppercase, + .reversed, + .button-dark, + .bordered; + margin-left: auto; + margin-top: 3.2rem; + } +} + .content-box { @include window-style-modal(); display: flex; @@ -235,6 +255,7 @@ h5 { @import 'compat'; // Other base components @import 'form'; +@import 'table'; @import 'header'; @import 'menu-left'; diff --git a/src/styles/base/menu-left.scss b/src/styles/base/menu-left.scss index 606db3c..9848525 100644 --- a/src/styles/base/menu-left.scss +++ b/src/styles/base/menu-left.scss @@ -92,50 +92,64 @@ .sub-menu { - sib-set-default[name='project'] { - padding: 1rem 1rem 1rem 3.2rem; + /* Specific styles for the "Projects" tab */ - .project-customer, - .project-name { - display: inline-block; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - } - - .project-customer { - font-weight: bold; - width: 150px; - } - - .project-name { - padding-left: 14px; - width: calc(150px - 10px); - /* 10px = padding of the sib-set-default = better alignment */ - } - } - - .project-tab>div>sib-display[fields='project(customer.name, name), badge']>div:hover { - background-color: $color-233-20-17; + .project-tab>div>sib-display>div:nth-child(1) { sib-set-default[name='project'] { - background-color: $color-233-20-17; - box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26); - color: $color-218-100-98; - /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */ - width: auto; - z-index: 1000; + padding: 1rem 1rem 1rem 3.2rem; .project-customer, .project-name { - width: auto; + display: block; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .project-customer { + font-weight: bold; + width: 150px; } .project-name { - font-weight: normal; - } + padding-left: 14px; + width: calc(150px - 10px); + /* 10px = padding of the sib-set-default = better alignment */ + } + } + + hd-counter { + margin-top: 16px; + margin-left: 8px; + } + + &:hover { + background-color: $color-233-20-17; + box-shadow: 0 0 7px 0 rgba(0, 0, 0, 0.26); + + sib-set-default[name='project'] { + background-color: $color-233-20-17; + color: $color-218-100-98; + /* transition: all 0.6s cubic-bezier(0.39, 0.575, 0.565, 1); Need better animation */ + z-index: 1000; + + .project-customer, + .project-name { + width: auto; + } + + .project-name { + font-weight: normal; + } + } + + hd-counter { + display: none; + } } } + /* End of specific styles of "Projects" tab */ sib-display>div { diff --git a/src/styles/base/table.scss b/src/styles/base/table.scss new file mode 100644 index 0000000..6b5b0be --- /dev/null +++ b/src/styles/base/table.scss @@ -0,0 +1,193 @@ +#circle-information, +#circle-edit, +#admin-circle-list, +#admin-circle-create, +#admin-project-list, +#admin-project-create { + + .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; + } + + .w25 { + width: 25%; + } + + .w33 { + width: 33.3333%; + } + + .w50 { + width: 50%; + } + + .hashtag::before { + content: '#'; + } + } + + .cell-with-name { + color: $color-233-18-29; + font-weight: 600; + padding-top: 2.5rem; + } + + .cell-with-id-card>div, + /* for the table in circle-edit */ + .cell-with-id-card>sib-display>div, + project-captain[name='user']>sib-display>div { + /* for the captain's cell in project-admin */ + 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 %tag-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: '@'; + + } + } + } + } + + .cell-with-buttons { + align-items: center; + display: flex; + 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; + } + } +} diff --git a/src/styles/components/sidebar.scss b/src/styles/components/sidebar.scss index e5e0592..1e93db5 100644 --- a/src/styles/components/sidebar.scss +++ b/src/styles/components/sidebar.scss @@ -72,7 +72,7 @@ } &[name*='circle'], - &[name^='project'] { + &[name*='project'] { >li::before { font-size: 4rem; @@ -102,6 +102,10 @@ &[name='admin-circles']>li { @include ci('bubble-add'); } + + &[name='admin-projects']>li { + @include ci('add'); + } } } } diff --git a/src/styles/layout/circle/_index.scss b/src/styles/layout/circle/_index.scss index 17b4580..8ef0299 100644 --- a/src/styles/layout/circle/_index.scss +++ b/src/styles/layout/circle/_index.scss @@ -2,4 +2,3 @@ @import 'circle-profile'; @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 deleted file mode 100644 index ac5bee0..0000000 --- a/src/styles/layout/circle/admin-circle-create.scss +++ /dev/null @@ -1,13 +0,0 @@ -#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.scss b/src/styles/layout/circle/circle.scss index 160ecae..b6f7d2e 100644 --- a/src/styles/layout/circle/circle.scss +++ b/src/styles/layout/circle/circle.scss @@ -1,7 +1,9 @@ #circle-information, #circle-edit, #admin-circle-list, -#admin-circle-create { +#admin-circle-create, +#admin-project-list, +#admin-project-create { .content-box__info { @extend %padding-block; @@ -59,6 +61,10 @@ word-wrap: break-word; } + .w25 { + width: 25%; + } + .w33 { width: 33.3333%; } @@ -66,22 +72,21 @@ .w50 { width: 50%; } - - [name="buttons"] { - @extend .border; - @extend .cell; - @extend .w33; + + .hashtag::before { + content: '#'; } } - .table-body>div>sib-display>div>sib-display-value[name='name'] { + .cell-with-name { color: $color-233-18-29; font-weight: 600; padding-top: 2.5rem; } - [name='members']>sib-display>div, - [name='owner']>sib-display>div { + .cell-with-id-card>div, /* for the table in circle-edit */ + .cell-with-id-card>sib-display>div, + project-captain[name='user']>sib-display>div { /* for the captain's cell in project-admin */ display: grid; grid-column-gap: 1.6rem; grid-template-columns: 7vh auto; @@ -158,7 +163,7 @@ } } - admin-circle-buttons[name='buttons'] { + .cell-with-buttons { align-items: center; display: flex; justify-content: center;