diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug
index 3aad238e3f7caae42ede5da1c153bfaa92120c1b..60d0aac4ca77c5e827511760367bd7f98313542f 100644
--- a/src/page-project-edit.pug
+++ b/src/page-project-edit.pug
@@ -1,55 +1,90 @@
+sib-widget(name='hd-fieldset-title')
+ template
+ label ${label}
+
+sib-widget(name='hd-project-members')
+ template
+ sib-display.member-info(
+ data-src='${id}'
+ fields='user.account.picture, user.name, name'
+ widget-user.account.picture='sib-display-img'
+ )
+
+sib-widget(name='hd-member-form')
+ template
+ sib-form.member-add(
+ bind-resources
+ range-user=`${endpoints.users}`
+ nested-field='members'
+ fields='member-form__input(user, name)'
+
+ class-user='member-select form-label is-light is-half-width'
+ label-user='Member'
+ widget-user='sib-form-auto-completion'
+
+ class-name='form-label is-light is-half-width'
+ label-name='Role'
+
+ submit-button='Add'
+ )
.content-box.with-padding.with-form.full-width
+
h1 Edit your project
- p Here you can edit your projet's details
-
- sib-widget(name='hd-template-project-title')
- template
- span ${label}
-
- sib-widget(name='template-members')
- template
- sib-form.team.is-horizontal(
- naked,
- data-src='${id}',
- fields='user.name, name',
- range-user.name=`${endpoints.users}`,
- class-name='field',
- class-user.name='field',
- label-name='Role',
- label-user.name='Member(s)',
- )
-
- sib-form.block(
- fields='block-project__info(customer.name, name, customer.logo, description), block-project__fee(fieldset-fee, businessProvider, businessProvider.fee), block-project__customer(fieldset-customer, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone), block-project__team(fieldset-team, members)',
-
- label-customer.name='Customer\'s name',
- label-name='Project\'s name',
- label-customer.logo='Customer\'s logo',
- label-description='Project description',
-
- range-businessProvider=`${endpoints.businessproviders}`,
- label-businessProvider='Business provider',
- label-businessProvider.fee='Amount of the contribution (%)',
- widget-fieldset-fee='hd-template-project-title',
- widget-businessProvider.fee='sib-form-number',
- label-fieldset-fee='Fee',
-
- label-customer.companyRegister='Company registration number',
- 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',
- widget-fieldset-customer='hd-template-project-title',
- label-fieldset-customer='Customer information',
-
- label-fieldset-team='The team',
- widget-fieldset-team='hd-template-project-title',
- widget-members='template-members',
- multiple-members,
-
- bind-resources
- )
+
+
+ sib-form.form-container.block(
+ bind-resources
+
+ fields='fieldset-info, block-project__info(customer.name, name, customer.logo, description), fieldset-fee, block-project__fee(businessProvider, businessProviderFee), fieldset-customer, block-project__customer(customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone), fieldset-members, block-project__members(member-form, members)'
+
+ class-customer.name='form-label is-light is-half-width'
+ class-name='form-label is-light is-half-width'
+ class-customer.logo='form-label is-light is-full-width'
+ class-description='form-label is-light is-full-width'
+ label-fieldset-info=''
+ label-customer.name='Customer\'s name'
+ label-name='Project\'s name*'
+ label-customer.logo='Customer\'s logo'
+ label-description='Project description'
+ upload-url-customer.logo=''
+ widget-fieldset-info='hd-fieldset-title'
+ widget-description='sib-form-textarea'
+
+ class-fieldset-fee='fieldset'
+ class-businessprovider='form-label is-light is-half-width'
+ class-businessproviderfee='form-label is-light is-half-width'
+ label-fieldset-fee='Fee'
+ label-businessprovider='Business provider'
+ label-businessproviderfee='Amount of the contribution'
+ widget-fieldset-fee='hd-fieldset-title'
+
+ class-fieldset-customer='fieldset'
+ class-customer.companyregister='form-label is-light is-half-width'
+ class-customer.address='form-label is-light is-half-width'
+ class-customer.firstname='form-label is-light is-half-width'
+ class-customer.lastname='form-label is-light is-half-width'
+ class-customer.role='form-label is-light is-half-width'
+ class-customer.email='form-label is-light is-half-width'
+ class-customer.phone='form-label is-light is-half-width'
+ label-fieldset-customer='Customer\'s information'
+ 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'
+ widget-fieldset-customer='hd-fieldset-title'
+
+ class-fieldset-members='fieldset'
+ label-fieldset-members='Team'
+ label-members=''
+ multiple-members=''
+ widget-members='hd-project-members'
+ widget-fieldset-members='hd-fieldset-title'
+ widget-member-form='hd-member-form'
+
+ submit-button='Submit'
+ )
diff --git a/src/page-project.pug b/src/page-project.pug
index 2e871cf0c0e8daaac6e5fb0ee0ff4bd004372a7d..6f1f7f1c696ff76e9fb707751f7f8090ce201f45 100644
--- a/src/page-project.pug
+++ b/src/page-project.pug
@@ -24,8 +24,8 @@ nav.jsRightMenu(role='navigation')
li
a Drive
sib-route(name='project-edit', use-id)
- //- li
- //- a Edit
+ li
+ a Edit
sib-route(name='project-create', use-id)
//- li
//- a Add new
\ No newline at end of file
diff --git a/src/styles/base/form.scss b/src/styles/base/form.scss
index a2b0c07b3df9e4d1e5f6bd076c3d43a8073b7973..c1ae4a76b1355ddabf012fd9be584d57082034b3 100644
--- a/src/styles/base/form.scss
+++ b/src/styles/base/form.scss
@@ -2,14 +2,6 @@
&.with-form {
- hd-template-project-title {
- border-bottom: 1px solid $color-221-51-90;
- color: $color-233-18-29;
- font-size: 1.8rem;
- font-weight: 600;
- padding-bottom: 1rem;
- }
-
sib-form {
padding-bottom: 2.55rem;
}
@@ -20,6 +12,16 @@
font-size: 2rem;
text-align: center;
}
+
+ .fieldset {
+ border-bottom: 1px solid $color-221-51-90;
+ color: $color-233-18-29;
+ display: flex;
+ flex: 1 0 100%;
+ font-size: 1.8rem;
+ font-weight: 600;
+ padding-bottom: 1rem;
+ }
p.center {
margin: 0;
@@ -31,16 +33,32 @@
margin-bottom: 2rem;
}
- div[name^='block-'] {
+ [name^='block-'] {
+ margin-bottom: 2.75rem;
+ }
+
+ form {
display: flex;
flex-direction: column;
}
+ sib-set-default {
+ clear: both;
+ display: flex;
+ flex-wrap: wrap;
+ max-width: 100%;
+
+ sib-form-label-text {
+ float: left;
+ width: 50%;
+ }
+ }
+
label {
display: flex;
flex-direction: column;
- input,
+ input:not([type='file']),
textarea {
-webkit-tap-highlight-color: $color-244-73-62;
background-color: $color-222-57-95;
@@ -49,12 +67,11 @@
color: $color-233-18-29;
/*flex: 1 1 0; Problem on Firefox for input type date*/
line-height: 1;
- margin-top: 0.8rem;
min-width: 0;
padding: 1rem;
}
- input:not([type="search"]),
+ input:not([type="search"]):not([type="file"]),
textarea {
border: 2px solid $color-222-57-95;
@@ -63,6 +80,10 @@
border-bottom: 2px solid $color-244-73-62;
}
}
+
+ textarea {
+ height: 100px;
+ }
}
input[type='submit'] {
@@ -70,34 +91,89 @@
border: none;
border-radius: 100em;
color: $color-0-0-100;
- float: right;
+ cursor: pointer;
font-size: 1.4rem;
font-weight: bold;
- margin-top: 6rem;
- padding: 0.85rem 2.55rem;
+ margin-left: auto;
+ margin-top: 3.2rem;
+ padding: 0.55rem 2.5rem;
text-transform: uppercase;
}
/* CLASSES Peut-être à sortir de .content-box */
- .form-label {
- flex: 1 1 auto;
- font-weight: 600;
+ .form-container>form {
+ margin-top: 2.7rem;
+ }
+
+ .form-label {
+ /*flex: 1 1 auto;*/
+ font-weight: 600;
+
+ &.is-dark label {
+ color: $color-216-4-22;
+ margin-top: 3rem;
+
+ &>*:nth-child(2) {
+ margin-top: 0.8rem;
+ }
+ }
+
+ &.is-light label {
+ color: $color-244-10-70;
+ margin-top: 1.8rem;
+ text-transform: uppercase;
+
+ &>*:nth-child(2) {
+ margin-top: 0.8rem;
+ }
+ }
+ }
+
+ .is-full-width {
+ flex: 1 1 100%;
+ }
+
+ .is-half-width {
+ box-sizing: border-box;
+ flex: 0 0 50%;
+
+ &:nth-child(even) {
+ padding-left: 1.7rem;
+ }
+
+ &:nth-child(odd) {
+ padding-right: 1.7rem;
+ }
+ }
+
+ /* WIDGETS SIB */
+
+ sib-form-auto-completion.member-select {
+ align-self: flex-end;
+ font-weight: normal;
+
+ .ss-single-selected {
+ background-color: $color-222-57-95;
+ border: none;
+ border-radius: 0px;
+ display: flex;
+ margin-top: 0.8rem;
+ min-height: 3.9rem;
+ padding-left: 1rem;
+ text-transform: none;
- &.is-dark label {
- color: $color-216-4-22;
- margin-top: 3rem;
+ .ss-arrow span {
+ border: solid $color-244-73-62;
+ border-width: 0 2px 2px 0;
+ }
}
- &.is-light label {
- color: $color-244-10-70;
- margin-top: 2.2rem;
- text-transform: uppercase;
+ .ss-content .ss-list .ss-option {
+ text-transform: none;
}
}
- /* WIDGETS */
-
sib-form-date {
input[type="date"] {
background-image: url("/images/calendar.svg");
@@ -132,6 +208,39 @@
}
}
+ sib-form-file {
+
+ label {
+ align-items: baseline;
+ clear: both;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: wrap;
+ max-width: 100%;
+
+ div {
+ width: 100%;
+ }
+
+ input[type='text'] {
+ box-sizing: border-box;
+ flex: 0 0 50%;
+ }
+
+ input[type='file'] {
+ box-sizing: border-box;
+ flex: 0 0 20%;
+ color: $color-244-73-62;
+ cursor: pointer;
+ padding-left: 3rem;
+ }
+ }
+ }
+
+ sib-multiple-form {
+ margin-top: 1.8rem;
+ }
+
sib-multiple-select {
sib-form-auto-completion > label {
@@ -139,9 +248,11 @@
flex-direction: column;
.ss-main {
+ font-weight: normal;
margin-bottom: 7.8rem;
margin-top: 1.6rem;
max-width: 50vw;
+ text-transform: none;
.ss-multi-selected {
align-items: center;
@@ -200,263 +311,98 @@
}
}
- /*
- input {
- -webkit-appearance: none;
- align-items: center;
- background: $color-222-57-95;
- border: none;
- color: $color-233-18-29;
- display: inline-flex;
- justify-content: flex-start;
- line-height: 1.5;
- vertical-align: top;
- }
-
- sib-form-auto-completion,
- sib-form-checkbox,
- sib-form-dropdown,
- sib-form-label-text,
- sib-form-multiple-dropdown,
- sib-form-number,
- sib-form-textarea {
- display: flex;
- flex-direction: column;
-
- >label {
- color: $color-244-10-70;
- font-weight: 600;
- margin: 2em 0 0.5em;
- text-transform: uppercase;
-
- >div {
- padding-bottom: 1rem;
- }
- }
-
- select,
- textarea {
- background: $color-222-57-95;
- border: none;
- color: $color-233-18-29;
- line-height: 1.5;
- width: 100%;
-
- }
-
- select,
- textarea {
- padding: 1.7rem;
- }
-
- select {
- margin-bottom: 1.7rem;
- }
- }
-
- sib-form-auto-completion,
- sib-form-checkbox,
- sib-form-multiple-dropdown {
-
- label {
- color: $color-216-4-22;
- font-weight: 600;
- text-transform: initial;
- }
- }
+ /* CUSTOM WIDGETS */
- sib-form-auto-completion {
+ hd-member-form {
+ width: 100%;
- div.choices__inner {
- background-color: inherit;
- border: none;
+ form {
display: flex;
- flex-direction: column-reverse;
- padding-left: 0;
-
- div.choices__list {
- margin-top: 1.7rem;
+ flex-direction: column;
- div.choices__item {
+ [name='member-form__input'] {
+ margin-bottom: 1rem;
+ }
- button.choices__button {
- border-left: 1px solid $color-43-100-50;
- opacity: 1;
- padding-left: 0;
- }
- }
+ sib-form-auto-completion {
+ float: left;
}
- input[type='text'].choices__input {
- max-width: 27.2rem;
- min-width: 27.2rem;
+ input[type='submit'] {
+ background-color: transparent;
+ border: 1px solid $color-244-73-62;
+ color: $color-244-73-62;
}
}
}
- sib-form-checkbox {
- flex-direction: row;
+ [widget='hd-project-members'] {
+ display: flex;
+ flex-wrap: wrap;
+ width: 100%;
- [type='checkbox'] {
- position: relative;
- margin-top: 2em;
-
- &:before {
- border: 2px solid $color-210-5-56;
- content: '';
- height: 1rem;
- left: 0;
- margin-left: 1rem;
- padding-bottom: 0.2rem;
- position: absolute;
- width: 1.2rem;
- z-index: 1;
- }
+ &>label {
+ display: none;
+ }
- &:checked {
- &:before {
- border: 2px solid $color-210-5-56;
- color: $color-244-73-62;
- height: 1rem;
- left: 0;
- margin-left: 1rem;
- padding-bottom: 0.2rem;
- position: absolute;
- width: 1.2rem;
- z-index: 1;
- @include mdi('check');
- }
+ &>div {
+ align-items: center;
+ border: 1px solid $color-43-100-50;
+ border-radius: 3px;
+ display: flex;
+ margin: 0 1.5rem 1.5rem 0;
+ padding: 2.2rem;
+
+ .member-info>div {
+ display: grid;
+ grid-template-areas: "avatar name"
+ "avatar role";
+ grid-column-gap: 15px;
+ margin-right: 15px;
}
- &:after {
- background: $color-0-0-100;
- content: '';
- height: 1rem;
- position: absolute;
- width: 1rem;
+ &>button {
+ cursor: pointer;
+ background-color: transparent;
+ border: 1px solid $color-43-100-50;
+ border-radius: 50%;
+ color: $color-43-100-50;
+ height: 22px;
+ width: 22px;
}
}
- }
-
- sib-form-dropdown {
-
- select {
- appearance: none;
- -moz-appearance: none;
- -webkit-appearance: none;
- background-image: url("/images/chevron-down.png");
- background-position: right 12px top 60%;
- background-repeat: no-repeat;
- background-size: 14px 9px;
- box-sizing: border-box;
- }
- }
- */
- /* A REFACTORISER. PAS ENCORE UTILISE SUR L'APPLI */
- /*
- sib-form-multiple-dropdown {
-
- button {
- appearance: none;
- background-color: $color-0-0-100;
- border: 1px solid;
- border-radius: 100%;
- color: $color-244-73-62;
- font-size: 2.55rem;
- height: 1em;
- line-height: 0;
- margin: 0.34rem;
- padding: 0 0.04em 0.08em;
- vertical-align: middle;
- width: 1em;
- }
- }
- sib-form-textarea {
- align-items: stretch;
- }
-
- sib-multiple-form {
-
- >label {
+ &>button {
display: none;
}
- }
-
- input[type='submit'] {
- margin-top: 6rem;
- background-color: $color-233-18-29;
- color: $color-0-0-100;
- float: right;
- font-weight: bold;
- text-transform: uppercase;
- }
- */
- }
- /*
- .is-horizontal {
- display: flex;
- }
-
- sib-multiple-form[name='members'] {
-
- >div {
- align-items: center;
- display: flex;
- }
-
- >div:not(:nth-child(-n + 2)) {
-
- label {
- >div {
- display: none;
+ sib-display-img {
+ grid-area: avatar;
+ align-items: center;
+ background-color: #e3e8ed;
+ border-radius: 50%;
+ display: flex;
+ height: 45px;
+ justify-content: center;
+ overflow: hidden;
+ width: 45px;
+
+ img {
+ height: 100%;
+ object-fit: cover;
+ object-position: center;
+ width: 100%;
}
}
- }
- button {
- appearance: none;
- background-color: $color-0-0-100;
- border: 1px solid;
- border-radius: 100%;
- color: $color-244-73-62;
- font-size: 2.55rem;
- height: 1em;
- line-height: 0;
- margin: 0.34rem;
- padding: 0 0.04em 0.08em;
- vertical-align: middle;
- width: 1em;
-
- &::after {
- content: Add;
+ sib-display-value:first-of-type {
+ font-weight: 600;
+ grid-area: name;
+ }
+
+ sib-display-value:last-of-type {
+ grid-area: role;
}
}
}
- */
-}
-/*
-sib-form {
-
- form > * {
- margin-top: 0.85rem;
- }
-
- // button like
- input[type='color'],
- input[type='file'],
- input[type='reset'],
- input[type='submit'] {
- display: inline-block;
- padding: 0.85rem 2.55rem;
- border: none;
- border-radius: 100em;
- font-weight: normal;
- }
-
- input[type='reset'] {
- display: none;
- }
}
-*/