From 4fa88b9c180863d133e56da5e47f69f374d4515c Mon Sep 17 00:00:00 2001 From: Jean-Baptiste Bellet Date: Tue, 22 Mar 2022 15:57:32 +0100 Subject: [PATCH] Fatorize CSS between Selector and SuperSelector components --- .../selector_component.html.haml | 17 ++-- .../selector_component.scss | 91 ++++++++++++------- .../super_selector_component.html.haml | 12 +-- .../super_selector_component.scss | 79 +--------------- 4 files changed, 73 insertions(+), 126 deletions(-) diff --git a/app/components/selector_component/selector_component.html.haml b/app/components/selector_component/selector_component.html.haml index 5d77f097ec..34a09a3b5f 100644 --- a/app/components/selector_component/selector_component.html.haml +++ b/app/components/selector_component/selector_component.html.haml @@ -1,10 +1,11 @@ = component_controller do - .selector{ class: ("selector_close" if @state == :close) } - .selector_main - .selector_main_title + .selector{ class: ("selector-close" if @state == :close) } + .selector-main + .selector-main-title = @title - .selector_arrow{data: reflex_data_attributes(:toggle)} - .selector_items - - @items.each do |item| - .selector_item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] } - = item[:label] + .selector-arrow{data: reflex_data_attributes(:toggle)} + .selector-wrapper + .selector-items + - @items.each do |item| + .selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] } + = item[:label] diff --git a/app/components/selector_component/selector_component.scss b/app/components/selector_component/selector_component.scss index 7f2eaa7618..7660e6ceb4 100644 --- a/app/components/selector_component/selector_component.scss +++ b/app/components/selector_component/selector_component.scss @@ -1,64 +1,85 @@ .selector { - .selector_main { - border: 1px solid #ccc; + position: relative; + + .selector-main { + border: 1px solid #d2d2d2; + height: 3em; position: relative; - .selector_main_title { - padding: 5px 10px; + .selector-main-title { + line-height: 3em; + padding-left: 10px; + padding-right: 10px; } - .selector_arrow { - height: 2em; - width: 10px; + .selector-arrow { position: absolute; - top: 1px; - right: 10px; + right: 0px; + height: 3em; + width: 1.5em; + top: -1px; cursor: pointer; - &:after { - display: inline-block; + &:after { content: ""; + position: absolute; + top: 50%; + right: 5px; + margin-top: -5px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; - border-top: 5px solid #ccc; + border-top: 5px solid #d2d2d2; } } } - .selector_items { - border: 1px solid #cCC; + .selector-wrapper { position: absolute; - width: 100%; - margin-top: -1px; + left: 0px; + right: 0px; + z-index: 1; background-color: white; + margin-top: -1px; + border: 1px solid #d2d2d2; - .selector_item { - padding-left: 10px; - padding-right: 10px; - border-bottom: 1px solid #CCC; - padding-top: 2px; - padding-bottom: 2px; + .selector-items { + overflow-y: auto; + min-height: 6em; + + .selector-item { + padding-left: 10px; + padding-right: 10px; + border-bottom: 1px solid #d2d2d2; + position: relative; + height: 3em; + line-height: 3em; - &.selected { - &:after { - content: "✓"; - display: inline-block; - position: absolute; - right: 10px; - top: 50%; + &:hover { + background-color: #eee; + cursor: pointer; + } + + &:last-child { + border-bottom: none; + } + + &.selected { + &:after { + content: "✓"; + display: inline-block; + position: absolute; + right: 10px; + } } } - &:hover { - background-color: #eee; - cursor: pointer; - } } } + - &.selector_close { - .selector_items { + &.selector-close { + .selector-wrapper { display: none; } } diff --git a/app/components/super_selector_component/super_selector_component.html.haml b/app/components/super_selector_component/super_selector_component.html.haml index 203dd023d0..4563fbad05 100644 --- a/app/components/super_selector_component/super_selector_component.html.haml +++ b/app/components/super_selector_component/super_selector_component.html.haml @@ -1,6 +1,6 @@ = component_controller do - .super-selector{ class: ("super-selector-close" if @state == :close) } - .super-selector-main + .super-selector.selector{ class: ("selector-close" if @state == :close) } + .selector-main .super-selector-label = @title .super-selector-selected-items @@ -12,11 +12,11 @@ - else .super-selector-selected-item = "#{@selected_items.length} categories selected" - .super-selector-arrow{data: reflex_data_attributes(:toggle)} - .super-selector-wrapper + .selector-arrow{data: reflex_data_attributes(:toggle)} + .selector-wrapper .super-selector-search %input{type: "text", placeholder: "Search", data: reflex_data_attributes("debounced:input->search"), value: @query} - .super-selector-items + .selector-items - @filtered_items.each do |item| - .super-selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] } + .selector-item{ class: ("selected" if item[:selected]), data: @data, "data-value": item[:value] } = item[:label] diff --git a/app/components/super_selector_component/super_selector_component.scss b/app/components/super_selector_component/super_selector_component.scss index 81944f5875..8e5c2e31fe 100644 --- a/app/components/super_selector_component/super_selector_component.scss +++ b/app/components/super_selector_component/super_selector_component.scss @@ -1,13 +1,8 @@ .super-selector { - margin-top: 5px; position: relative; - .super-selector-main { - border: 1px solid #d2d2d2; - height: 3em; - position: relative; - + .selector-main { .super-selector-label { padding-left: 5px; padding-right: 5px; @@ -16,28 +11,6 @@ top: -1em; background-color: white; } - - .super-selector-arrow { - position: absolute; - right: 0px; - height: 3em; - width: 1.5em; - top: -1px; - cursor: pointer; - - &:after { - content: ""; - position: absolute; - top: 50%; - right: 5px; - margin-top: -5px; - width: 0; - height: 0; - border-left: 5px solid transparent; - border-right: 5px solid transparent; - border-top: 5px solid #d2d2d2; - } - } } .super-selector-selected-items { @@ -62,15 +35,7 @@ } } - .super-selector-wrapper { - position: absolute; - left: 0px; - right: 0px; - z-index: 1; - background-color: white; - margin-top: -1px; - border: 1px solid #d2d2d2; - + .selector-wrapper { .super-selector-search { border-bottom: 1px solid #d2d2d2; padding: 10px 5px; @@ -82,45 +47,5 @@ width: 100%; } } - - .super-selector-items { - overflow-y: auto; - min-height: 6em; - - .super-selector-item { - padding-left: 10px; - padding-right: 10px; - border-bottom: 1px solid #d2d2d2; - position: relative; - height: 3em; - line-height: 3em; - - &:hover { - background-color: #eee; - cursor: pointer; - } - - &:last-child { - border-bottom: none; - } - - &.selected { - &:after { - content: "✓"; - display: inline-block; - position: absolute; - right: 10px; - } - } - } - } - } -} - -.super-selector-close { - &.super-selector { - .super-selector-wrapper { - display: none; - } } }