From e61ba95cf750e50271bfef28684218ad041bb5cf Mon Sep 17 00:00:00 2001 From: Nithin David Thomas Date: Sun, 16 Feb 2020 15:46:26 +0530 Subject: [PATCH] Feature: Add/Edit conversation labels (#488) Co-authored-by: Pranav Raj S --- .scss-lint.yml | 274 ++++++++++++++++++ Gemfile | 3 +- Gemfile.lock | 8 + app/javascript/dashboard/api/conversations.js | 4 +- .../dashboard/api/specs/conversations.spec.js | 2 +- .../assets/scss/_foundation-settings.scss | 146 ++++------ .../dashboard/assets/scss/_mixins.scss | 98 ++++--- .../dashboard/assets/scss/_variables.scss | 13 + .../assets/scss/plugins/_multiselect.scss | 129 +++++++-- .../assets/scss/widgets/_buttons.scss | 11 +- .../assets/scss/widgets/_conv-header.scss | 4 +- .../scss/widgets/_conversation-card.scss | 56 ++-- .../scss/widgets/_conversation-view.scss | 7 +- .../assets/scss/widgets/_reply-box.scss | 84 +++--- .../dashboard/assets/scss/widgets/_tabs.scss | 1 + .../dashboard/components/widgets/Avatar.vue | 7 +- .../components/widgets/Thumbnail.vue | 2 +- .../conversation/ConversationHeader.vue | 6 +- .../dashboard/i18n/locale/en/contact.json | 8 +- .../i18n/locale/en/conversation.json | 5 +- .../conversation/ContactConversations.vue | 19 +- .../conversation/ContactDetailsItem.vue | 14 +- .../dashboard/conversation/ContactPanel.vue | 25 +- .../conversation/ConversationLabels.vue | 151 ++++++++-- .../store/modules/conversationLabels.js | 26 ++ .../specs/conversationLabels/actions.spec.js | 42 +++ app/javascript/shared/components/Spinner.vue | 27 +- .../widget/assets/scss/_mixins.scss | 2 +- app/javascript/widget/assets/scss/sdk.js | 8 +- .../widget/components/GroupedAvatars.vue | 1 - package.json | 3 + 31 files changed, 863 insertions(+), 323 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index 215e9c49e..0abfd32a6 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -1,7 +1,281 @@ +# Default application configuration that all configurations inherit from. + +scss_files: '**/*.scss' +plugin_directories: ['.scss-linters'] + +# List of gem names to load custom linters from (make sure they are already +# installed) +plugin_gems: [] + +# Default severity of all linters. +severity: warning + linters: + BangFormat: + enabled: true + space_before_bang: true + space_after_bang: false + + BemDepth: + enabled: false + max_elements: 1 + + BorderZero: + enabled: true + convention: zero # or `none` + + ChainedClasses: + enabled: false + + ColorKeyword: + enabled: true + + ColorVariable: + enabled: true + + Comment: + enabled: true + style: silent + + DebugStatement: + enabled: true + + DeclarationOrder: + enabled: true + + DisableLinterReason: + enabled: false + + DuplicateProperty: + enabled: true + + ElsePlacement: + enabled: true + style: same_line # or 'new_line' + + EmptyLineBetweenBlocks: + enabled: true + ignore_single_line_blocks: true + + EmptyRule: + enabled: true + + ExtendDirective: + enabled: false + + FinalNewline: + enabled: true + present: true + + HexLength: + enabled: true + style: short # or 'long' + + HexNotation: + enabled: true + style: lowercase # or 'uppercase' + + HexValidation: + enabled: true + + IdSelector: + enabled: true + + ImportantRule: + enabled: true + + ImportPath: + enabled: true + leading_underscore: false + filename_extension: false + + Indentation: + enabled: true + allow_non_nested_indentation: false + character: space # or 'tab' + width: 2 + LeadingZero: enabled: false + MergeableSelector: + enabled: true + force_nesting: true + + NameFormat: + enabled: true + allow_leading_underscore: true + convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern + + NestingDepth: + enabled: true + max_depth: 6 + ignore_parent_selectors: false + + PlaceholderInExtend: + enabled: true + + PrivateNamingConvention: + enabled: false + prefix: _ + + PropertyCount: + enabled: false + include_nested: false + max_properties: 10 + + PropertySortOrder: + enabled: true + ignore_unspecified: false + min_properties: 2 + separate_groups: false + + PropertySpelling: + enabled: true + extra_properties: [] + disabled_properties: [] + + PropertyUnits: + enabled: true + global: [ + 'ch', + 'em', + 'ex', + 'rem', # Font-relative lengths + 'cm', + 'in', + 'mm', + 'pc', + 'pt', + 'px', + 'q', # Absolute lengths + 'vh', + 'vw', + 'vmin', + 'vmax', # Viewport-percentage lengths + 'fr', # Grid fractional lengths + 'deg', + 'grad', + 'rad', + 'turn', # Angle + 'ms', + 's', # Duration + 'Hz', + 'kHz', # Frequency + 'dpi', + 'dpcm', + 'dppx', # Resolution + '%', + ] # Other + properties: {} + + PseudoElement: + enabled: true + + QualifyingElement: + enabled: true + allow_element_with_attribute: false + allow_element_with_class: false + allow_element_with_id: false + + SelectorDepth: + enabled: true + max_depth: 5 + + SelectorFormat: + enabled: false + + Shorthand: + enabled: true + allowed_shorthands: [1, 2, 3, 4] + + SingleLinePerProperty: + enabled: true + allow_single_line_rule_sets: true + + SingleLinePerSelector: + enabled: true + + SpaceAfterComma: + enabled: true + style: one_space # or 'no_space', or 'at_least_one_space' + + SpaceAfterComment: + enabled: false + style: one_space # or 'no_space', or 'at_least_one_space' + allow_empty_comments: true + + SpaceAfterPropertyColon: + enabled: true + style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned' + + SpaceAfterPropertyName: + enabled: true + + SpaceAfterVariableColon: + enabled: false + style: one_space # or 'no_space', 'at_least_one_space' or 'one_space_or_newline' + + SpaceAfterVariableName: + enabled: true + + SpaceAroundOperator: + enabled: true + style: one_space # or 'at_least_one_space', or 'no_space' + + SpaceBeforeBrace: + enabled: true + style: space # or 'new_line' + allow_single_line_padding: false + + SpaceBetweenParens: + enabled: true + spaces: 0 + + StringQuotes: + enabled: true + style: single_quotes # or double_quotes + + TrailingSemicolon: + enabled: true + + TrailingWhitespace: + enabled: true + + TrailingZero: + enabled: false + + TransitionAll: + enabled: false + + UnnecessaryMantissa: + enabled: true + + UnnecessaryParentReference: + enabled: true + + UrlFormat: + enabled: true + + UrlQuotes: + enabled: true + + VariableForProperty: + enabled: false + properties: [] + + VendorPrefix: + enabled: true + identifier_list: base + additional_identifiers: [] + excluded_identifiers: [] + + ZeroUnit: + enabled: true + + Compass::*: + enabled: false + exclude: - 'app/javascript/widget/assets/scss/_reset.scss' - 'app/javascript/widget/assets/scss/sdk.css' diff --git a/Gemfile b/Gemfile index ba142bf92..92f747d44 100644 --- a/Gemfile +++ b/Gemfile @@ -87,6 +87,7 @@ group :development do end group :development, :test do + # locking until https://github.com/codeclimate/test-reporter/issues/418 is resolved gem 'action-cable-testing' gem 'bundle-audit', require: false gem 'byebug', platform: :mri @@ -100,9 +101,9 @@ group :development, :test do gem 'rubocop-performance', require: false gem 'rubocop-rails', require: false gem 'rubocop-rspec', require: false + gem 'scss_lint', require: false gem 'seed_dump' gem 'shoulda-matchers' - # locking until https://github.com/codeclimate/test-reporter/issues/418 is resolved gem 'simplecov', '0.17.1', require: false gem 'spring' gem 'spring-watcher-listen' diff --git a/Gemfile.lock b/Gemfile.lock index 961eb0e50..9d33a59a6 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -393,8 +393,15 @@ GEM rubocop-rspec (1.37.1) rubocop (>= 0.68.1) ruby-progressbar (1.10.1) + sass (3.7.4) + sass-listen (~> 4.0.0) + sass-listen (4.0.0) + rb-fsevent (~> 0.9, >= 0.9.4) + rb-inotify (~> 0.9, >= 0.9.7) scout_apm (2.6.6) parser + scss_lint (0.59.0) + sass (~> 3.5, >= 3.5.5) seed_dump (3.3.1) activerecord (>= 4) activesupport (>= 4) @@ -539,6 +546,7 @@ DEPENDENCIES rubocop-rails rubocop-rspec scout_apm + scss_lint seed_dump sentry-raven shoulda-matchers diff --git a/app/javascript/dashboard/api/conversations.js b/app/javascript/dashboard/api/conversations.js index 02d312388..fd36f8db3 100644 --- a/app/javascript/dashboard/api/conversations.js +++ b/app/javascript/dashboard/api/conversations.js @@ -10,8 +10,8 @@ class ConversationApi extends ApiClient { return axios.get(`${this.url}/${conversationID}/labels`); } - createLabels(conversationID) { - return axios.get(`${this.url}/${conversationID}/labels`); + updateLabels(conversationID, labels) { + return axios.post(`${this.url}/${conversationID}/labels`, { labels }); } } diff --git a/app/javascript/dashboard/api/specs/conversations.spec.js b/app/javascript/dashboard/api/specs/conversations.spec.js index 71cebae3a..2ac815459 100644 --- a/app/javascript/dashboard/api/specs/conversations.spec.js +++ b/app/javascript/dashboard/api/specs/conversations.spec.js @@ -10,6 +10,6 @@ describe('#ConversationApi', () => { expect(conversations).toHaveProperty('update'); expect(conversations).toHaveProperty('delete'); expect(conversations).toHaveProperty('getLabels'); - expect(conversations).toHaveProperty('createLabels'); + expect(conversations).toHaveProperty('updateLabels'); }); }); diff --git a/app/javascript/dashboard/assets/scss/_foundation-settings.scss b/app/javascript/dashboard/assets/scss/_foundation-settings.scss index 769232229..4779db720 100644 --- a/app/javascript/dashboard/assets/scss/_foundation-settings.scss +++ b/app/javascript/dashboard/assets/scss/_foundation-settings.scss @@ -41,29 +41,34 @@ // 36. Tooltip // 37. Top Bar -@import "~foundation-sites/scss/util/util"; +@import '~foundation-sites/scss/util/util'; // 1. Global // --------- $global-font-size: 10px; $global-width: 100%; $global-lineheight: 1.5; -$foundation-palette: ( - primary: $color-woot, +$foundation-palette: (primary: $color-woot, secondary: #777, success: #13ce66, warning: #ffc82c, - alert: #ff4949 -); + alert: #ff4949); $light-gray: #c0ccda; $medium-gray: #8492a6; $dark-gray: $color-gray; -$black: #000000; +$black: #000; $white: #fff; $body-background: $white; $body-font-color: $color-body; -$body-font-family: 'Inter', -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", - Roboto, "Helvetica Neue", Arial, sans-serif; +$body-font-family: 'Inter', +-apple-system, +system-ui, +BlinkMacSystemFont, +"Segoe UI", +Roboto, +"Helvetica Neue", +Arial, +sans-serif; $body-antialiased: true; $global-margin: $space-one; $global-padding: $space-one; @@ -79,13 +84,11 @@ $print-transparent-backgrounds: true; // 2. Breakpoints // -------------- -$breakpoints: ( - small: 0, +$breakpoints: (small: 0, medium: 640px, large: 1024px, xlarge: 1200px, - xxlarge: 1440px -); + xxlarge: 1440px); $print-breakpoint: large; $breakpoint-classes: (small medium large); @@ -94,10 +97,8 @@ $breakpoint-classes: (small medium large); $grid-row-width: $global-width; $grid-column-count: 12; -$grid-column-gutter: ( - small: $zero, - medium: $zero -); +$grid-column-gutter: (small: $zero, + medium: $zero); $grid-column-align-edge: true; $block-grid-max: 8; @@ -105,54 +106,24 @@ $block-grid-max: 8; // ------------------ $header-font-family: $body-font-family; -$header-font-weight: $global-weight-normal; +$header-font-weight: $font-weight-medium; $header-font-style: normal; $font-family-monospace: $body-font-family; $header-color: $color-heading; $header-lineheight: 1.4; $header-margin-bottom: 0.5rem; -$header-styles: ( - small: ( - "h1": ( - "font-size": 24 - ), - "h2": ( - "font-size": 20 - ), - "h3": ( - "font-size": 19 - ), - "h4": ( - "font-size": 18 - ), - "h5": ( - "font-size": 17 - ), - "h6": ( - "font-size": 16 - ) - ), - medium: ( - "h1": ( - "font-size": 48 - ), - "h2": ( - "font-size": 40 - ), - "h3": ( - "font-size": 31 - ), - "h4": ( - "font-size": 25 - ), - "h5": ( - "font-size": 20 - ), - "h6": ( - "font-size": 16 - ) - ) -); +$header-styles: (small: ("h1": ("font-size": 24), + "h2": ("font-size": 20), + "h3": ("font-size": 19), + "h4": ("font-size": 18), + "h5": ("font-size": 17), + "h6": ("font-size": 16)), + medium: ("h1": ("font-size": 48), + "h2": ("font-size": 40), + "h3": ("font-size": 31), + "h4": ("font-size": 25), + "h5": ("font-size": 20), + "h6": ("font-size": 16))); $header-text-rendering: optimizeLegibility; $small-font-size: 80%; $header-small-font-color: $medium-gray; @@ -186,7 +157,7 @@ $blockquote-padding: rem-calc(9 20 0 19); $blockquote-border: 1px solid $medium-gray; $cite-font-size: rem-calc(13); $cite-color: $dark-gray; -$cite-pseudo-content: "\2014 \0020"; +$cite-pseudo-content: '\2014 \0020'; $keystroke-font: $font-family-monospace; $keystroke-color: $black; $keystroke-background: $light-gray; @@ -272,24 +243,23 @@ $button-background-hover: scale-color($button-background, $lightness: -15%); $button-color: $white; $button-color-alt: $white; $button-radius: $global-radius; -$button-sizes: ( - tiny: $font-size-micro, +$button-sizes: (tiny: $font-size-micro, small: $font-size-mini, default: $font-size-default, - large: $font-size-large -); + large: $font-size-large); $button-palette: $foundation-palette; $button-opacity-disabled: 0.25; $button-background-hover-lightness: -20%; $button-hollow-hover-lightness: -50%; -$button-transition: background-color 0.25s ease-out, color 0.25s ease-out; +$button-transition: background-color 0.25s ease-out, +color 0.25s ease-out; // 12. Button Group // ---------------- $buttongroup-margin: 1rem; $buttongroup-spacing: 1px; -$buttongroup-child-selector: ".button"; +$buttongroup-child-selector: '.button'; $buttongroup-expand-max: 6; $buttongroup-radius-on-each: true; @@ -322,18 +292,12 @@ $card-margin: $global-margin; // ---------------- $closebutton-position: right top; -$closebutton-offset-horizontal: ( - small: 0.66rem, - medium: 1rem -); -$closebutton-offset-vertical: ( - small: 0.33em, - medium: 0.5rem -); -$closebutton-size: ( - small: 1.5em, - medium: 2em -); +$closebutton-offset-horizontal: (small: 0.66rem, + medium: 1rem); +$closebutton-offset-vertical: (small: 0.33em, + medium: 0.5rem); +$closebutton-size: (small: 1.5em, + medium: 2em); $closebutton-lineheight: 1; $closebutton-color: $dark-gray; $closebutton-color-hover: $black; @@ -356,11 +320,9 @@ $dropdown-border: 1px solid $medium-gray; $dropdown-font-size: 1rem; $dropdown-width: 300px; $dropdown-radius: $global-radius; -$dropdown-sizes: ( - tiny: 100px, +$dropdown-sizes: (tiny: 100px, small: 200px, - large: 400px -); + large: 400px); // 18. Dropdown Menu // ----------------- @@ -455,12 +417,10 @@ $meter-fill-bad: $alert-color; // 24. Off-canvas // -------------- -$offcanvas-sizes: ( - small: 23rem, +$offcanvas-sizes: (small: 23rem, medium: 23rem, ); -$offcanvas-vertical-sizes: ( - small: 23rem, +$offcanvas-vertical-sizes: (small: 23rem, medium: 23rem, ); $offcanvas-background: $light-gray; @@ -472,7 +432,7 @@ $offcanvas-transition-length: 0.5s; $offcanvas-transition-timing: ease; $offcanvas-fixed-reveal: true; $offcanvas-exit-background: rgba($white, 0.25); -$maincontent-class: "off-canvas-content"; +$maincontent-class: 'off-canvas-content'; // 25. Orbit // --------- @@ -520,10 +480,8 @@ $progress-radius: $global-radius; // -------------------- $responsive-embed-margin-bottom: rem-calc(16); -$responsive-embed-ratios: ( - default: 4 by 3, - widescreen: 16 by 9 -); +$responsive-embed-ratios: (default: 4 by 3, + widescreen: 16 by 9); // 29. Reveal // ---------- @@ -576,10 +534,8 @@ $table-border: 1px solid transparent; $table-padding: rem-calc(8 10 10); $table-hover-scale: 2%; $table-row-hover: darken($table-background, $table-hover-scale); -$table-row-stripe-hover: darken( - $table-background, - $table-color-scale + $table-hover-scale -); +$table-row-stripe-hover: darken($table-background, + $table-color-scale + $table-hover-scale); $table-is-striped: false; $table-striped-background: smart-scale($table-background, $table-color-scale); $table-stripe: even; diff --git a/app/javascript/dashboard/assets/scss/_mixins.scss b/app/javascript/dashboard/assets/scss/_mixins.scss index c0cf98494..953ab11a4 100644 --- a/app/javascript/dashboard/assets/scss/_mixins.scss +++ b/app/javascript/dashboard/assets/scss/_mixins.scss @@ -1,3 +1,8 @@ +@import '~widget/assets/scss/mixins'; + +$elegant-shadow-color: rgba(49, 49, 93, 0.15); +$spinner-before-border-color: rgba(255, 255, 255, 0.7); + //borders @mixin border-nil() { border-color: transparent; @@ -77,8 +82,8 @@ &:active, &:hover, &:focus { - box-shadow: none; border-color: transparent; + box-shadow: none; } } @@ -117,7 +122,6 @@ // full height @mixin full-height() { height: 100%; - // COmmenting because unneccessary scroll is apprearing on some pages eg: settings/agents / inboxes } @mixin round-corner() { @@ -139,7 +143,7 @@ } @mixin elegent-shadow() { - box-shadow: 0 10px 25px 0 rgba(49,49,93,0.15); + box-shadow: 0 10px 25px 0 $elegant-shadow-color; } @mixin elegant-card() { @@ -154,20 +158,20 @@ } } - &:before { - content: ''; + &::before { + animation: spinner .9s linear infinite; + border: 2px solid $spinner-before-border-color; + border-radius: 50%; + border-top-color: lighten($color-woot, 10%); box-sizing: border-box; + content: ''; + height: $space-medium; + left: 50%; + margin-left: -$space-one; + margin-top: -$space-one; position: absolute; top: 50%; - left: 50%; width: $space-medium; - height: $space-medium; - margin-top: -$space-one; - margin-left: -$space-one; - border-radius: 50%; - border: 2px solid rgba(255, 255, 255, 0.7); - border-top-color: lighten($color-woot, 10%); - animation: spinner .9s linear infinite; } } @@ -181,41 +185,41 @@ // .element{ // @include arrow(top, #000, 50px); // } -@mixin arrow($direction, $color, $size){ - display: block; - height: 0; - width: 0; - content: ''; +@mixin arrow($direction, $color, $size) { + display: block; + height: 0; + width: 0; + content: ''; - @if $direction == 'top' { - border-left: $size solid transparent; - border-right: $size solid transparent; - border-bottom: $size solid $color; - } @else if $direction == 'right' { - border-top: $size solid transparent; - border-bottom: $size solid transparent; - border-left: $size solid $color; - } @else if $direction == 'bottom' { - border-top: $size solid $color; - border-right: $size solid transparent; - border-left: $size solid transparent; - } @else if $direction == 'left' { - border-top: $size solid transparent; - border-right: $size solid $color; - border-bottom: $size solid transparent; - } @else if $direction == 'top-left' { - border-top: $size solid $color; - border-right: $size solid transparent; - } @else if $direction == 'top-right' { - border-top: $size solid $color; - border-left: $size solid transparent; - } @else if $direction == 'bottom-left' { - border-bottom: $size solid $color; - border-right: $size solid transparent; - } @else if $direction == 'bottom-right' { - border-bottom: $size solid $color; - border-left: $size solid transparent; - } + @if $direction == 'top' { + border-bottom: $size solid $color; + border-left: $size solid transparent; + border-right: $size solid transparent; + } @else if $direction == 'right' { + border-bottom: $size solid transparent; + border-left: $size solid $color; + border-top: $size solid transparent; + } @else if $direction == 'bottom' { + border-left: $size solid transparent; + border-right: $size solid transparent; + border-top: $size solid $color; + } @else if $direction == 'left' { + border-bottom: $size solid transparent; + border-right: $size solid $color; + border-top: $size solid transparent; + } @else if $direction == 'top-left' { + border-right: $size solid transparent; + border-top: $size solid $color; + } @else if $direction == 'top-right' { + border-left: $size solid transparent; + border-top: $size solid $color; + } @else if $direction == 'bottom-left' { + border-bottom: $size solid $color; + border-right: $size solid transparent; + } @else if $direction == 'bottom-right' { + border-bottom: $size solid $color; + border-left: $size solid transparent; + } } @mixin text-ellipsis { diff --git a/app/javascript/dashboard/assets/scss/_variables.scss b/app/javascript/dashboard/assets/scss/_variables.scss index c9b53d05b..b88cd7c9f 100644 --- a/app/javascript/dashboard/assets/scss/_variables.scss +++ b/app/javascript/dashboard/assets/scss/_variables.scss @@ -53,6 +53,16 @@ $color-body: #3C4858; $color-heading: #1F2D3D; $color-extra-light-blue: #F5F7F9; +$primary-color: $color-woot; +$secondary-color: #ff5216; +$success-color: #13ce66; +$warning-color: #ffc82c; +$alert-color: #ff4949; + +// Color-palettes + +$color-primary-dark: darken($color-woot, 20%); + // Thumbnail $thumbnail-radius: 4rem; @@ -81,3 +91,6 @@ $swift-ease-out: all $swift-ease-out-duration $swift-ease-out-timing-function !d // Ionicons $ionicons-font-path: '~ionicons/fonts'; + +// Transitions +$transition-ease-in: all 0.250s ease-in; diff --git a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss index 5318e3447..1dd7ac248 100644 --- a/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss +++ b/app/javascript/dashboard/assets/scss/plugins/_multiselect.scss @@ -1,32 +1,24 @@ +@mixin label-multiselect-hover { + &::after { + color: $color-primary-dark; + } + + &:hover { + background: $color-background; + + &::after { + color: $color-woot; + } + } +} + .multiselect { margin-bottom: $space-normal; min-height: 38px; - > .multiselect__tags { - @include margin(0); - border: 1px solid $color-border; - min-height: 44px; - padding-top: $zero; - - .multiselect__placeholder { - padding-top: $space-small; - } - - .multiselect__tag { - margin-top: $space-one; - } - - .multiselect__input { - @include ghost-input; - @include padding($zero); - - margin-bottom: $zero; - } - - .multiselect__single { - @include padding($space-one); - - margin-bottom: 0; + &.multiselect--active { + >.multiselect__tags { + border-color: $color-woot; } } @@ -41,4 +33,91 @@ top: 60%; } } + + .multiselect__content .multiselect__option { + font-size: $font-size-small; + font-weight: $font-weight-normal; + + &.multiselect__option--highlight { + font-weight: $font-weight-medium; + } + } +} + +.multiselect>.multiselect__tags { + @include margin(0); + border: 1px solid $color-border; + min-height: 44px; + padding-top: $zero; + + .multiselect__tags-wrap { + display: inline-block; + line-height: 1; + margin-top: $space-smaller; + } + + .multiselect__placeholder { + padding-top: $space-small; + } + + .multiselect__tag { + $vertical-space: $space-smaller + $space-micro; + background: $color-background; + color: $color-heading; + margin-top: $space-smaller; + padding: $vertical-space $space-medium $vertical-space $space-one; + } + + .multiselect__tag-icon { + @include label-multiselect-hover; + line-height: $space-medium + $space-micro; + } + + .multiselect__input { + @include ghost-input; + @include padding($zero); + font-size: $font-size-small; + + margin-bottom: $zero; + } + + .multiselect__single { + @include padding($space-one); + + margin-bottom: 0; + } +} + +.sidebar-labels-wrap { + + &.has-edited, + &:hover { + .multiselect { + cursor: pointer; + } + + .multiselect>.multiselect__tags { + border-color: $color-border; + } + + .multiselect>.multiselect__select { + visibility: visible; + } + } + + .multiselect { + margin-top: $space-small; + + >.multiselect__select { + visibility: hidden; + } + + >.multiselect__tags { + border-color: transparent; + } + + &.multiselect--active>.multiselect__tags { + border-color: $color-woot; + } + } } diff --git a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss index d60ac27f9..5d3486aec 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_buttons.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_buttons.scss @@ -24,9 +24,18 @@ } } - > .icon { + >.icon { font-size: $font-size-default; } + + &.tiny { + font-size: $font-size-mini; + padding: $space-small $space-slab; + } + + &.round { + border-radius: $space-larger; + } } .button--fixed-right-top { diff --git a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss index 004a8236e..f4a037886 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conv-header.scss @@ -5,6 +5,7 @@ @include flex; @include flex-align($x: justify, $y: middle); @include border-normal-bottom; + // Resolve Button .button { @include margin(0); @@ -44,6 +45,7 @@ .user--name { @include margin(0); font-size: $font-size-medium; + text-transform: capitalize; } .user--profile__meta { @@ -64,7 +66,7 @@ } .button.resolve--button { - > .icon { + >.icon { padding-right: $space-small; font-size: $font-size-default; } diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss index a4f632085..e16841d38 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-card.scss @@ -2,8 +2,8 @@ @include flex; @include flex-shrink; @include padding($space-normal $zero $zero $space-normal); - position: relative; cursor: pointer; + position: relative; &.active { background: $color-background; @@ -18,63 +18,63 @@ .conversation--user { font-size: $font-size-small; margin-bottom: $zero; + text-transform: capitalize; .label { - position: relative; - top: $space-micro; left: $space-micro; max-width: $space-jumbo; overflow: hidden; + position: relative; text-overflow: ellipsis; + top: $space-micro; white-space: nowrap; } } .conversation--message { - height: $space-medium; - margin: $zero; - font-size: $font-size-small; - line-height: $space-medium; - font-weight: $font-weight-light; - text-overflow: ellipsis; - overflow: hidden; color: $color-body; - width: 27rem; - white-space: nowrap; + font-size: $font-size-small; + font-weight: $font-weight-light; + height: $space-medium; + line-height: $space-medium; + margin: $zero; max-width: 96%; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + width: 27rem; } .conversation--meta { + @include flex; display: block; + flex-direction: column; position: absolute; right: $space-normal; top: $space-normal; - @include flex; - flex-direction: column; .unread { $unread-size: $space-two - $space-micro; - display: none; - height: $unread-size; - min-width: $unread-size; - background: darken($success-color, 3%); - text-align: center; - padding: 0 $space-smaller; - line-height: $unread-size; - color: $color-white; - font-weight: $font-weight-medium; - font-size: $font-size-mini; - margin-left: auto; @include round-corner; + background: darken($success-color, 3%); + color: $color-white; + display: none; + font-size: $font-size-mini; + font-weight: $font-weight-medium; + height: $unread-size; + line-height: $unread-size; + margin-left: auto; margin-top: $space-smaller; + min-width: $unread-size; + padding: 0 $space-smaller; + text-align: center; } .timestamp { - font-size: $font-size-mini; color: $dark-gray; - line-height: $space-normal; - font-weight: $font-weight-normal; font-size: $font-size-micro; + font-weight: $font-weight-normal; + line-height: $space-normal; margin-left: auto; } } diff --git a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss index 5e5cd87fa..bc54330ce 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_conversation-view.scss @@ -47,16 +47,19 @@ @include background-gray; @include margin(0); @include border-normal-left; + .current-chat { @include flex; @include full-height; flex-direction: column; @include flex-align(center, middle); + div { @include flex; @include full-height; flex-direction: column; @include flex-align(center, middle); + img { @include margin($space-normal); width: 10rem; @@ -87,7 +90,7 @@ height: 100%; overflow-y: scroll; - > li { + >li { @include flex; @include flex-shrink; @include margin($zero $zero $space-smaller); @@ -147,7 +150,7 @@ @include flex-align(right, null); .wrap { - margin-right: $space-small; + margin-right: $space-normal; text-align: right; } diff --git a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss index 9330bce24..11350ceaf 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_reply-box.scss @@ -1,10 +1,10 @@ .reply-box { + @include elegant-card; + border-bottom: 0; margin: $space-normal; margin-top: 0; - border-bottom: 0; - @include elegant-card; - transition: height 2s $ease-in-out-cubic; max-height: $space-jumbo * 2; + transition: height 2s $ease-in-out-cubic; .reply-box__top { @include flex; @@ -12,26 +12,25 @@ @include padding($space-one $space-normal); @include background-white; @include margin(0); - position: relative; border-top-left-radius: $space-small; border-top-right-radius: $space-small; + position: relative; .canned { @include elegant-card; - z-index: 100; - position: absolute; - background: #fff; - width: 24rem; - left: 0; - border-top: $space-small solid $color-white; + background: $color-white; border-bottom: $space-small solid $color-white; + border-top: $space-small solid $color-white; + left: 0; + max-height: 14rem; overflow: scroll; + position: absolute; + width: 24rem; + z-index: 100; - .active { - a { - background: $color-woot; - } + .active a { + background: $color-woot; } } @@ -43,30 +42,30 @@ &.is-private { background: lighten($warning-color, 38%); - > input { + >input { background: lighten($warning-color, 38%); } } - > .icon { - font-size: $font-size-medium; + >.icon { color: $medium-gray; - margin-right: $space-small; cursor: pointer; + font-size: $font-size-medium; + margin-right: $space-small; &.active { color: $color-woot; } } - > textarea { + >textarea { @include ghost-input(); @include margin(0); - resize: none; background: transparent; // Override min-height : 50px in foundation // min-height: 1rem; + resize: none; } } @@ -80,48 +79,47 @@ .tabs { border: 0; - padding: 0; flex: 1; + padding: 0; .tabs-title { margin: 0; - transition: background .2s $ease-in-out-cubic; - transition: color .2s $ease-in-out-cubic; + transition: all .2s $ease-in-out-cubic; + transition-property: color, background; a { + font-weight: $font-weight-medium; padding: $space-one $space-two; } - &:first-child { - border-bottom-left-radius: $space-small; + &.is-private.is-active { + background: lighten($warning-color, 38%); - &.is-active { - @include border-light-right; - border-left: 0; - - a { - border-bottom-left-radius: $space-small; - } + a { + border-bottom-color: darken($warning-color, 15%); + color: darken($warning-color, 15%); } } + } - &.is-private { - &.is-active { - background: lighten($warning-color, 38%); + .tabs-title:first-child { + border-bottom-left-radius: $space-small; - a { - border-bottom-color: darken($warning-color, 15%); - color: darken($warning-color, 15%); - } + &.is-active { + @include border-light-right; + border-left: 0; + + a { + border-bottom-left-radius: $space-small; } } } .is-active { @include background-white; - margin-top: -1px; @include border-light-left; @include border-light-right; + margin-top: -1px; } .message-length { @@ -138,11 +136,11 @@ } .send-button { - height: 3.6rem; border-bottom-right-radius: $space-small; - padding-top: $space-small; - padding-right: $space-two; + height: 3.6rem; padding-left: $space-two; + padding-right: $space-two; + padding-top: $space-small; .icon { margin-left: $space-small; diff --git a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss index bf16258bf..0e76ffde9 100644 --- a/app/javascript/dashboard/assets/scss/widgets/_tabs.scss +++ b/app/javascript/dashboard/assets/scss/widgets/_tabs.scss @@ -13,6 +13,7 @@ .tabs-title { a { font-size: $font-size-default; + font-weight: $font-weight-medium; padding-bottom: $space-slab; padding-top: $space-slab; } diff --git a/app/javascript/dashboard/components/widgets/Avatar.vue b/app/javascript/dashboard/components/widgets/Avatar.vue index 25875e13c..b23b5a737 100644 --- a/app/javascript/dashboard/components/widgets/Avatar.vue +++ b/app/javascript/dashboard/components/widgets/Avatar.vue @@ -14,15 +14,19 @@ export default { props: { username: { type: String, + default: '', }, backgroundColor: { type: String, + default: 'white', }, color: { type: String, + default: '#1f93ff', }, customStyle: { type: Object, + default: undefined, }, size: { type: Number, @@ -30,6 +34,7 @@ export default { }, src: { type: String, + default: '', }, rounded: { type: Boolean, @@ -72,7 +77,7 @@ export default { diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue index 2211d79de..b61154e4b 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ContactDetailsItem.vue @@ -1,9 +1,9 @@ @@ -164,15 +163,13 @@ export default { @include border-normal-left; font-size: $font-size-small; overflow-y: auto; - background: $color-white; + background: white; overflow: auto; } .contact--profile { - width: 100%; - padding: $space-normal $space-medium $zero; + padding: $space-medium $space-normal 0 $space-medium; align-items: center; - .user-thumbnail-box { margin-right: $space-normal; } @@ -191,9 +188,10 @@ export default { .contact--name { @include text-ellipsis; + text-transform: capitalize; font-weight: $font-weight-bold; - font-size: $font-size-default; + font-size: $font-size-medium; } .contact--email { @@ -210,8 +208,7 @@ export default { } .conversation--details { - padding: $space-medium; - width: 100%; + padding: $space-two $space-normal $space-two $space-medium; } .conversation--labels { diff --git a/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue b/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue index 36221a5ae..9bc10e8e8 100644 --- a/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue +++ b/app/javascript/dashboard/routes/dashboard/conversation/ConversationLabels.vue @@ -1,21 +1,42 @@