Merge branch 'gm-project-edition' into 'staging'

Resolve "Project edition"

See merge request startinblox/applications/sib-app!57
This commit is contained in:
Jean-Baptiste Pasquier 2019-08-06 14:17:54 +00:00
commit 736338092c
3 changed files with 290 additions and 309 deletions

View File

@ -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.form-container.block(
bind-resources
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)',
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)'
label-customer.name='Customer\'s name',
label-name='Project\'s name',
label-customer.logo='Customer\'s logo',
label-description='Project description',
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'
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',
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'
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',
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'
label-fieldset-team='The team',
widget-fieldset-team='hd-template-project-title',
widget-members='template-members',
multiple-members,
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'
bind-resources
)
submit-button='Submit'
)

View File

@ -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

View File

@ -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;
}
@ -21,6 +13,16 @@
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;
text-align: center;
@ -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;
}
&.is-dark label {
color: $color-216-4-22;
margin-top: 3rem;
.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;
.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;
}
/* CUSTOM WIDGETS */
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;
hd-member-form {
width: 100%;
>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;
}
}
sib-form-auto-completion {
div.choices__inner {
background-color: inherit;
border: none;
form {
display: flex;
flex-direction: column-reverse;
padding-left: 0;
flex-direction: column;
div.choices__list {
margin-top: 1.7rem;
div.choices__item {
button.choices__button {
border-left: 1px solid $color-43-100-50;
opacity: 1;
padding-left: 0;
}
}
[name='member-form__input'] {
margin-bottom: 1rem;
}
input[type='text'].choices__input {
max-width: 27.2rem;
min-width: 27.2rem;
sib-form-auto-completion {
float: left;
}
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;
}
&: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');
}
}
&:after {
background: $color-0-0-100;
content: '';
height: 1rem;
position: absolute;
width: 1rem;
}
}
}
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 {
&>label {
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;
}
&>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;
sib-multiple-form[name='members'] {
.member-info>div {
display: grid;
grid-template-areas: "avatar name"
"avatar role";
grid-column-gap: 15px;
margin-right: 15px;
}
>div {
align-items: center;
display: flex;
}
>div:not(:nth-child(-n + 2)) {
label {
>div {
display: none;
&>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;
}
}
}
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;
&>button {
display: none;
}
&::after {
content: Add;
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%;
}
}
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;
}
}
*/