From 670493bd8a029d8e3b6ab75778cb2fd0cb16378a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 28 Aug 2018 14:53:19 +0200 Subject: Dav lib 1 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/ContactDetails.scss | 126 +++++++++++++++++++++++++++++++++++++++++ css/Properties/Properties.scss | 4 ++ css/contacts.scss | 2 +- css/details.scss | 125 ---------------------------------------- 4 files changed, 131 insertions(+), 126 deletions(-) create mode 100644 css/ContactDetails.scss delete mode 100644 css/details.scss (limited to 'css') diff --git a/css/ContactDetails.scss b/css/ContactDetails.scss new file mode 100644 index 00000000..78c453a3 --- /dev/null +++ b/css/ContactDetails.scss @@ -0,0 +1,126 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + +#contact-details { + + // header + header { + height: 100px; + display: flex; + font-weight: bold; + align-items: center; + + // AVATAR + #contact-header-avatar { + position: relative; + height: 75px; + width: 75px; + border-radius: 50%; + overflow: hidden; + flex-shrink: 0; + margin: 0 22px 0 44px; + .contact-avatar-background { + background-color: var(--color-background-dark); + opacity: .2; + z-index: 0; + } + img { + z-index: 1; + } + label.icon-upload-white { + opacity: .5; + z-index: 2; + &:hover, + a:active, + a:focus { + opacity: .7; + } + } + img + label.icon-upload-white { + opacity: 0; + } + .contact-avatar-background, + img, + label.icon-upload-white { + position: absolute; + width: 100%; + height: 100%; + } + } + + // ORG-TITLE-NAME + #contact-header-infos { + display: flex; + flex-direction: column; + flex: 1 1; + h2, + #details-org-container { + display: flex; + margin: 0; + } + input { + font-size: inherit; + color: #fff !important; + text-shadow: 0 0 2px var(--color-box-shadow); + background: transparent; + border: none; + text-overflow: ellipsis; + overflow: hidden; + white-space: nowrap; + max-width: 100%; + margin: 0; + padding: 4px 5px; + flex: 1 1; + &::placeholder { + color: #fff !important; + opacity: .8; + } + } + #contact-org { + max-width: 20%; + min-width: 10vw; + } + } + + // ACTIONS + #contact-header-actions { + position: relative; + .menu-icon { + height: 44px; + width: 44px; + padding: 14px; + cursor: pointer; + } + } + } + + $grid-column-width: 380px; + + // contact details + section.contact-details { + display: grid; + /* unquote is a strange hack to avoid removal of the comma by the scss compiler */ + grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr)); + grid-column-gap: 20px; + padding: 0 20px; + } +} \ No newline at end of file diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss index 30369a80..d7f76afa 100644 --- a/css/Properties/Properties.scss +++ b/css/Properties/Properties.scss @@ -31,6 +31,10 @@ &--last { margin-bottom: $grid-height-unit; } + // no delete icon on addressbook selector + &--addressbooks .icon-delete { + display: none; + } &__delete { position: absolute; diff --git a/css/contacts.scss b/css/contacts.scss index 0d8ed0e6..883b21fd 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -16,6 +16,6 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; @import 'settings'; -@import 'details'; +@import 'ContactDetails'; @import './Properties/Properties'; @import './Properties/PropertyTitle'; \ No newline at end of file diff --git a/css/details.scss b/css/details.scss deleted file mode 100644 index c8c8a31e..00000000 --- a/css/details.scss +++ /dev/null @@ -1,125 +0,0 @@ -/** - * @copyright Copyright (c) 2018 John Molakvoæ - * - * @author John Molakvoæ - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -#contact-details { - - // header - header { - height: 100px; - display: flex; - font-weight: bold; - align-items: center; - - // AVATAR - #contact-header-avatar { - position: relative; - height: 75px; - width: 75px; - border-radius: 50%; - overflow: hidden; - flex-shrink: 0; - margin: 0 22px 0 44px; - .contact-avatar-background { - background-color: var(--color-background-dark); - opacity: .2; - z-index: 0; - } - img { - z-index: 1; - } - label.icon-upload-white { - opacity: .5; - z-index: 2; - &:hover, - a:active, - a:focus { - opacity: .7; - } - } - img + label.icon-upload-white { - opacity: 0; - } - .contact-avatar-background, - img, - label.icon-upload-white { - position: absolute; - width: 100%; - height: 100%; - } - } - - // ORG-TITLE-NAME - #contact-header-infos { - display: flex; - flex-direction: column; - flex: 1 1; - h2, - #details-org-container { - display: flex; - margin: 0; - } - input { - font-size: inherit; - color: #fff !important; - text-shadow: 0 0 2px var(--color-box-shadow); - background: transparent; - border: none; - text-overflow: ellipsis; - overflow: hidden; - white-space: nowrap; - max-width: 100%; - margin: 0; - padding: 4px 5px; - flex: 1 1; - &::placeholder { - color: #fff !important; - opacity: .8; - } - } - #contact-org { - max-width: 20%; - min-width: 10vw; - } - } - - // ACTIONS - #contact-header-actions { - position: relative; - .menu-icon { - height: 44px; - width: 44px; - padding: 14px; - cursor: pointer; - } - } - } - - $grid-column-width: 380px; - - // contact details - section.contact-details { - display: grid; - /* unquote is a strange hack to avoid removal of the comma by the scss compiler */ - grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr)); - grid-column-gap: 20px; - } -} \ No newline at end of file -- cgit v1.2.3 From 54137859d7a0c23135531ce68bfb2ba8d58e29fe Mon Sep 17 00:00:00 2001 From: Jessica Date: Fri, 10 Aug 2018 18:46:01 +0200 Subject: started on styling and commented function formatMatchResults --- css/settings.scss | 7 +++++++ 1 file changed, 7 insertions(+) (limited to 'css') diff --git a/css/settings.scss b/css/settings.scss index c4213248..be72d8f4 100644 --- a/css/settings.scss +++ b/css/settings.scss @@ -101,6 +101,13 @@ display: flex; flex-direction: column; } + .multiselect.multiselect-vue { + width: inherit + } + .multiselect.multiselect-vue .multiselect__content-wrapper { + background: #f0f0f0; + width: fit-content; + } } // Sharees settings for Addressbook -- cgit v1.2.3 From ff5b6384b6cd8a25d304da30dbccc1da8f550ba0 Mon Sep 17 00:00:00 2001 From: Jessica Date: Mon, 13 Aug 2018 18:08:27 +0200 Subject: working version of shareAdressbook, adds sharees to addressbook object --- css/settings.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'css') diff --git a/css/settings.scss b/css/settings.scss index be72d8f4..1c352c52 100644 --- a/css/settings.scss +++ b/css/settings.scss @@ -102,11 +102,11 @@ flex-direction: column; } .multiselect.multiselect-vue { - width: inherit + width: inherit; } .multiselect.multiselect-vue .multiselect__content-wrapper { background: #f0f0f0; - width: fit-content; + width: inherit; } } -- cgit v1.2.3 From 9569af1cad121bfcee756939f1ca33c4c8157108 Mon Sep 17 00:00:00 2001 From: Jessica Date: Tue, 14 Aug 2018 16:32:12 +0200 Subject: refractored and changed comments, fixed bug with search for sharees function --- css/settings.scss | 6 ++++++ 1 file changed, 6 insertions(+) (limited to 'css') diff --git a/css/settings.scss b/css/settings.scss index 1c352c52..74cfa7b8 100644 --- a/css/settings.scss +++ b/css/settings.scss @@ -103,11 +103,17 @@ } .multiselect.multiselect-vue { width: inherit; + .multiselect__tags:focus-within, .multiselect__tags:hover { + border-color: var(--color-primary-element); + } } .multiselect.multiselect-vue .multiselect__content-wrapper { background: #f0f0f0; width: inherit; } + .shareematch--bold { + font-weight: bold; + } } // Sharees settings for Addressbook -- cgit v1.2.3 From ab5177e35a18614ff182026af3998dc18fb62893 Mon Sep 17 00:00:00 2001 From: Jessica Date: Wed, 15 Aug 2018 18:18:35 +0200 Subject: added BEM styling and structuring after meeting --- css/contacts.scss | 3 +- css/contacts.scss.orig | 26 ++++ css/settings-section.scss | 90 +++++++++++ css/settings.scss | 215 -------------------------- css/settings/settings-addressbook-sharee.scss | 46 ++++++ css/settings/settings-addressbook-shares.scss | 56 +++++++ css/settings/settings-addressbook.scss | 31 ++++ 7 files changed, 251 insertions(+), 216 deletions(-) create mode 100644 css/contacts.scss.orig create mode 100644 css/settings-section.scss delete mode 100644 css/settings.scss create mode 100644 css/settings/settings-addressbook-sharee.scss create mode 100644 css/settings/settings-addressbook-shares.scss create mode 100644 css/settings/settings-addressbook.scss (limited to 'css') diff --git a/css/contacts.scss b/css/contacts.scss index 883b21fd..2c116110 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -15,7 +15,8 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; } +@import 'settings-section'; @import 'settings'; @import 'ContactDetails'; @import './Properties/Properties'; -@import './Properties/PropertyTitle'; \ No newline at end of file +@import './Properties/PropertyTitle'; diff --git a/css/contacts.scss.orig b/css/contacts.scss.orig new file mode 100644 index 00000000..da8fbc66 --- /dev/null +++ b/css/contacts.scss.orig @@ -0,0 +1,26 @@ +<<<<<<< HEAD +$grid-height-unit: 40px; +$grid-input-padding: 7px; +$grid-input-margin: 3px; +$grid-column-width: 380px; +$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; + +@mixin generate-grid-span($default-unit) { + // we only supports 10 props of the same type + @for $i from 1 through 10 { + &.grid-span-#{$i} { + // default unit + title + bottom padding + grid-row-start: span #{$i * $default-unit}; + } + } +} + + +@import 'settings'; +@import 'ContactDetails'; +@import './Properties/Properties'; +@import './Properties/PropertyTitle'; +======= +@import 'settings-section'; +@import 'details'; +>>>>>>> added BEM styling and structuring after meeting diff --git a/css/settings-section.scss b/css/settings-section.scss new file mode 100644 index 00000000..a2696d3a --- /dev/null +++ b/css/settings-section.scss @@ -0,0 +1,90 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * author Team Popcorn + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + + +@import 'settings/settings-addressbook'; +@import 'settings/settings-addressbook-shares'; +@import 'settings/settings-addressbook-sharee'; + +// contacts settings section +#app-settings-content { + .settings-section { + display: flex; + align-items: center; + } +} + +#new-addressbook-form { + display: flex; +} + +// Sort Contacts +.sort-contacts { + .multiselect.multiselect-vue { + width: 120px; + margin-left: 5px; + } + input#sort-by, .multiselect__single { + padding: 6px 12px; + min-height: 34px; + text-align: center; + background: url(/core/css/../img/actions/triangle-s.svg) no-repeat right 4px center; + background-color: inherit; + outline: 0; + padding-right: 24px !important; + } +} + +// Import contacts +.import-contact { + display: flex; + flex-direction: column; + .multiselect-label { + width: 100%; + padding: 6px 12px 6px 34px; + margin: 0; + border-radius: var(--border-radius) var(--border-radius) 0 0; + background: url(/core/css/../img/actions/upload.svg) no-repeat left 9px center; + background-color: #f7f7f7; + z-index: 2; + } + .multiselect-vue { + width: 100%; + margin: 0; + } + .multiselect-vue .multiselect__tags { + border: 1px solid var(--color-border-dark); + border-radius: 0 0 var(--border-radius) var(--border-radius); + margin-top: -1px; + } +} + +// Add address book +.new-address-book { + input[type='text'] + .icon-confirm, input[type='password'] + .icon-confirm, input[type='email'] + .icon-confirm { + opacity: 0.5; + } + .new-address-book-input { + border-color: var(--color-border-dark); + } +} diff --git a/css/settings.scss b/css/settings.scss deleted file mode 100644 index 74cfa7b8..00000000 --- a/css/settings.scss +++ /dev/null @@ -1,215 +0,0 @@ -/** - * @copyright Copyright (c) 2018 John Molakvoæ - * - * @author John Molakvoæ - * author Team Popcorn - * - * @license GNU AGPL version 3 or any later version - * - * This program is free software: you can redistribute it and/or modify - * it under the terms of the GNU Affero General Public License as - * published by the Free Software Foundation, either version 3 of the - * License, or (at your option) any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU Affero General Public License for more details. - * - * You should have received a copy of the GNU Affero General Public License - * along with this program. If not, see . - * - */ - -// contacts settings section -#app-settings-content { - .settings-section { - display: flex; - align-items: center; - } -} - -#new-addressbook-form { - display: flex; -} - -// Addressbook lists -.addressbook { - display: flex; - align-items: center; - white-space: nowrap; - text-overflow: ellipsis; - - &__name { - display: block; - flex: 0 1 auto; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - } - &__share, - &__menu .icon-more { - width: 44px; - height: 44px; - opacity: .5; - &:hover, - &:focus, - &:active { - opacity: .7; - } - } - &__share { - margin-left: auto; - } -} - -// Addressbook sharees -.addressbook__shares { - width: 100%; - .dropdown-menu { - border: 1px solid #d1d1d1; - border-radius: 0 0 3px 3px; - max-height: 200px; - margin-top: -2px; - overflow-y: auto; - display: flex; - flex-wrap: wrap; - background-color: #fff; - position: relative; - width: 100%; - z-index: 500; - top: -2px; - left: 0px; - li { - width: 100%; - padding: 8px 9px 9px; - cursor: pointer; - } - li.active { - background: #f0f0f0; - } - } - &__input { - width: 100% !important; - margin-right: 0; - padding-right: 30px; - text-overflow: ellipsis; - } - &__list { - margin-top: 8px; - margin-bottom: 12px; - display: flex; - flex-direction: column; - } - .multiselect.multiselect-vue { - width: inherit; - .multiselect__tags:focus-within, .multiselect__tags:hover { - border-color: var(--color-primary-element); - } - } - .multiselect.multiselect-vue .multiselect__content-wrapper { - background: #f0f0f0; - width: inherit; - } - .shareematch--bold { - font-weight: bold; - } -} - -// Sharees settings for Addressbook -.addressbook__sharee { - padding: 0 5px; - display: inline-flex; - align-items: center; - &__identifier { - width: 100%; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; - display: inline-block; - vertical-align: top; - opacity: 0.5; - } - &__utils { - padding: 0 !important; - float: right; - position: relative !important; - display: inline-flex; - align-items: center; - flex-shrink: 0; - height: 20px; - .checkbox + label { - padding: 0 !important; - } - } - - .icon { - margin-right: 5px; - opacity: 0.2; - width: 16px; - height: 16px; - display: inline-block; - } - - .icon-group { - background-image: url(/apps/contacts/img/group.svg); - } - - .icon-delete { - display: inline-block; - width: 24px; - height: 20px; - opacity: 0.4; - } -} - -// Sort Contacts -.sort-contacts { - .multiselect.multiselect-vue { - width: 120px; - margin-left: 5px; - } - input#sort-by, .multiselect__single { - padding: 6px 12px; - min-height: 34px; - text-align: center; - background: url(/core/css/../img/actions/triangle-s.svg) no-repeat right 4px center; - background-color: inherit; - outline: 0; - padding-right: 24px !important; - } -} - -// Import contacts -.import-contact { - display: flex; - flex-direction: column; - .multiselect-label { - width: 100%; - padding: 6px 12px 6px 34px; - margin: 0; - border-radius: var(--border-radius) var(--border-radius) 0 0; - background: url(/core/css/../img/actions/upload.svg) no-repeat left 9px center; - background-color: #f7f7f7; - z-index: 2; - } - .multiselect-vue { - width: 100%; - margin: 0; - } - .multiselect-vue .multiselect__tags { - border: 1px solid var(--color-border-dark); - border-radius: 0 0 var(--border-radius) var(--border-radius); - margin-top: -1px; - } -} - -// Add address book -.new-address-book { - input[type='text'] + .icon-confirm, input[type='password'] + .icon-confirm, input[type='email'] + .icon-confirm { - opacity: 0.5; - } - .new-address-book-input { - border-color: var(--color-border-dark); - } -} diff --git a/css/settings/settings-addressbook-sharee.scss b/css/settings/settings-addressbook-sharee.scss new file mode 100644 index 00000000..9ea3bd0b --- /dev/null +++ b/css/settings/settings-addressbook-sharee.scss @@ -0,0 +1,46 @@ +.addressbook__sharee { + padding: 0 5px; + display: inline-flex; + align-items: center; + width: 100%; + &__identifier { + width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + display: inline-block; + vertical-align: top; + opacity: 0.5; + } + &__utils { + padding: 0 !important; + float: right; + position: relative !important; + display: inline-flex; + align-items: center; + flex-shrink: 0; + height: 20px; + .checkbox + label { + padding: 0 !important; + } + } + + .icon { + margin-right: 5px; + opacity: 0.2; + width: 16px; + height: 16px; + display: inline-block; + } + + .icon-group { + background-image: url(/apps/contacts/img/group.svg); + } + + .icon-delete { + display: inline-block; + width: 24px; + height: 20px; + opacity: 0.4; + } +} \ No newline at end of file diff --git a/css/settings/settings-addressbook-shares.scss b/css/settings/settings-addressbook-shares.scss new file mode 100644 index 00000000..c8ea519e --- /dev/null +++ b/css/settings/settings-addressbook-shares.scss @@ -0,0 +1,56 @@ +.addressbook-shares { + width: 100%; + .dropdown-menu { + border: 1px solid #d1d1d1; + border-radius: 0 0 3px 3px; + max-height: 200px; + margin-top: -2px; + overflow-y: auto; + display: flex; + flex-wrap: wrap; + background-color: #fff; + position: relative; + width: 100%; + z-index: 500; + top: -2px; + left: 0px; + li { + width: 100%; + padding: 8px 9px 9px; + cursor: pointer; + } + li.active { + background: #f0f0f0; + } + } + &__input { + width: 100% !important; + margin-right: 0; + padding-right: 30px; + text-overflow: ellipsis; + } + &__list { + margin-top: 8px; + margin-bottom: 12px; + display: flex; + flex-direction: column; + } + + .multiselect-vue { + width: inherit; + + .multiselect__tags:focus-within, + .multiselect__tags:hover { + border-color: var(--color-primary-element); + } + + .multiselect__content-wrapper { + background: #f0f0f0; + width: inherit; + } + + &__shareematch--bold { + font-weight: bold; + } + } +} \ No newline at end of file diff --git a/css/settings/settings-addressbook.scss b/css/settings/settings-addressbook.scss new file mode 100644 index 00000000..bda520fa --- /dev/null +++ b/css/settings/settings-addressbook.scss @@ -0,0 +1,31 @@ +// BLOCK +.addressbook { + display: flex; + align-items: center; + white-space: nowrap; + text-overflow: ellipsis; + + &__name { + display: block; + flex: 0 1 auto; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + } + &__share, + &__menu .icon-more { + width: 44px; + height: 44px; + opacity: .5; + &:hover, + &:focus, + &:active { + opacity: .7; + } + } + &__share { + margin-left: auto; + } +} + +// MODIFIER \ No newline at end of file -- cgit v1.2.3 From cad9ce3b813e83e0b4175997829e10704bc9141b Mon Sep 17 00:00:00 2001 From: Jessica Date: Mon, 20 Aug 2018 18:10:07 +0200 Subject: updated scss files to include copyright and only linked in oen file --- css/contacts.scss | 4 +- css/contacts.scss.orig | 26 ------------- css/settings-section.scss | 5 --- css/settings/settings-addressbook-sharee.scss | 23 ++++++++++++ css/settings/settings-addressbook-shares.scss | 54 ++++++++++++--------------- css/settings/settings-addressbook.scss | 28 ++++++++++++-- 6 files changed, 74 insertions(+), 66 deletions(-) delete mode 100644 css/contacts.scss.orig (limited to 'css') diff --git a/css/contacts.scss b/css/contacts.scss index 2c116110..8c5f9ba6 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -16,7 +16,9 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; @import 'settings-section'; -@import 'settings'; +@import 'settings/settings-addressbook'; +@import 'settings/settings-addressbook-shares'; +@import 'settings/settings-addressbook-sharee'; @import 'ContactDetails'; @import './Properties/Properties'; @import './Properties/PropertyTitle'; diff --git a/css/contacts.scss.orig b/css/contacts.scss.orig deleted file mode 100644 index da8fbc66..00000000 --- a/css/contacts.scss.orig +++ /dev/null @@ -1,26 +0,0 @@ -<<<<<<< HEAD -$grid-height-unit: 40px; -$grid-input-padding: 7px; -$grid-input-margin: 3px; -$grid-column-width: 380px; -$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; - -@mixin generate-grid-span($default-unit) { - // we only supports 10 props of the same type - @for $i from 1 through 10 { - &.grid-span-#{$i} { - // default unit + title + bottom padding - grid-row-start: span #{$i * $default-unit}; - } - } -} - - -@import 'settings'; -@import 'ContactDetails'; -@import './Properties/Properties'; -@import './Properties/PropertyTitle'; -======= -@import 'settings-section'; -@import 'details'; ->>>>>>> added BEM styling and structuring after meeting diff --git a/css/settings-section.scss b/css/settings-section.scss index a2696d3a..c0786008 100644 --- a/css/settings-section.scss +++ b/css/settings-section.scss @@ -21,11 +21,6 @@ * */ - -@import 'settings/settings-addressbook'; -@import 'settings/settings-addressbook-shares'; -@import 'settings/settings-addressbook-sharee'; - // contacts settings section #app-settings-content { .settings-section { diff --git a/css/settings/settings-addressbook-sharee.scss b/css/settings/settings-addressbook-sharee.scss index 9ea3bd0b..d11a5b6a 100644 --- a/css/settings/settings-addressbook-sharee.scss +++ b/css/settings/settings-addressbook-sharee.scss @@ -1,3 +1,26 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * author Team Popcorn + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + .addressbook__sharee { padding: 0 5px; display: inline-flex; diff --git a/css/settings/settings-addressbook-shares.scss b/css/settings/settings-addressbook-shares.scss index c8ea519e..365b5b0f 100644 --- a/css/settings/settings-addressbook-shares.scss +++ b/css/settings/settings-addressbook-shares.scss @@ -1,34 +1,28 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * author Team Popcorn + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + .addressbook-shares { width: 100%; - .dropdown-menu { - border: 1px solid #d1d1d1; - border-radius: 0 0 3px 3px; - max-height: 200px; - margin-top: -2px; - overflow-y: auto; - display: flex; - flex-wrap: wrap; - background-color: #fff; - position: relative; - width: 100%; - z-index: 500; - top: -2px; - left: 0px; - li { - width: 100%; - padding: 8px 9px 9px; - cursor: pointer; - } - li.active { - background: #f0f0f0; - } - } - &__input { - width: 100% !important; - margin-right: 0; - padding-right: 30px; - text-overflow: ellipsis; - } &__list { margin-top: 8px; margin-bottom: 12px; @@ -36,7 +30,7 @@ flex-direction: column; } - .multiselect-vue { + .multiselect.multiselect-vue { width: inherit; .multiselect__tags:focus-within, diff --git a/css/settings/settings-addressbook.scss b/css/settings/settings-addressbook.scss index bda520fa..6a72f935 100644 --- a/css/settings/settings-addressbook.scss +++ b/css/settings/settings-addressbook.scss @@ -1,4 +1,26 @@ -// BLOCK +/** + * @copyright Copyright (c) 2018 John Molakvoæ + * + * @author John Molakvoæ + * author Team Popcorn + * + * @license GNU AGPL version 3 or any later version + * + * This program is free software: you can redistribute it and/or modify + * it under the terms of the GNU Affero General Public License as + * published by the Free Software Foundation, either version 3 of the + * License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU Affero General Public License for more details. + * + * You should have received a copy of the GNU Affero General Public License + * along with this program. If not, see . + * + */ + .addressbook { display: flex; align-items: center; @@ -26,6 +48,4 @@ &__share { margin-left: auto; } -} - -// MODIFIER \ No newline at end of file +} \ No newline at end of file -- cgit v1.2.3 From 9583697da750d36bb320fb5545dd3fb00ef3d908 Mon Sep 17 00:00:00 2001 From: Jessica Date: Tue, 21 Aug 2018 15:44:11 +0200 Subject: fixed issue with filter() --- css/contacts.scss | 1 + css/contacts.scss.orig | 27 +++++++++++++++++++++++++++ 2 files changed, 28 insertions(+) create mode 100644 css/contacts.scss.orig (limited to 'css') diff --git a/css/contacts.scss b/css/contacts.scss index 8c5f9ba6..bd4e57f0 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -15,6 +15,7 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; } +@import 'settings'; @import 'settings-section'; @import 'settings/settings-addressbook'; @import 'settings/settings-addressbook-shares'; diff --git a/css/contacts.scss.orig b/css/contacts.scss.orig new file mode 100644 index 00000000..2e0f4e71 --- /dev/null +++ b/css/contacts.scss.orig @@ -0,0 +1,27 @@ +$grid-height-unit: 40px; +$grid-input-padding: 7px; +$grid-input-margin: 3px; +$grid-column-width: 380px; +$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; + +@mixin generate-grid-span($default-unit) { + // we only supports 10 props of the same type + @for $i from 1 through 10 { + &.grid-span-#{$i} { + // default unit + title + bottom padding + grid-row-start: span #{$i * $default-unit}; + } + } +} + +<<<<<<< HEAD + +======= +>>>>>>> fixed issue with filter() +@import 'settings-section'; +@import 'settings/settings-addressbook'; +@import 'settings/settings-addressbook-shares'; +@import 'settings/settings-addressbook-sharee'; +@import 'ContactDetails'; +@import './Properties/Properties'; +@import './Properties/PropertyTitle'; -- cgit v1.2.3 From f0b45a274bcd9209ca8af614f0a23ad1e6f33778 Mon Sep 17 00:00:00 2001 From: Jessica Date: Tue, 21 Aug 2018 17:48:23 +0200 Subject: added styling so multiselect content only shows when input with length more than 0 is given --- css/settings/settings-addressbook-shares.scss | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) (limited to 'css') diff --git a/css/settings/settings-addressbook-shares.scss b/css/settings/settings-addressbook-shares.scss index 365b5b0f..917a87a4 100644 --- a/css/settings/settings-addressbook-shares.scss +++ b/css/settings/settings-addressbook-shares.scss @@ -29,7 +29,9 @@ display: flex; flex-direction: column; } - + &__shareematch--bold { + font-weight: bold; + } .multiselect.multiselect-vue { width: inherit; @@ -39,12 +41,14 @@ } .multiselect__content-wrapper { + display: none; + } + } + .multiselect.showContent { + .multiselect__content-wrapper { + display: inherit; background: #f0f0f0; width: inherit; } - - &__shareematch--bold { - font-weight: bold; - } } } \ No newline at end of file -- cgit v1.2.3 From ea5973c1a58c2dcca8bafd94e6233aac96155e18 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?John=20Molakvo=C3=A6=20=28skjnldsv=29?= Date: Tue, 28 Aug 2018 16:02:43 +0200 Subject: rebase and commit MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: John Molakvoæ (skjnldsv) --- css/contacts.scss | 1 - css/contacts.scss.orig | 27 --------------------------- 2 files changed, 28 deletions(-) delete mode 100644 css/contacts.scss.orig (limited to 'css') diff --git a/css/contacts.scss b/css/contacts.scss index bd4e57f0..8c5f9ba6 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -15,7 +15,6 @@ $grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; } -@import 'settings'; @import 'settings-section'; @import 'settings/settings-addressbook'; @import 'settings/settings-addressbook-shares'; diff --git a/css/contacts.scss.orig b/css/contacts.scss.orig deleted file mode 100644 index 2e0f4e71..00000000 --- a/css/contacts.scss.orig +++ /dev/null @@ -1,27 +0,0 @@ -$grid-height-unit: 40px; -$grid-input-padding: 7px; -$grid-input-margin: 3px; -$grid-column-width: 380px; -$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2}; - -@mixin generate-grid-span($default-unit) { - // we only supports 10 props of the same type - @for $i from 1 through 10 { - &.grid-span-#{$i} { - // default unit + title + bottom padding - grid-row-start: span #{$i * $default-unit}; - } - } -} - -<<<<<<< HEAD - -======= ->>>>>>> fixed issue with filter() -@import 'settings-section'; -@import 'settings/settings-addressbook'; -@import 'settings/settings-addressbook-shares'; -@import 'settings/settings-addressbook-sharee'; -@import 'ContactDetails'; -@import './Properties/Properties'; -@import './Properties/PropertyTitle'; -- cgit v1.2.3