From 66212fd703f63dc09d6c3b7e185fc3b44ce418a0 Mon Sep 17 00:00:00 2001 From: Anton Date: Thu, 9 Jun 2022 14:40:45 +0200 Subject: [PATCH] Finalize inline edit field [SCI-6782] --- .scss-lint.yml | 2 +- .../stylesheets/shared/inline_edit.scss | 107 +++++++++--------- .../steps/components/checklist.scss | 70 ++++++------ app/assets/stylesheets/steps/step.scss | 11 +- app/javascript/vue/shared/inline_edit.vue | 14 +-- 5 files changed, 97 insertions(+), 107 deletions(-) diff --git a/.scss-lint.yml b/.scss-lint.yml index ad1a7c254..21a0428f8 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -163,7 +163,7 @@ linters: max_depth: 3 SelectorFormat: - enabled: true + enabled: false convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern Shorthand: diff --git a/app/assets/stylesheets/shared/inline_edit.scss b/app/assets/stylesheets/shared/inline_edit.scss index 336ec8a92..137ed83fb 100644 --- a/app/assets/stylesheets/shared/inline_edit.scss +++ b/app/assets/stylesheets/shared/inline_edit.scss @@ -1,66 +1,67 @@ +// scss-lint:disable SelectorDepth +// scss-lint:disable NestingDepth .sci-inline-edit { - display: flex; + column-gap: .25em; + display: grid; + grid-template-columns: auto repeat(2, max-content); + transition: .4s $timing-function-sharp; - &.editing { - margin-top: -0.5em; - } -} - -.sci-inline-edit__content { - width: 100%; - - span { - cursor: pointer; - - &.blank { - color: $color-silver-chalice; - } - } - - textarea { - border: 1px solid; - border-color: $brand-focus; - border-radius: 4px; - height: 36px; + .sci-inline-edit__content { + border: $border-transparent; + display: flex; + flex-direction: column; + justify-content: center; + line-height: 1em; + margin-left: -.25em; min-height: 36px; - outline: none; - overflow: hidden; - padding: 0.5em 1em; + padding-left: .25em; width: 100%; - &:focus { + .sci-inline-edit__view { + cursor: pointer; + width: 100%; + + &.blank { + color: $color-silver-chalice; + } + } + + textarea { + background: transparent; + border: 0; + line-height: 1em; + min-height: 1em; outline: none; + overflow: hidden; + padding: 0; + padding-top: 2px; + width: 100%; + + &:focus { + outline: none; + } + + &.error { + border-color: $brand-danger; + } } - &.error { - border-color: $brand-danger; + .sci-inline-edit__error { + color: $brand-danger; + font-size: .8em; } } - .sci-inline-edit__error { - color: $brand-danger; - font-size: .8em; + &:hover { + .sci-inline-edit__content { + border: $border-default; + } + } + + &.editing { + + .sci-inline-edit__content { + border-color: $brand-focus; + } } } - -.sci-inline-edit__controls { - display: flex; - justify-content: space-between; - margin-left: 8px; - width: 76px; -} - -.sci-inline-edit__control { - border-radius: 4px; - cursor: pointer; - font-size: 14px; - height: 36px; - line-height: 36px; - text-align: center; - width: 36px; -} - -.sci-inline-edit__save { - background: $brand-primary; - color: $color-white; -} diff --git a/app/assets/stylesheets/steps/components/checklist.scss b/app/assets/stylesheets/steps/components/checklist.scss index 92aa5a094..482e96a15 100644 --- a/app/assets/stylesheets/steps/components/checklist.scss +++ b/app/assets/stylesheets/steps/components/checklist.scss @@ -1,47 +1,43 @@ -.step-checklist-container { - .step-element-name { - align-items: flex-start; - display: flex; - - .sci-checkbox-container { - margin-right: 8px; - margin-top: 4px; - } - - .step-checklist-text { - width: 100%; - } - - &.done .step-checklist-text { - text-decoration: line-through; - } - - &:hover.done .step-checklist-text { - text-decoration: none; - } - } - - .step-checklist-add-item { - margin-left: 9px; - margin-top: 2px; - } -} +// scss-lint:disable SelectorDepth +// scss-lint:disable NestingDepth .step-checklist-items { + .step-element-header { + .step-element-name { + align-items: flex-start; + column-gap: .5em; + display: grid; + font-weight: normal; + grid-template-columns: max-content auto; + + .step-checklist-text { + width: 100%; + } + + &.done .step-checklist-text { + text-decoration: line-through; + } + + &:hover.done .step-checklist-text { + text-decoration: none; + } + + .step-checklist-add-item { + margin-left: 9px; + margin-top: 2px; + } + } + } + .step-checklist-item-ghost { border: 1px solid $brand-primary; } - .sci-checkbox-container.disabled { - pointer-events: none; - } + .sci-checkbox-container { + margin: 10px 0; - .sci-inline-edit { - font-weight: normal; - - textarea { - padding-left: 4px; - margin-left: -5px; + &.disabled { + pointer-events: none; } } } diff --git a/app/assets/stylesheets/steps/step.scss b/app/assets/stylesheets/steps/step.scss index 777450bcc..dd367c79d 100644 --- a/app/assets/stylesheets/steps/step.scss +++ b/app/assets/stylesheets/steps/step.scss @@ -45,6 +45,7 @@ .step-position { @include font-main; + flex-shrink: 0; line-height: 24px; margin: 0 4px; } @@ -173,7 +174,6 @@ min-height: 40px; padding: 0 0 0 8px; position: relative; - padding: 8px; &.editing-name { .step-element-controls { @@ -205,14 +205,7 @@ display: flex; margin-left: auto; position: absolute; - right: 4px; - top: 4px; - - .btn { - height: 32px; - width: 32px; - padding: 0; - } + right: 0; .fas { font-size: 14px; diff --git a/app/javascript/vue/shared/inline_edit.vue b/app/javascript/vue/shared/inline_edit.vue index 9ca52f9d7..086af177f 100644 --- a/app/javascript/vue/shared/inline_edit.vue +++ b/app/javascript/vue/shared/inline_edit.vue @@ -13,19 +13,19 @@ @paste="handlePaste" @blur="handleBlur" > - {{ value || placeholder }} +
{{ value || placeholder }}
{{ error }}
-
-
+
@@ -92,9 +92,9 @@ } }, focus() { - if (!this.$refs.input) return; - this.$nextTick(() => { + if (!this.$refs.input) return; + this.$refs.input.focus(); this.resize(); });