diff --git a/src/header.pug b/src/header.pug index 36de081..09a153c 100644 --- a/src/header.pug +++ b/src/header.pug @@ -13,5 +13,5 @@ #profile img(src="/images/user.jpg") span - | Paul + | Profile span.icon-arrow-down \ No newline at end of file diff --git a/src/page-group-chat.pug b/src/page-group-chat.pug index 6b6f711..848f850 100644 --- a/src/page-group-chat.pug +++ b/src/page-group-chat.pug @@ -1,2 +1,9 @@ -#group-chat.chat-view(bind-resources) - sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources) \ No newline at end of file +#group-chat.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 diff --git a/src/page-group-create.pug b/src/page-group-create.pug index 6fb9137..8da19e8 100644 --- a/src/page-group-create.pug +++ b/src/page-group-create.pug @@ -1,7 +1,9 @@ #group-create - sib-form( - data-src=`${sdn}/channels/`, - range-owner=`${sdn}/members/`, - widget-members='sib-form-multiple-dropdown', - range-members=`${sdn}/members/` - ) + h1 New group + .form-view + sib-form.block( + data-src=`${sdn}/channels/`, + range-owner=`${sdn}/members/`, + widget-members='sib-form-multiple-dropdown', + range-members=`${sdn}/members/` + ) diff --git a/src/page-group-edit.pug b/src/page-group-edit.pug index b575a69..3d42147 100644 --- a/src/page-group-edit.pug +++ b/src/page-group-edit.pug @@ -1,7 +1,9 @@ #group-edit - sib-form.block( - range-owner=`${sdn}/members/`, - widget-members='sib-form-multiple-dropdown', - range-members=`${sdn}/members/`, - bind-resources - ) + h1 Edit group + .form-view + sib-form.block( + range-owner=`${sdn}/members/`, + range-members=`${sdn}/members/`, + widget-members='sib-form-multiple-dropdown', + bind-resources + ) diff --git a/src/page-group.pug b/src/page-group.pug index 5af3fa7..9cf778d 100644 --- a/src/page-group.pug +++ b/src/page-group.pug @@ -4,9 +4,9 @@ sib-router#group-router(default-route='group-chat') sib-route(name='group-profile') div Info sib-route(name='group-edit') - div Éditer + div Edit sib-route(name='group-create') - div Nouveau + div Add new #network-views-container #group-chat include page-group-chat.pug diff --git a/src/page-member-chat.pug b/src/page-member-chat.pug index cb5edf3..640bd05 100644 --- a/src/page-member-chat.pug +++ b/src/page-member-chat.pug @@ -1,2 +1,9 @@ -#member-chat.chat-view(bind-resources) - sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources) +#member-chat.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 + ) diff --git a/src/page-member-edit.pug b/src/page-member-edit.pug index 1d4ecc8..0049cf5 100644 --- a/src/page-member-edit.pug +++ b/src/page-member-edit.pug @@ -1,4 +1,30 @@ -// script. +.form-view + label.d-none(for='avatar-input') + img#avatar-preview(src='', style='width: 100%;') + input#avatar-input.d-none( + type='file', + accept='image/*', + name='avatar', + value='', + ) + sib-form.edit-form.block( + data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website', + widget-user='hdapp-usereditinfo', + range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown', + range-skills=`${sdn}/skills/`, + bind-resources + ) + + #crop-modal + .crop-wrapper + img#crop-preview(src='') + .control-bar + button#cancel-img-cropping.btn.btn-link Annuler + i#rotate-img.fa.fa-undo(aria-hidden='true') + button#crop-img.btn.btn-link Valider + + +script. class LDPFormImgUpload extends SIBWidget { get template() { return ` @@ -15,25 +41,6 @@ customElements.define("ldp-form-img-upload", LDPFormImgUpload); widget-avatar="ldp-form-img-upload" -label.d-none(for='avatar-input') - img#avatar-preview(src='', style='width: 100%;') -input#avatar-input.d-none(accept='image/*', name='avatar', value='', type='file') -sib-form.edit-form.block( - data-fields='user, avatar, bio, cell, jabberID, number, pseudo, skills, website', - widget-user='hdapp-usereditinfo', - range-cell=`${sdn}/cells/`, widget-skills='sib-form-multiple-dropdown', - range-skills=`${sdn}/skills/`, - bind-resources -) - -#crop-modal - .crop-wrapper - img#crop-preview(src='') - .control-bar - button#cancel-img-cropping.btn.btn-link Annuler - i#rotate-img.fa.fa-undo(aria-hidden='true') - button#crop-img.btn.btn-link Valider - //-script. // Constant declaration diff --git a/src/page-member.pug b/src/page-member.pug index 410dbd5..77ed6d3 100644 --- a/src/page-member.pug +++ b/src/page-member.pug @@ -3,9 +3,10 @@ sib-router#member-router(default-route='member-chat') sib-route(name='member-chat') div Chat sib-route(name='member-profile') - div Voir - sib-route(name='member-edit') - div Éditer + div Profile + sib-ac-checker(permission='change' bind-resources) + sib-route(name='member-edit') + div Edit #member-views-container sib-trigger(next="members" class="back") Back to directory div diff --git a/src/page-project-chat.pug b/src/page-project-chat.pug index 395fadb..b209ca7 100644 --- a/src/page-project-chat.pug +++ b/src/page-project-chat.pug @@ -1,2 +1,9 @@ #project-chat.chat-view - sib-chat(data-authentication='login', data-auto-login='true', data-bosh-service-url='https://jabber.happy-dev.fr/http-bind/', data-debug='false', data-locales-url='en', bind-resources) + sib-chat( + data-authentication='login', + data-auto-login='true', + data-bosh-service-url=xmpp, + data-debug='false', + data-locales-url='en', + bind-resources + ) diff --git a/src/page-project-create.pug b/src/page-project-create.pug index 0bc1f91..4c0a529 100644 --- a/src/page-project-create.pug +++ b/src/page-project-create.pug @@ -1,7 +1,9 @@ #project-create - sib-form( - data-src=`${sdn}/projects/`, - range-client=`${sdn}/clients/`, - widget-team='sib-form-multiple-dropdown', - range-team=`${sdn}/members/` - ) + h1 New project + .form-view + sib-form.block( + data-src=`${sdn}/projects/`, + range-client=`${sdn}/clients/`, + widget-team='sib-form-multiple-dropdown', + range-team=`${sdn}/members/` + ) diff --git a/src/page-project-edit.pug b/src/page-project-edit.pug index 325ad0b..4567883 100644 --- a/src/page-project-edit.pug +++ b/src/page-project-edit.pug @@ -1,7 +1,13 @@ #project-edit - sib-form.block( - range-client=`${sdn}/clients/`, - widget-team='sib-form-multiple-dropdown', - range-team=`${sdn}/members/`, - bind-resources - ) + h1 Edit project + //- sib-display(data-fields="name" bind-resources)] + .form-view + sib-form.block( + range-client=`${sdn}/clients/`, + range-team=`${sdn}/members/`, + data-fields=`name, number, client, description, team, jabberRoom, foaf:jabberID`, + widget-jabberRoom='sib-form-checkbox', + widget-description='sib-form-textarea', + widget-team='sib-form-multiple-dropdown', + bind-resources + ) diff --git a/src/page-project.pug b/src/page-project.pug index 91f4703..abdef02 100644 --- a/src/page-project.pug +++ b/src/page-project.pug @@ -2,11 +2,11 @@ sib-router#project-router(default-route='project-chat') sib-route(name='project-chat') div Chat sib-route(name='project-profile') - div Voir + div Project sib-route(name='project-edit') - div Éditer + div Edit sib-route(name='project-create') - div Nouveau + div Add new #project-views-container include page-project-chat.pug include page-project-profile.pug diff --git a/src/scripts/index.js b/src/scripts/index.js index a8538cc..0f28643 100644 --- a/src/scripts/index.js +++ b/src/scripts/index.js @@ -15,11 +15,13 @@ document.addEventListener('DOMContentLoaded', function(event) { function resize() { setTimeout(()=> Array.from(document.querySelectorAll('.chat-view')).forEach(elm => { + if(!elm.offsetParent) return; elm.style.setProperty('--pos-top', elm.offsetTop + 'px'); })); } window.addEventListener('resize', resize); window.addEventListener('navigate', resize); + window.addEventListener('popstate', resize); document.addEventListener('load', resize); document.addEventListener('WebComponentsReady', resize); resize(); diff --git a/src/styles/content.scss b/src/styles/content.scss index e3c2ce5..273603e 100644 --- a/src/styles/content.scss +++ b/src/styles/content.scss @@ -4,12 +4,11 @@ > sib-display { display: block; margin: 1em 0; - @extend %shadow; - background-color: $color-white; + @extend %frame; padding: 0.5em 1em; - &:nth-child(odd) { - background-color: $color-white; - } + /*&:nth-child(odd) { + background-color: $color-grey-light; + }*/ sib-display-div[name='title'] { display: block; @extend h2; @@ -53,10 +52,10 @@ sib-display-lookuplist[name='skills'] { .chat-view { padding: 1em; position: relative; - background-color: #fff; - @extend %shadow; - height: calc(100vh - 143px - 5em); - height: calc(100vh - var(--pos-top, 143px) - 5em); + @extend %frame; + height: 400px; + height: calc(100vh - 143px - 3em); + height: calc(100vh - var(--pos-top, 143px) - 3em); > sib-chat { @include pos(); } @@ -87,8 +86,7 @@ sib-display#member-info, #profiles-list > div > sib-display { display: block; position: relative; - background-color: $color-white; - @extend %shadow; + @extend %frame; padding: 1em; cursor: pointer; @@ -163,10 +161,11 @@ sib-display#member-info, } } } - +/* label { @extend h2; &:after { content: ':'; } } +*/ \ No newline at end of file diff --git a/src/styles/form.scss b/src/styles/form.scss index a8beda0..4caa2ea 100644 --- a/src/styles/form.scss +++ b/src/styles/form.scss @@ -1,37 +1,102 @@ //button, checkbox, color, date, datetime-local, email, file, hidden, image, month, number, password, radio, range, reset, search, submit, tel, text, time, url, week, datetime -sib-form.block>form>*{ - display: block; +.form-view{ + @extend %frame } -sib-form{ - form{ - margin: -.5em; - >*{ - margin: .5em; + +sib-form.inline form { + margin: -0.5em; + > * { + margin: 0.5em; + } +} +sib-form.block { + display: block; + padding: 1em; + > form { + > * { + display: block; + margin-top: 2em; + &:first-child { + margin-top: 0; + } + &:not(sib-form-checkbox) { + label { + margin: 0.5em 0; + display: block; + } + input, + textarea { + background-color: $color-grey-light; + 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; + } + } + } + sib-form-multiple-dropdown select { + width: calc(100% - 2.5em); + } + input[type='submit'] { + width: auto; } } +} +sib-form { // text like - 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]){ + 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.5em; border: none; @extend %shadow; } - + // button like button, - input[type=button], - input[type=color], - input[type=file], - input[type=reset], - input[type=submit]{ + input[type='button'], + input[type='color'], + input[type='file'], + input[type='reset'], + input[type='submit'] { padding: 0.5em 1em; border: none; background-color: $color-yellow; border-radius: 100em; } - input[type="reset"]{ + input[type='reset'] { display: none; } -} \ No newline at end of file + + sib-form-multiple-dropdown { + button { + appearance: none; + background-color: $color-white; + color: $color-yellow; + border: 1px solid; + width: 1em; + height: 1em; + line-height: 0; + font-size: 1.5em; + padding: 0; + cursor: pointer; + margin: 0.2em; + vertical-align: middle; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index f88559a..a70bc40 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -4,7 +4,12 @@ display: none !important; } +*,*::before,*::after{ + box-sizing: inherit; +} + html { + box-sizing: border-box; font-family: Open Sans, sans-serif; font-size: 13px; background-color: $color-grey-light; diff --git a/src/styles/members.scss b/src/styles/members.scss index 81fc7a7..9d266db 100644 --- a/src/styles/members.scss +++ b/src/styles/members.scss @@ -25,8 +25,7 @@ } display: block; position: relative; - background-color: $color-white; - @extend %shadow; + @extend %frame; padding: 0.5em; cursor: pointer; @@ -124,9 +123,8 @@ } } #member-info { - background-color: $color-white; padding: 1em; - @extend %shadow; + @extend %frame; } #profiles-list, diff --git a/src/styles/menu.scss b/src/styles/menu.scss index 1e13164..8397b82 100644 --- a/src/styles/menu.scss +++ b/src/styles/menu.scss @@ -50,10 +50,13 @@ text-transform: uppercase; &:before { display: block; + width: 2em; + height: 2em; + line-height: 2em; + padding: 0; margin: -0.5em auto 0; font-size: 2em; border-radius: 100%; - padding: 0.7em; transform: perspective(1000px) translateZ(1px) scale(1); will-change: transform; transition: all 0.3s ease, diff --git a/src/styles/variables.scss b/src/styles/variables.scss index 27002aa..cde2f67 100644 --- a/src/styles/variables.scss +++ b/src/styles/variables.scss @@ -12,7 +12,7 @@ $color-yellow-light: #ffd759; box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.15); } -%cadre { +%frame { @extend %shadow; background-color: $color-white; } diff --git a/www/lib/sib-core b/www/lib/sib-core index 97e4d27..8d61589 160000 --- a/www/lib/sib-core +++ b/www/lib/sib-core @@ -1 +1 @@ -Subproject commit 97e4d2773deb81d28ccbe6c65d82d316bb7ee022 +Subproject commit 8d615893e3f888a573e57ab7a67a41db4cd4c81f