From ed50a26380d138efcad36081c507d2460882f706 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ga=C3=ABlle=20Morin?= Date: Mon, 28 Jan 2019 18:19:42 +0100 Subject: [PATCH] ui(project-edit): #issue60 edit team + #issue83 CSS - project edit Customize labels. Styling labels, inputs, text areas, title, paragraph, buttons and checkbox. Big clean up --- src/page-project-edit.pug | 51 ++++-- src/page-project-profile.pug | 2 +- src/styles/content.scss | 19 +++ src/styles/filters.scss | 1 + src/styles/form.scss | 213 ++++++++++++++------------ src/styles/material-design-icons.scss | 3 +- src/styles/project-profile.scss | 22 --- src/styles/variables.scss | 27 ++++ www/fonts/material-design-icons.svg | 4 + 9 files changed, 208 insertions(+), 134 deletions(-) diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 859cea0..7e4a992 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -1,13 +1,38 @@ -h1 Edit project - //- sib-display(data-fields="name" bind-resources)] -.form-view - sib-form( - range-customer=`${sdn}/customers/`, - range-team=`${sdn}/members/`, - data-fields=`name, phone, customer, description, team, jabberRoom, foaf:jabberID`, - widget-jabberRoom='sib-form-checkbox', - widget-description='sib-form-textarea', - widget-team='hdapp-link-more', - label-team='Equipe' - bind-resources - ) +.frame-form + h1 Edit your project + p Here you can edit your projet's details + Do not forget to add comment + .form-view + sib-form( + range-team=`${sdn}/users/`, + range-members=`${sdn}/project-members/`, + + data-fields=`customer.name, name, description, customer.logo, customer.companyRegister, customer.address, customer.firstName, customer.lastName, customer.role, customer.email, customer.phone, block-fee, jabberRoom, foaf:jabberID, block-team`, + set-block-team=`team, members`, + set-block-fee=`businessProvider, businessProviderFee`, + + 'label-customer,name'='Business name', + label-name='Project name', + label-description='Project description', + 'label-customer,logo'='Customer logo', + 'label-customer,companyRegister'='Company register', + 'label-customer,address'='Customer address', + 'label-customer,firstName'='Contact firstname', + 'label-customer,lastName'='Contact lastname', + 'label-customer,role'='Contact role', + 'label-customer,email'='Contact email', + 'label-customer,phone'='Contact phone', + label-businessProvider='Business provider', + label-businessProviderFee='Fee (%)', + label-foaf:jabberID='Chatroom id', + label-team='Teammates', + label-members='Member role' + + widget-jabberRoom='sib-form-checkbox', + widget-description='sib-form-textarea', + widget-team='sib-form-multiple-dropdown', + widget-members='sib-form-multiple-dropdown', + + bind-resources + ) + diff --git a/src/page-project-profile.pug b/src/page-project-profile.pug index ac882b1..40e7e9b 100644 --- a/src/page-project-profile.pug +++ b/src/page-project-profile.pug @@ -21,7 +21,7 @@ sib-display( data-fields='block-title, infos, block-lead, block-fee, block-customer', - set-block-title='const-title1, number, customer.name,const-title2, name, entitled, creationDate', + set-block-title='const-title1, number, customer.name, const-title2, name, entitled, creationDate', value-const-title1="N°", value-const-title2="-", value-entitled="Creation date:" diff --git a/src/styles/content.scss b/src/styles/content.scss index c29f754..a91f6fb 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -273,6 +273,25 @@ hdapp-available { } } +sib-form { + + form > * { + margin-top: 0.5em; + } + + // button like + input[type='color'], + input[type='file'], + input[type='reset'], + input[type='submit'] { + @extend %button; + } + + input[type='reset'] { + display: none; + } +} + /* label { @extend h2; diff --git a/src/styles/filters.scss b/src/styles/filters.scss index 3f9eb37..13b6f1a 100644 --- a/src/styles/filters.scss +++ b/src/styles/filters.scss @@ -17,6 +17,7 @@ font-size: 85%; line-height: 1.80; margin-top: 1em; + padding: 0.7em; width: 95%; -moz-appearance: none; -webkit-appearance: none; diff --git a/src/styles/form.scss b/src/styles/form.scss index e62fc0e..50b7cfd 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -1,118 +1,137 @@ -%button { - display: inline-block; - padding: 0.5em 1em; - border: none; - border-radius: 100em; - background-color: $color-selective-yellow; - color: $color-dark-lava; - font-weight: normal; -} - -%status-open { - background-color: $color-majorelle-blue; - border: none; - border-radius: 100em; - color: $color-white; - display: inline-block; - font-weight: normal; - padding: 0.5em 1em; -} - -.form-view { +.frame-form { + padding: 4em 5em 6em; @extend %frame; - padding: 1em; -} -sib-display sib-form form { - //margin: -0.5em; - > * { - margin-top: 0.5em; + + .form-view { + border-bottom: 1px solid $color-platinum; + padding-bottom: 1.5em; } } -sib-form.block { - display: block; - > form { + +#project-create, +#project-edit { + font-size: 17px; + + h1 { + color: $color-purple-dark; + font-weight: bold; + font-size: 20px; + text-align: center; + } + + p { + margin-bottom: 4em; + text-align: center; + } + + div[name^='block-'] { + display: flex; + > * { - display: block; - margin-top: 2em; - &:first-child { - margin-top: 0; + margin-right: 4rem; + } + } + + sib-form-checkbox, + sib-form-label-text, + sib-form-multiple-dropdown, + sib-form-textarea { + align-items: stretch; + display: flex; + flex-direction: column; + + > label { + color: $color-spun-pearl; + font-weight: 600; + margin-bottom: 0.5em; + } + + input, + select, + textarea { + background: $color-glitter; + border: none; + color: $color-purple-dark; + line-height: 1.5; + } + + input, + textarea { + margin-bottom: 2em; + padding: 1em; + } + + select { + margin-bottom: 1em; + padding: 0.5em; + } + } + + sib-form-checkbox { + flex-direction: row; + + [type='checkbox'] { + cursor: pointer; + position: relative; + + &:before { + border: 2px solid $color-taupe-gray; + content: ''; + height: 1rem; + left: 0; + margin-left: 1rem; + padding-bottom: 0.2rem; + position: absolute; + width: 1.2rem; + z-index: 1; } - &:not(sib-form-checkbox) { - label { - margin: 0.5em 0; - display: block; - } - input, - textarea { - background-color: $color-anti-flash-white; - box-shadow: none !important; - border: none; - padding: 1em 2em; - } - input, - select { - height: 3em; - } - input, - textarea, - select { - width: 100%; - } - textarea { - resize: vertical; - height: 200px; - min-height: 3em; - } + + &:checked { + &:before { + border: 2px solid $color-taupe-gray; + color: $color-majorelle-blue; + 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-white; + content: ''; + height: 1rem; + position: absolute; + width: 1rem; } } - sib-form-multiple-dropdown select { - width: calc(100% - 2.5em); - } - input[type='submit'] { - width: auto; - } - } -} - -//fix: style à mignrer dans filter.scss ? => A voir si ces styles sont utilisés ailleurs que pour les filtres. -sib-form { - // text like - textarea, - input:not([type='button']):not([type='checkbox']):not([type='color']):not([type='file']):not([type='hidden']):not([type='image']):not([type='radio']):not([type='range']):not([type='reset']):not([type='submit']) { - padding: 0.7em; - border: none; - @extend %shadow; - } - - // button like - button, - input[type='button'], - input[type='color'], - input[type='file'], - input[type='reset'], - input[type='submit'] { - @extend %button; - } - - input[type='reset'] { - display: none; } sib-form-multiple-dropdown { + button { appearance: none; background-color: $color-white; - color: $color-selective-yellow; border: 1px solid; - width: 1em; + border-radius: 100%; + color: $color-majorelle-blue; + cursor: pointer; + font-size: 1.5em; height: 1em; line-height: 0; - font-size: 1.5em; - padding: 0; - cursor: pointer; margin: 0.2em; - vertical-align: middle; padding: 0 0.04em 0.08em; + vertical-align: middle; + width: 1em; } } + + input[type='submit'] { + margin-top: 3.5em; + @extend %button-form; + } } diff --git a/src/styles/material-design-icons.scss b/src/styles/material-design-icons.scss index b53ae2b..436656b 100644 --- a/src/styles/material-design-icons.scss +++ b/src/styles/material-design-icons.scss @@ -23,7 +23,8 @@ $mdi-version: "3.3.92" !default; $mdi-icons: ( account-outline: '\F013', atom: '\F767', - cellphone-iphone: '\F120' + cellphone-iphone: '\F120', + check: '\F12C' ); %mdi, diff --git a/src/styles/project-profile.scss b/src/styles/project-profile.scss index 5087ccf..59d1593 100644 --- a/src/styles/project-profile.scss +++ b/src/styles/project-profile.scss @@ -240,25 +240,3 @@ } } } - -#project-edit form { - display: flex; - flex-direction: column; - align-items: stretch; - - > * { - display: flex; - margin-bottom: 1em; - - label { - flex-basis: 8em; - flex-shrink: 0; - } - - input, - textarea { - flex-grow: 1; - min-width: 0; - } - } -} diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 60f8e1b..4d30014 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -9,6 +9,7 @@ $color-mustard: hsl(46, 100%, 67%); $color-rolling-stone: hsl(210, 4%, 50%); $color-taupe-gray: hsl(210, 5%, 56%); +$color-platinum: hsl(210, 17%, 91%); $color-anti-flash-white: hsl(210, 25%, 95%); $color-text-base: hsl(213, 4%, 50%); $color-gainsboro: hsl(213, 13%, 86%); @@ -16,10 +17,26 @@ $color-gainsboro-a02: hsla(213, 13%, 86%, 0.2); $color-bombay: hsl(215, 9%, 73%); $color-dark-lava: hsl(216, 4%, 22%); $color-link-water: hsl(221, 51%, 90%); +$color-glitter: hsl(222, 57%, 95%); $color-purple-dark: hsl(233, 18%, 29%); $color-spun-pearl: hsl(244, 10%, 70%); $color-majorelle-blue: hsl(244, 73%, 62%); +%button { + display: inline-block; + padding: 0.5em 1.5em; + border: none; + border-radius: 100em; + font-weight: normal; +} + +%button-form { + background-color: $color-purple-dark; + color: $color-white; + float: right; + font-weight: bold; + text-transform: uppercase; +} %shadow { box-shadow: 0 0 8px 0 hsla(212, 7%, 55%, 0.19); @@ -34,6 +51,16 @@ $color-majorelle-blue: hsl(244, 73%, 62%); background-color: $color-white; } +%status-open { + background-color: $color-majorelle-blue; + border: none; + border-radius: 100em; + color: $color-white; + display: inline-block; + font-weight: normal; + padding: 0.5em 1em; +} + $breakpoints: ( phone: 480px, tablet: 768px, diff --git a/www/fonts/material-design-icons.svg b/www/fonts/material-design-icons.svg index 2b1e8e6..48bab3a 100644 --- a/www/fonts/material-design-icons.svg +++ b/www/fonts/material-design-icons.svg @@ -19,6 +19,10 @@ + +