diff options
author | suntala <33031346+suntala@users.noreply.github.com> | 2018-08-31 18:29:32 +0200 |
---|---|---|
committer | suntala <33031346+suntala@users.noreply.github.com> | 2018-08-31 18:29:32 +0200 |
commit | f50a5e62cf5e5ec5219b7215cf19cea12b40eec3 (patch) | |
tree | 49d362bf3d570ca8a195e989d98570dfc931bf9a /css | |
parent | 225b4674a3eb54849a094a15e42f558ed1562643 (diff) | |
parent | 06f4956f5e6f850ac77e20e4bbda4c77858cbadf (diff) |
Merge branch 'vue' into vue-new-addressbook
Diffstat (limited to 'css')
-rw-r--r-- | css/ContactDetails.scss (renamed from css/details.scss) | 65 | ||||
-rw-r--r-- | css/Properties/Properties.scss | 107 | ||||
-rw-r--r-- | css/Properties/PropertyTitle.scss | 33 | ||||
-rw-r--r-- | css/contacts.scss | 50 | ||||
-rw-r--r-- | css/importScreen.scss | 37 | ||||
-rw-r--r-- | css/settings-section.scss (renamed from css/settings.scss) | 119 | ||||
-rw-r--r-- | css/settings/settings-addressbook-sharee.scss | 69 | ||||
-rw-r--r-- | css/settings/settings-addressbook-shares.scss | 54 | ||||
-rw-r--r-- | css/settings/settings-addressbook.scss | 51 |
9 files changed, 401 insertions, 184 deletions
diff --git a/css/details.scss b/css/ContactDetails.scss index b55fe867..78c453a3 100644 --- a/css/details.scss +++ b/css/ContactDetails.scss @@ -113,21 +113,7 @@ } } - $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}; - } - } - } // contact details section.contact-details { @@ -135,55 +121,6 @@ /* 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; - .contact-details-property { - @include generate-grid-span(1); - display: flex; - flex-wrap: wrap; - flex-direction: column; - position: relative; - width: $grid-column-width; - .icon-delete { - position: absolute; - top: 0; - right: 0; - width: 44px; - height: 44px; - border: 0; - background-color: transparent; - opacity: .5; - display: none; - &:hover, - a:active, - a:focus { - opacity: .7; - } - } - &:hover, - a:active, - a:focus { - .icon-delete { - display: block; - } - } - } - .contact-details-label { - margin: $grid-input-margin; - margin-left: 0; - display: inline-block; - width: 100px; - height: $grid-input-height-with-margin; - padding: $grid-input-padding 0; - text-align: right; - opacity: .5; - white-space: nowrap; - overflow: hidden; - overflow-x: hidden; - text-overflow: ellipsis; - vertical-align: middle; - } - .contact-details-property-row { - display: flex; - align-items: center; - } + padding: 0 20px; } }
\ No newline at end of file diff --git a/css/Properties/Properties.scss b/css/Properties/Properties.scss new file mode 100644 index 00000000..d7f76afa --- /dev/null +++ b/css/Properties/Properties.scss @@ -0,0 +1,107 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +.property { + @include generate-grid-span(1); + display: flex; + flex-wrap: wrap; + flex-direction: column; + position: relative; + width: $grid-column-width; + + &--last { + margin-bottom: $grid-height-unit; + } + // no delete icon on addressbook selector + &--addressbooks .icon-delete { + display: none; + } + + &__delete { + position: absolute; + top: 0; + right: 0; + width: $grid-height-unit; + height: $grid-height-unit; + margin: 0; + border: 0; + background-color: transparent; + opacity: .5; + display: none; + &:hover, + a:active, + a:focus { + opacity: .7; + } + } + + &:hover &__delete, + a:active &__delete, + a:focus &__delete { + display: block; + } + + // property row + &__row { + display: flex; + align-items: center; + padding-right: 44px; + height: $grid-height-unit; + position: relative; + } + + // property label or multiselect within row + &__label, + &__label.multiselect { + margin: $grid-input-margin; + margin: $grid-input-margin 5px $grid-input-margin 0; + height: $grid-input-height-with-margin; + padding: $grid-input-padding 0; + width: 120px; + opacity: .7; + user-select: none; + + &, + .multiselect__input::placeholder { + text-align: right; + } + + &:not(.multiselect) { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + overflow-x: hidden; + } + + &.multiselect { + &:hover, + &:focus { + opacity: 1; + } + } + } + + // property value within row, after label + &__value { + flex: 1 1; + } +} diff --git a/css/Properties/PropertyTitle.scss b/css/Properties/PropertyTitle.scss new file mode 100644 index 00000000..4152de6b --- /dev/null +++ b/css/Properties/PropertyTitle.scss @@ -0,0 +1,33 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +.property__title { + display: flex; + align-items: center; + margin: 0; + opacity: 0.6; + user-select: none; + + .property__title--icon { + background-position: center right; + } +}
\ No newline at end of file diff --git a/css/contacts.scss b/css/contacts.scss index d1b2da3e..bfdc8614 100644 --- a/css/contacts.scss +++ b/css/contacts.scss @@ -1,2 +1,48 @@ -@import 'settings'; -@import 'details'; +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Team Popcorn <teampopcornberlin@gmail.com> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +$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-section'; +@import 'settings/settings-addressbook'; +@import 'settings/settings-addressbook-shares'; +@import 'settings/settings-addressbook-sharee'; +@import 'ContactDetails'; +@import './Properties/Properties'; +@import './Properties/PropertyTitle'; +@import 'importScreen';
\ No newline at end of file diff --git a/css/importScreen.scss b/css/importScreen.scss new file mode 100644 index 00000000..c57dca90 --- /dev/null +++ b/css/importScreen.scss @@ -0,0 +1,37 @@ +/** + * @copyright Copyright (c) 2018 Team Popcorn <teampopcornberlin@gmail.com> + * + * author Team Popcorn <teampopcornberlin@gmail.com> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +.import-screen { + &__header { + padding-top: 20px; + } + &__progress { + width: 50%; + position: absolute; + left: 25%; + } + &__tracker { + padding-top: 10px; + position: absolute; + left: 25%; + } +}
\ No newline at end of file diff --git a/css/settings.scss b/css/settings-section.scss index 7ad980b2..568fd999 100644 --- a/css/settings.scss +++ b/css/settings-section.scss @@ -2,7 +2,7 @@ * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> * * @author John Molakvoæ <skjnldsv@protonmail.com> - * author Team Popcorn <teampopcornberlin@gmail.com> + * @author Team Popcorn <teampopcornberlin@gmail.com> * * @license GNU AGPL version 3 or any later version * @@ -33,123 +33,6 @@ 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; - } -} - -// 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 { diff --git a/css/settings/settings-addressbook-sharee.scss b/css/settings/settings-addressbook-sharee.scss new file mode 100644 index 00000000..878dfa13 --- /dev/null +++ b/css/settings/settings-addressbook-sharee.scss @@ -0,0 +1,69 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Team Popcorn <teampopcornberlin@gmail.com> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +.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..33b67410 --- /dev/null +++ b/css/settings/settings-addressbook-shares.scss @@ -0,0 +1,54 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Team Popcorn <teampopcornberlin@gmail.com> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +.addressbook-shares { + width: 100%; + &__list { + margin-top: 8px; + margin-bottom: 12px; + display: flex; + flex-direction: column; + } + &__shareematch--bold { + font-weight: bold; + } + .multiselect.multiselect-vue { + width: inherit; + + .multiselect__tags:focus-within, + .multiselect__tags:hover { + border-color: var(--color-primary-element); + } + + .multiselect__content-wrapper { + display: none; + } + } + .multiselect.showContent { + .multiselect__content-wrapper { + display: inherit; + background: #f0f0f0; + width: inherit; + } + } +}
\ 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..b5d779c0 --- /dev/null +++ b/css/settings/settings-addressbook.scss @@ -0,0 +1,51 @@ +/** + * @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com> + * + * @author John Molakvoæ <skjnldsv@protonmail.com> + * @author Team Popcorn <teampopcornberlin@gmail.com> + * + * @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 <http://www.gnu.org/licenses/>. + * + */ + +.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; + } +}
\ No newline at end of file |