From c0a1ecfc83b738aa114797f4b36d0e10bc85e5f6 Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 2 Oct 2024 13:51:50 +0200 Subject: [PATCH 01/24] feat: add styles for Poll rendered in a Message --- src/v2/styles/Avatar/Avatar-layout.scss | 4 + src/v2/styles/Dialog/Dialog-layout.scss | 32 ++ src/v2/styles/Dialog/Dialog-theme.scss | 30 ++ .../InfiniteScrollPaginator-layout.scss | 3 + src/v2/styles/Modal/Modal-layout.scss | 1 + src/v2/styles/Poll/Poll-layout.scss | 285 ++++++++++++++++++ src/v2/styles/Poll/Poll-theme.scss | 119 ++++++++ src/v2/styles/_global-theme-variables.scss | 2 +- src/v2/styles/_icons.scss | 3 + src/v2/styles/index.layout.scss | 2 + src/v2/styles/index.scss | 2 + 11 files changed, 482 insertions(+), 1 deletion(-) create mode 100644 src/v2/styles/Dialog/Dialog-theme.scss create mode 100644 src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss create mode 100644 src/v2/styles/Poll/Poll-layout.scss create mode 100644 src/v2/styles/Poll/Poll-theme.scss diff --git a/src/v2/styles/Avatar/Avatar-layout.scss b/src/v2/styles/Avatar/Avatar-layout.scss index dd3de81..4769ac1 100644 --- a/src/v2/styles/Avatar/Avatar-layout.scss +++ b/src/v2/styles/Avatar/Avatar-layout.scss @@ -30,6 +30,10 @@ .stream-chat__avatar--message-status { --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 15); } + + .str-chat__avatar--poll-vote-author { + --str-chat__avatar-size: calc(var(--str-chat__spacing-px) * 20); + } } .str-chat__avatar { diff --git a/src/v2/styles/Dialog/Dialog-layout.scss b/src/v2/styles/Dialog/Dialog-layout.scss index 970bb80..6ddabc9 100644 --- a/src/v2/styles/Dialog/Dialog-layout.scss +++ b/src/v2/styles/Dialog/Dialog-layout.scss @@ -5,4 +5,36 @@ height: var(--str-chat__dialog-overlay-height); width: 100%; z-index: 2; +} + +.str-chat__dialog { + width: 100%; + + .str-chat__dialog__body { + padding: 2rem 1rem; + + .str-chat__dialog__title { + margin-bottom: 1rem; + } + + .str-chat__dialog__prompt { + + } + + input[type=text] { + width: 100%; + padding: 0.625rem 1rem; + } + } + + .str-chat__dialog__controls { + display: flex; + justify-content: flex-end; + gap: 1.25rem; + padding: 1.25rem; + + .str-chat__dialog__controls-button { + + } + } } \ No newline at end of file diff --git a/src/v2/styles/Dialog/Dialog-theme.scss b/src/v2/styles/Dialog/Dialog-theme.scss new file mode 100644 index 0000000..e083ef2 --- /dev/null +++ b/src/v2/styles/Dialog/Dialog-theme.scss @@ -0,0 +1,30 @@ +.str-chat__dialog { + .str-chat__dialog__title { + font: var(--str-chat__subtitle-medium-text); + } + + .str-chat__dialog__prompt { + font: var(--str-chat__subtitle-text); + } + + input[type=text] { + font: var(--str-chat__subtitle-text); + border-radius: 20px; + border: 1px solid var(--str-chat__primary-color); + } + + .str-chat__dialog__controls { + .str-chat__dialog__controls-button { + font: var(--str-chat__body-medium-text); + color: var(--str-chat__primary-color); + } + + .str-chat__dialog__controls-button--submit { + text-transform: uppercase; + + &:disabled { + color: var(--str-chat__disabled-color); + } + } + } +} \ No newline at end of file diff --git a/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss b/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss new file mode 100644 index 0000000..f46e1f2 --- /dev/null +++ b/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss @@ -0,0 +1,3 @@ +.str-chat__infinite-scroll-paginator { + overflow-y: auto; +} \ No newline at end of file diff --git a/src/v2/styles/Modal/Modal-layout.scss b/src/v2/styles/Modal/Modal-layout.scss index 9e0645e..a8d8e4c 100644 --- a/src/v2/styles/Modal/Modal-layout.scss +++ b/src/v2/styles/Modal/Modal-layout.scss @@ -31,6 +31,7 @@ @include utils.flex-col-center; padding: var(--str-chat__spacing-8) var(--str-chat__spacing-4); width: 40%; + max-height: 80%; min-width: 0; min-height: 0; } diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss new file mode 100644 index 0000000..e26e429 --- /dev/null +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -0,0 +1,285 @@ +@use '../utils'; + +.str-chat__poll { + display: flex; + flex-direction: column; + gap: 0.5rem; + padding: 0.75rem 0.675rem; + min-width: 220px; + max-width: 270px; + font: var(--str-chat__body-text); + + button { + @include utils.button-reset; + cursor: pointer; + } + + $checkmark_size: 1rem; + + .str-chat__checkmark { + grid-column: 1 / 2; + grid-row: 1 / 2; + margin-right: 0.125rem; + height: $checkmark_size; + width: $checkmark_size; + } + + .str-chat__checkmark--checked { + height: calc($checkmark_size + 1px); + width: calc($checkmark_size + 1px); + background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Im00IDkuNC00LTRMMS40IDQgNCA2LjYgMTAuNiAwIDEyIDEuNGwtOCA4WiIvPjwvc3ZnPg=='); + background-repeat: no-repeat; + background-position: center; + background-size: 11px 10px; + } + + .str-chat__poll-header { + .str-chat__poll-title { + font: var(--str-chat__body-medium-text); + } + + .str-chat__poll-subtitle { + font: var(--str-chat__caption-text); + } + } + + .str-chat__poll-actions { + display: flex; + flex-direction: column; + align-items: center; + + .str-chat__poll-action { + padding: 0.675rem; + font: var(--str-chat__subtitle-text); + color: var(--str-chat__primary-color); + } + } +} + +.str-chat__poll-option-list--full, +.str-chat__modal__poll-results { + .str-chat__poll-option { + display: flex; + flex-direction: column; + padding: 0.75rem 1rem; + + .str-chat__amount-bar { + display: none; + } + } +} + +.str-chat__poll-option { + padding-block: 0.25rem; + cursor: pointer; + + .str-chat__poll-option-data { + flex: 1; + display: flex; + align-items: flex-start; + font: var(--str-chat__body-text); + gap: 0.125rem; + + p { + margin: 0; + flex: 1; + } + + .str-chat__poll-option-voters { + display: flex; + --str-chat__avatar-size: 1.175rem; + } + } +} + +.str-chat__poll-option-list--full { + .str-chat__poll-option { + display: flex; + flex-direction: row; + padding-block: 1rem; + + &:nth-of-type(1) { + padding-top: 1.5rem; + border-top-left-radius: var(--str-chat__border-radius-sm); + border-top-right-radius: var(--str-chat__border-radius-sm); + } + + &:last-child { + padding-bottom: 1.5rem; + border-bottom-left-radius: var(--str-chat__border-radius-sm); + border-bottom-right-radius: var(--str-chat__border-radius-sm); + } + } +} + +.str-chat__poll-option-list:not(.str-chat__poll-option-list--full) { + .str-chat__poll-option { + display: grid; + grid-template-columns: auto 1fr; + grid-template-rows: 1fr 1fr; + padding-block: 0.25rem; + gap: 0.125rem; + + + .str-chat__poll-option-data { + grid-column: 2 / 3; + grid-row: 1 / 2; + } + + .str-chat__poll-option__votes-bar { + grid-column: 2 / 3; + grid-row: 2 / 3; + height: 0.25rem; + width: 100%; + margin-top: 0.25rem; + } + } +} + +.str-chat__poll-actions .str-chat__modal { + .str-chat__modal__inner { + padding: 0; + overflow: hidden; + max-width: 400px; + $content-offset-inline: 1rem; + + .str-chat__tooltip { + max-width: 300px; + } + + .str-chat__poll-modal__header { + display: flex; + align-items: center; + width: 100%; + padding: 1.25rem $content-offset-inline; + + button.str-chat__poll-modal__go-back-button, + .str-chat__poll-modal__close-button { + padding: 1rem; + background-size: 0.875rem; + background-repeat: no-repeat; + background-position: center; + } + button.str-chat__poll-modal__go-back-button { + background-image: var(--str-chat__arrow-left-icon); + } + + .str-chat__poll-modal__close-button { + background-image: var(--str-chat__close-icon); + } + + .str-chat__poll-modal__title { + flex: 1; + } + } + + .str-chat__modal__poll-answer-list, + .str-chat__modal__poll-option-list, + .str-chat__modal__poll-results { + display: flex; + flex-direction: column; + width: 100%; + height: 100%; + } + + .str-chat__modal__poll-answer-list, + .str-chat__poll-option--full-vote-list { + .str-chat__loading-indicator-placeholder { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + height: 40px; + } + } + + .str-chat__modal__poll-option-list__title, + .str-chat__modal__poll-results__title { + margin-bottom: 1.5rem; + padding: 1.175rem 1rem; + } + + .str-chat__modal__poll-option-list__body, + .str-chat__poll-answer-list, + .str-chat__modal__poll-results__body { + display: flex; + flex-direction: column; + gap: 0.5rem; + flex: 1; + max-height: 100%; + overflow-y: auto; + padding: 0 $content-offset-inline 1.25rem; + } + + .str-chat__modal__poll-option-list__body { + gap: 0; + } + + .str-chat__poll-answer { + display: flex; + flex-direction: column; + gap: 1rem; + padding: 0.75rem 1rem; + + .str-chat__poll-answer__text { + margin: 0; + } + } + + .str-chat__checkmark { + margin-right: 1rem; + } + + + .str-chat__poll-option { + .str-chat__poll-vote-listing { + margin-top: 1rem; + } + } + + .str-chat__poll-option__header { + display: flex; + align-items: flex-start; + gap: 0.25rem; + width: 100%; + + .str-chat__poll-option__option-text { + flex: 1; + } + } + + .str-chat__poll-vote { + display: flex; + justify-content: space-between; + align-items: center; + gap: 0.5rem; + white-space: nowrap; + padding-block: 0.375rem; + + .str-chat__poll-vote__author { + display: flex; + align-items: center; + gap: calc(var(--str-chat__spacing-px) * 5); + } + } + + .str-chat__poll-result-option-vote-counter { + display: flex; + gap: 0.375rem; + + .str-chat__poll-result-winning-option-icon { + height: 1.25rem; + width: 1.25rem; + background-image: var(--str-chat__winning-poll-option-icon); + } + } + } +} + +.str-chat__modal__poll-results--option-detail { + .str-chat__poll-modal__title { + padding-inline: 1rem; + flex: 1; + } +} + diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss new file mode 100644 index 0000000..900d144 --- /dev/null +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -0,0 +1,119 @@ +.str-chat__poll { + .str-chat__poll-header { + .str-chat__poll-subtitle { + color: var(--str-chat__text-low-emphasis-color); + } + } + + .str-chat__checkmark { + border-radius: var(--str-chat__border-radius-circle); + border: 1px solid var(--str-chat__disabled-color); + } + + .str-chat__checkmark--checked { + background-color: var(--str-chat__primary-color); + border: none; + } + + .str-chat__poll-option-list { + .str-chat__poll-option { + &.str-chat__poll-option--votable:hover { + cursor: pointer; + } + + .str-chat__poll-option__votes-bar { + background: linear-gradient( + to right, + var(--str-chat__primary-color) var(--str-chat__amount-bar-fulfillment), + var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment) + ); + border-radius: calc(var(--str-chat__spacing-px) * 4); + } + + .str-chat__poll-option__votes-bar--winner { + background: linear-gradient( + to right, + var(--str-chat__info-color) var(--str-chat__amount-bar-fulfillment), + var(--str-chat__surface-color) var(--str-chat__amount-bar-fulfillment) + ); + } + } + } + + .str-chat__poll-option-list--full, + .str-chat__poll-answer, + .str-chat__modal__poll-option-list__title, + .str-chat__modal__poll-results .str-chat__modal__poll-results__title, + .str-chat__modal__poll-results .str-chat__poll-option { + border-radius: 0.75rem; + } +} + +.str-chat__poll-option-list--full { + overflow: clip; +} + +.str-chat__poll--closed { + .str-chat__poll-option { + &:hover { + cursor: unset; + } + } +} + +.str-chat__poll-actions .str-chat__modal { + .str-chat__poll-modal__header { + .str-chat__poll-modal__title { + font: var(--str-chat__subtitle2-medium-text); + } + + .str-chat__poll-modal__close-button { + + } + } + + .str-chat__poll-answer__text, + .str-chat__modal__poll-option-list__title, + .str-chat__modal__poll-results__title { + font: var(--str-chat__subtitle-medium-text); + } + + .str-chat__poll-option-list--full, + .str-chat__poll-answer, + .str-chat__modal__poll-option-list__title, + .str-chat__modal__poll-results__title, + .str-chat__poll-option { + background-color: var(--str-chat__tertiary-surface-color); + } + + .str-chat__poll-option-list--full { + .str-chat__poll-option--votable:hover { + background-color: var(--str-chat__secondary-surface-color) + } + } + + .str-chat__poll-option { + .str-chat__poll-option__header { + font: var(--str-chat__subtitle-text); + + .str-chat__poll-option__option-text { + font: var(--str-chat__subtitle-medium-text); + } + } + + .str-chat__poll-option__show-all-votes-button { + font: var(--str-chat__subtitle-text); + color: var(--str-chat__primary-color); + } + } + +} +.str-chat__poll-vote { + .str-chat__poll-vote__author__name { + text-transform: capitalize; + } + + .str-chat__poll-vote__timestamp { + color: var(--str-chat__text-low-emphasis-color); + } +} diff --git a/src/v2/styles/_global-theme-variables.scss b/src/v2/styles/_global-theme-variables.scss index 5131e38..33c0fc5 100644 --- a/src/v2/styles/_global-theme-variables.scss +++ b/src/v2/styles/_global-theme-variables.scss @@ -40,7 +40,7 @@ --str-chat__body2-medium-text: 500 0.9375rem/1.2 var(--str-chat__font-family); /* The font used for subtitle texts */ - --str-chat__subtitle-text: 1rem/1.1.25 var(--str-chat__font-family); + --str-chat__subtitle-text: 1rem/1.25 var(--str-chat__font-family); /* The font used for subtitle texts with emphasize */ --str-chat__subtitle-medium-text: 500 1rem/1.25 var(--str-chat__font-family); diff --git a/src/v2/styles/_icons.scss b/src/v2/styles/_icons.scss index 1601399..36228af 100644 --- a/src/v2/styles/_icons.scss +++ b/src/v2/styles/_icons.scss @@ -2,6 +2,9 @@ .str-chat { --str-chat__image-fallback-icon: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9ImN1cnJlbnRDb2xvciIgY2xhc3M9InN0ci1jaGF0X19pbWFnZS1mYWxsYmFja19faWNvbiIgdmlld0JveD0iMCAwIDE4IDE4Ij48cGF0aCBkPSJNMTYgMnYxNEgyVjJoMTRabTAtMkgyQy45IDAgMCAuOSAwIDJ2MTRjMCAxLjEuOSAyIDIgMmgxNGMxLjEgMCAyLS45IDItMlYyYzAtMS4xLS45LTItMi0yWm0tNC44NiA4Ljg2LTMgMy44N0w2IDEwLjE0IDMgMTRoMTJsLTMuODYtNS4xNFoiLz48L3N2Zz4='); + --str-chat__winning-poll-option-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS44MzMzIDQuMTY2NjdIMTQuMTY2N1YyLjVINS44MzMzM1Y0LjE2NjY3SDQuMTY2NjdDMy4yNSA0LjE2NjY3IDIuNSA0LjkxNjY3IDIuNSA1LjgzMzMzVjYuNjY2NjdDMi41IDguNzkxNjcgNC4xIDEwLjUyNSA2LjE1ODMzIDEwLjc4MzNDNi42ODMzMyAxMi4wMzMzIDcuODA4MzMgMTIuOTc1IDkuMTY2NjcgMTMuMjVWMTUuODMzM0g1LjgzMzMzVjE3LjVIMTQuMTY2N1YxNS44MzMzSDEwLjgzMzNWMTMuMjVDMTIuMTkxNyAxMi45NzUgMTMuMzE2NyAxMi4wMzMzIDEzLjg0MTcgMTAuNzgzM0MxNS45IDEwLjUyNSAxNy41IDguNzkxNjcgMTcuNSA2LjY2NjY3VjUuODMzMzNDMTcuNSA0LjkxNjY3IDE2Ljc1IDQuMTY2NjcgMTUuODMzMyA0LjE2NjY3Wk00LjE2NjY3IDYuNjY2NjdWNS44MzMzM0g1LjgzMzMzVjkuMDE2NjdDNC44NjY2NyA4LjY2NjY3IDQuMTY2NjcgNy43NSA0LjE2NjY3IDYuNjY2NjdaTTEwIDExLjY2NjdDOC42MjUgMTEuNjY2NyA3LjUgMTAuNTQxNyA3LjUgOS4xNjY2N1Y0LjE2NjY3SDEyLjVWOS4xNjY2N0MxMi41IDEwLjU0MTcgMTEuMzc1IDExLjY2NjcgMTAgMTEuNjY2N1pNMTUuODMzMyA2LjY2NjY3QzE1LjgzMzMgNy43NSAxNS4xMzMzIDguNjY2NjcgMTQuMTY2NyA5LjAxNjY3VjUuODMzMzNIMTUuODMzM1Y2LjY2NjY3WiIgZmlsbD0iIzVFNjc2RSIvPgo8L3N2Zz4K'); + --str-chat__arrow-left-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc5MTUgNy4wMDUxSDMuNjIxNDhMOC41MDE0OCAyLjEyNTFDOC44OTE0OCAxLjczNTEgOC44OTE0OCAxLjA5NTEgOC41MDE0OCAwLjcwNTA5OEM4LjExMTQ4IDAuMzE1MDk4IDcuNDgxNDggMC4zMTUwOTggNy4wOTE0OCAwLjcwNTA5OEwwLjUwMTQ4NCA3LjI5NTFDMC4xMTE0ODQgNy42ODUxIDAuMTExNDg0IDguMzE1MSAwLjUwMTQ4NCA4LjcwNTFMNy4wOTE0OCAxNS4yOTUxQzcuNDgxNDggMTUuNjg1MSA4LjExMTQ4IDE1LjY4NTEgOC41MDE0OCAxNS4yOTUxQzguODkxNDggMTQuOTA1MSA4Ljg5MTQ4IDE0LjI3NTEgOC41MDE0OCAxMy44ODUxTDMuNjIxNDggOS4wMDUxSDE0Ljc5MTVDMTUuMzQxNSA5LjAwNTEgMTUuNzkxNSA4LjU1NTEgMTUuNzkxNSA4LjAwNTFDMTUuNzkxNSA3LjQ1NTEgMTUuMzQxNSA3LjAwNTEgMTQuNzkxNSA3LjAwNTFaIiBmaWxsPSIjMDgwNzA3Ii8+Cjwvc3ZnPgo='); + --str-chat__close-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTQiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjI5OTcgMC43MDk5NzFDMTIuOTA5NyAwLjMxOTk3MSAxMi4yNzk3IDAuMzE5OTcxIDExLjg4OTcgMC43MDk5NzFMNi45OTk3MyA1LjU4OTk3TDIuMTA5NzMgMC42OTk5NzFDMS43MTk3MyAwLjMwOTk3MSAxLjA4OTczIDAuMzA5OTcxIDAuNjk5NzI3IDAuNjk5OTcxQzAuMzA5NzI3IDEuMDg5OTcgMC4zMDk3MjcgMS43MTk5NyAwLjY5OTcyNyAyLjEwOTk3TDUuNTg5NzMgNi45OTk5N0wwLjY5OTcyNyAxMS44OUMwLjMwOTcyNyAxMi4yOCAwLjMwOTcyNyAxMi45MSAwLjY5OTcyNyAxMy4zQzEuMDg5NzMgMTMuNjkgMS43MTk3MyAxMy42OSAyLjEwOTczIDEzLjNMNi45OTk3MyA4LjQwOTk3TDExLjg4OTcgMTMuM0MxMi4yNzk3IDEzLjY5IDEyLjkwOTcgMTMuNjkgMTMuMjk5NyAxMy4zQzEzLjY4OTcgMTIuOTEgMTMuNjg5NyAxMi4yOCAxMy4yOTk3IDExLjg5TDguNDA5NzMgNi45OTk5N0wxMy4yOTk3IDIuMTA5OTdDMTMuNjc5NyAxLjcyOTk3IDEzLjY3OTcgMS4wODk5NyAxMy4yOTk3IDAuNzA5OTcxWiIgZmlsbD0iIzA4MDcwNyIvPgo8L3N2Zz4K'); } @font-face { diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index 72c2be5..f12e1d9 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -19,6 +19,7 @@ @use 'EditMessageForm/EditMessageForm-layout'; @use 'ImageCarousel/ImageCarousel-layout'; @use 'Icon/Icon-layout'; +@use 'InfiniteScrollPaginator/InfiniteScrollPaginator-layout'; @use 'LinkPreview/LinkPreview-layout'; @use 'LoadingIndicator/LoadingIndicator-layout'; @use 'Message/Message-layout'; @@ -33,6 +34,7 @@ @use 'Notification/MessageNotification-layout'; @use 'Notification/NotificationList-layout'; @use 'Notification/Notification-layout'; +@use 'Poll/Poll-layout'; @use 'Thread/Thread-layout'; @use 'Tooltip/Tooltip-layout'; @use 'TypingIndicator/TypingIndicator-layout'; diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index dff6879..173e9bc 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -17,6 +17,7 @@ @use 'ChannelList/ChannelList-theme'; @use 'ChannelPreview/ChannelPreview-theme'; @use 'ChannelSearch/ChannelSearch-theme'; +@use 'Dialog/Dialog-theme'; @use 'EditMessageForm/EditMessageForm-theme'; @use 'Icon/Icon-theme'; @use 'ImageCarousel/ImageCarousel-theme'; @@ -34,6 +35,7 @@ @use 'Notification/MessageNotification-theme'; @use 'Notification/NotificationList-theme'; @use 'Notification/Notification-theme'; +@use 'Poll/Poll-theme'; @use 'Thread/Thread-theme'; @use 'Tooltip/Tooltip-theme'; @use 'TypingIndicator/TypingIndicator-theme'; From 6e604f4617a19aa5b26fb5a89c0e3c18be4f92de Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 2 Oct 2024 16:01:43 +0200 Subject: [PATCH 02/24] feat: adapt poll size to small screens --- src/v2/styles/Poll/Poll-layout.scss | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index e26e429..616f622 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -54,6 +54,22 @@ color: var(--str-chat__primary-color); } } + + @media only screen and (max-device-width: 768px) { + min-width: unset; + + .str-chat__modal--open { + .str-chat__modal__close-button { + display: none; + } + + .str-chat__modal__inner { + height: 100%; + width: 100%; + inset: 0; + } + } + } } .str-chat__poll-option-list--full, From 52b34b83427ce244fc61fad2fadf82656c21c710 Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 2 Oct 2024 16:02:07 +0200 Subject: [PATCH 03/24] feat: add styles for quoted poll --- src/v2/styles/Poll/Poll-layout.scss | 6 ++++++ src/v2/styles/Poll/Poll-theme.scss | 5 +++++ 2 files changed, 11 insertions(+) diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index 616f622..f9e4bcf 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -299,3 +299,9 @@ } } +.str-chat__quoted-poll-preview { + display: flex; + flex-wrap: wrap; + gap: 0.5rem; + align-items: flex-start; +} diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss index 900d144..3bd8a82 100644 --- a/src/v2/styles/Poll/Poll-theme.scss +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -117,3 +117,8 @@ color: var(--str-chat__text-low-emphasis-color); } } + + +.str-chat__quoted-poll-preview { + font: var(--str-chat__body-medium-text); +} \ No newline at end of file From fd5db0f925b5d9437c7432b67498d4c5711a3206 Mon Sep 17 00:00:00 2001 From: martincupela Date: Wed, 2 Oct 2024 16:08:47 +0200 Subject: [PATCH 04/24] style: fix lint issues --- src/v2/styles/Dialog/Dialog-layout.scss | 8 -------- src/v2/styles/Poll/Poll-layout.scss | 8 ++++---- src/v2/styles/Poll/Poll-theme.scss | 5 +---- 3 files changed, 5 insertions(+), 16 deletions(-) diff --git a/src/v2/styles/Dialog/Dialog-layout.scss b/src/v2/styles/Dialog/Dialog-layout.scss index 6ddabc9..3843882 100644 --- a/src/v2/styles/Dialog/Dialog-layout.scss +++ b/src/v2/styles/Dialog/Dialog-layout.scss @@ -17,10 +17,6 @@ margin-bottom: 1rem; } - .str-chat__dialog__prompt { - - } - input[type=text] { width: 100%; padding: 0.625rem 1rem; @@ -32,9 +28,5 @@ justify-content: flex-end; gap: 1.25rem; padding: 1.25rem; - - .str-chat__dialog__controls-button { - - } } } \ No newline at end of file diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index f9e4bcf..733d79f 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -1,6 +1,7 @@ @use '../utils'; .str-chat__poll { + $checkmark_size: 1rem; display: flex; flex-direction: column; gap: 0.5rem; @@ -14,8 +15,6 @@ cursor: pointer; } - $checkmark_size: 1rem; - .str-chat__checkmark { grid-column: 1 / 2; grid-row: 1 / 2; @@ -102,8 +101,8 @@ } .str-chat__poll-option-voters { - display: flex; --str-chat__avatar-size: 1.175rem; + display: flex; } } } @@ -154,10 +153,10 @@ .str-chat__poll-actions .str-chat__modal { .str-chat__modal__inner { + $content-offset-inline: 1rem; padding: 0; overflow: hidden; max-width: 400px; - $content-offset-inline: 1rem; .str-chat__tooltip { max-width: 300px; @@ -176,6 +175,7 @@ background-repeat: no-repeat; background-position: center; } + button.str-chat__poll-modal__go-back-button { background-image: var(--str-chat__arrow-left-icon); } diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss index 3bd8a82..a33deaa 100644 --- a/src/v2/styles/Poll/Poll-theme.scss +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -66,10 +66,6 @@ .str-chat__poll-modal__title { font: var(--str-chat__subtitle2-medium-text); } - - .str-chat__poll-modal__close-button { - - } } .str-chat__poll-answer__text, @@ -108,6 +104,7 @@ } } + .str-chat__poll-vote { .str-chat__poll-vote__author__name { text-transform: capitalize; From c727ab148258169ef3018f8fa4e80cfdcf5b9314 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:56:29 +0200 Subject: [PATCH 05/24] fix: prevent message notifications bump above modal dialogs --- src/v2/styles/Notification/MessageNotification-layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/styles/Notification/MessageNotification-layout.scss b/src/v2/styles/Notification/MessageNotification-layout.scss index 792bca5..d6e96a4 100644 --- a/src/v2/styles/Notification/MessageNotification-layout.scss +++ b/src/v2/styles/Notification/MessageNotification-layout.scss @@ -4,7 +4,7 @@ align-self: center; padding: var(--str-chat__spacing-1) var(--str-chat__spacing-2); bottom: calc(var(--str-chat__spacing-px) * 10); - z-index: 101; + z-index: 100; } .str-chat__list-notifications { From dbba75cc7c49e1c9ce4ee973efc8784e10adb852 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:56:51 +0200 Subject: [PATCH 06/24] feat: add DragAndDropContainer styles --- .../DragAmdDropContainer-layout.scss | 3 ++ .../DragAndDropContainer-theme.scss | 46 +++++++++++++++++++ 2 files changed, 49 insertions(+) create mode 100644 src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss create mode 100644 src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss diff --git a/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss b/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss new file mode 100644 index 0000000..499cb64 --- /dev/null +++ b/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss @@ -0,0 +1,3 @@ +.str-chat__drag-and-drop-container__item { + padding-block: 0.25rem; +} diff --git a/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss b/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss new file mode 100644 index 0000000..418dc50 --- /dev/null +++ b/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss @@ -0,0 +1,46 @@ +.str-chat { + /* Top border of the component */ + --str-chat__drag-and-drop-container-border-block-start: 2px solid transparent; + + /* Bottom border of the component */ + --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent; + + /* Top border of the component on dragover */ + --str-chat__drag-and-drop-container-on-dragover-border-block-start: var(--str-chat__on-primary-color); + + /* Bottom border of the component on dragover */ + --str-chat__drag-and-drop-container-on-dragover-border-block-end: var(--str-chat__on-primary-color); + + /* Left (right in RTL layout) border of the component on dragover */ + --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none; + + /* Right (left in RTL layout) border of the component on dragover */ + --str-chat__drag-and-drop-container-on-dragover-border-inline-end: none; +} + + +.str-chat__drag-and-drop-container--dragging { + cursor: grabbing; +} + +.str-chat__drag-and-drop-container__item[draggable="true"] { + cursor: grab; + + &:active { + background: transparent; + } +} + + +.str-chat__drag-and-drop-container__item { + border-bottom: var(--str-chat__drag-and-drop-container-border-block-start); + border-top: var(--str-chat__drag-and-drop-container-border-block-start); +} + +.str-chat__drag-and-drop-container__item--dragged-over-from-top { + border-bottom: 2px solid var(--str-chat__drag-and-drop-container-on-dragover-border-block-end); +} + +.str-chat__drag-and-drop-container__item--dragged-over-from-bottom { + border-top: 2px solid var(--str-chat__drag-and-drop-container-on-dragover-border-block-start); +} \ No newline at end of file From a59c4cf3c1172f203ecd70cb0ac840e8fb769fff Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:57:20 +0200 Subject: [PATCH 07/24] feat: add modal header styles --- src/v2/styles/Modal/Modal-layout.scss | 30 +++++++++++++++++++++++++++ src/v2/styles/Modal/Modal-theme.scss | 6 ++++++ 2 files changed, 36 insertions(+) diff --git a/src/v2/styles/Modal/Modal-layout.scss b/src/v2/styles/Modal/Modal-layout.scss index a8d8e4c..3a7278c 100644 --- a/src/v2/styles/Modal/Modal-layout.scss +++ b/src/v2/styles/Modal/Modal-layout.scss @@ -11,6 +11,36 @@ height: 100%; z-index: 100; + .str-chat__modal-header { + display: flex; + align-items: center; + width: 100%; + padding: 1.25rem 1rem; + + button.str-chat__modal-header__go-back-button, + .str-chat__modal__close-button { + padding: 1rem; + background-size: 0.875rem; + background-repeat: no-repeat; + background-position: center; + } + + button.str-chat__modal-header__go-back-button { + background-image: var(--str-chat__arrow-left-icon); + } + + .str-chat__modal-header__close-button { + background-image: var(--str-chat__close-icon); + background-repeat: no-repeat; + height: 0.875rem; + width: 0.875rem; + } + + .str-chat__modal-header__title { + flex: 1; + } + } + button.str-chat__modal__close-button { @include utils.unset-button; margin: var(--str-chat__spacing-2); diff --git a/src/v2/styles/Modal/Modal-theme.scss b/src/v2/styles/Modal/Modal-theme.scss index 6475693..1d6f61b 100644 --- a/src/v2/styles/Modal/Modal-theme.scss +++ b/src/v2/styles/Modal/Modal-theme.scss @@ -46,6 +46,12 @@ @include utils.component-layer-overrides('modal'); } + .str-chat__modal-header { + .str-chat__modal-header__title { + font: var(--str-chat__subtitle2-medium-text); + } + } + .str-chat__modal__close-button { --str-chat-icon-color: var(--str-chat__modal-close-icon-color); @include utils.button-reset; From ec66de53b0d8b00b956b1a5c0cd6e38caac2c909 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:58:05 +0200 Subject: [PATCH 08/24] feat: add prompt dialog and dialog menu styles --- src/v2/styles/Dialog/Dialog-layout.scss | 38 +++++++++-- src/v2/styles/Dialog/Dialog-theme.scss | 85 +++++++++++++++++++++++-- 2 files changed, 113 insertions(+), 10 deletions(-) diff --git a/src/v2/styles/Dialog/Dialog-layout.scss b/src/v2/styles/Dialog/Dialog-layout.scss index 3843882..ba51ced 100644 --- a/src/v2/styles/Dialog/Dialog-layout.scss +++ b/src/v2/styles/Dialog/Dialog-layout.scss @@ -1,3 +1,5 @@ +@use '../utils'; + .str-chat__dialog-overlay { inset: 0; overflow: hidden; @@ -12,15 +14,12 @@ .str-chat__dialog__body { padding: 2rem 1rem; + overflow-y: auto; .str-chat__dialog__title { margin-bottom: 1rem; } - input[type=text] { - width: 100%; - padding: 0.625rem 1rem; - } } .str-chat__dialog__controls { @@ -28,5 +27,36 @@ justify-content: flex-end; gap: 1.25rem; padding: 1.25rem; + + .str-chat__dialog__controls-button { + @include utils.button-reset; + } + } +} + +.str-chat__prompt-dialog { + input[type=text] { + width: 100%; + padding: 0.625rem 1rem; + } +} + +.str-chat__dialog-menu { + overflow: hidden; + + .str-chat__dialog-menu__button { + display: flex; + align-items: center; + width: 100%; + padding: 0.5rem 0.75rem; + + .str-chat__dialog-menu__button-icon { + height: 1rem; + width: 1rem; + } + + .str-chat__dialog-menu__button-text { + padding-inline: 0.675rem; + } } } \ No newline at end of file diff --git a/src/v2/styles/Dialog/Dialog-theme.scss b/src/v2/styles/Dialog/Dialog-theme.scss index e083ef2..dffbefc 100644 --- a/src/v2/styles/Dialog/Dialog-theme.scss +++ b/src/v2/styles/Dialog/Dialog-theme.scss @@ -1,3 +1,58 @@ +@use '../utils'; + +.str-chat { + /* The border radius used for the borders of the component */ + --str-chat__dialog-menu-border-radius: var(--str-chat__border-radius-sm); + + /* The text/icon color of the component */ + --str-chat__dialog-menu-color: var(--str-chat__text-color); + + /* The background color of the component */ + --str-chat__dialog-menu-background-color: var(--str-chat__secondary-background-color); + + /* Top border of the component */ + --str-chat__dialog-menu-border-block-start: none; + + /* Bottom border of the component */ + --str-chat__dialog-menu-border-block-end: none; + + /* Left (right in RTL layout) border of the component */ + --str-chat__dialog-menu-border-inline-start: none; + + /* Right (left in RTL layout) border of the component */ + --str-chat__dialog-menu-border-inline-end: none; + + /* Box shadow applied to the component */ + --str-chat__dialog-menu-box-shadow: 0 0 8px var(--str-chat__box-shadow-color); + + /* The border radius used for the borders of an item in the message actions box */ + --str-chat__dialog-menu-button-border-radius: 0; + + /* The text/icon color of an item in the message actions box */ + --str-chat__dialog-menu-button-color: var(--str-chat__text-color); + + /* The background color of an item in the message actions box */ + --str-chat__dialog-menu-button-background-color: transparent; + + /* The background color of an item in the message actions box when hovered */ + --str-chat__dialog-menu-button-hover-background-color: var(--str-chat__secondary-surface-color); + + /* Top border of an item in the message actions box */ + --str-chat__dialog-menu-button-border-block-start: none; + + /* Bottom border of an item in the message actions box */ + --str-chat__dialog-menu-button-border-block-end: none; + + /* Left (right in RTL layout) border of an item in the message actions box */ + --str-chat__dialog-menu-button-border-inline-start: none; + + /* Right (left in RTL layout) border of an item in the message actions box */ + --str-chat__dialog-menu-button-border-inline-end: none; + + /* Box shadow applied to an item in the message actions box */ + --str-chat__dialog-menu-button-box-shadow: none; +} + .str-chat__dialog { .str-chat__dialog__title { font: var(--str-chat__subtitle-medium-text); @@ -7,14 +62,9 @@ font: var(--str-chat__subtitle-text); } - input[type=text] { - font: var(--str-chat__subtitle-text); - border-radius: 20px; - border: 1px solid var(--str-chat__primary-color); - } - .str-chat__dialog__controls { .str-chat__dialog__controls-button { + cursor: pointer; font: var(--str-chat__body-medium-text); color: var(--str-chat__primary-color); } @@ -27,4 +77,27 @@ } } } +} + +.str-chat__prompt-dialog { + input[type=text] { + font: var(--str-chat__subtitle-text); + border-radius: 20px; + border: 1px solid var(--str-chat__primary-color); + } +} + + +.str-chat__dialog-menu { + @include utils.component-layer-overrides('dialog-menu'); + + .str-chat__dialog-menu__button { + @include utils.component-layer-overrides('dialog-menu-button'); + cursor: pointer; + font: var(--str-chat__subtitle-text); + + &:hover, &:focus{ + background-color: var(--str-chat__dialog-menu-button-hover-background-color); + } + } } \ No newline at end of file From 0dab5863a642e2e458f9ea6213105d965af3ce93 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:58:28 +0200 Subject: [PATCH 09/24] fix: export DragAndDropContainer styles --- src/v2/styles/index.layout.scss | 1 + src/v2/styles/index.scss | 1 + 2 files changed, 2 insertions(+) diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index f12e1d9..14cf6c7 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -16,6 +16,7 @@ @use 'common/CTAButton/CTAButton-layout'; @use 'common/CircleFAButton/CircleFAButton-layout'; @use 'Dialog/Dialog-layout'; +@use 'DragAndDropContainer/DragAmdDropContainer-layout'; @use 'EditMessageForm/EditMessageForm-layout'; @use 'ImageCarousel/ImageCarousel-layout'; @use 'Icon/Icon-layout'; diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index 173e9bc..6e4bcf1 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -18,6 +18,7 @@ @use 'ChannelPreview/ChannelPreview-theme'; @use 'ChannelSearch/ChannelSearch-theme'; @use 'Dialog/Dialog-theme'; +@use 'DragAndDropContainer/DragAndDropContainer-theme'; @use 'EditMessageForm/EditMessageForm-theme'; @use 'Icon/Icon-theme'; @use 'ImageCarousel/ImageCarousel-theme'; From 1d09a3a525ccb4c34fcbf88637577313d45526d8 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:58:45 +0200 Subject: [PATCH 10/24] feat: add poll relevant icons --- src/v2/styles/_icons.scss | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/v2/styles/_icons.scss b/src/v2/styles/_icons.scss index 36228af..0ebafd2 100644 --- a/src/v2/styles/_icons.scss +++ b/src/v2/styles/_icons.scss @@ -5,6 +5,10 @@ --str-chat__winning-poll-option-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMjAiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS44MzMzIDQuMTY2NjdIMTQuMTY2N1YyLjVINS44MzMzM1Y0LjE2NjY3SDQuMTY2NjdDMy4yNSA0LjE2NjY3IDIuNSA0LjkxNjY3IDIuNSA1LjgzMzMzVjYuNjY2NjdDMi41IDguNzkxNjcgNC4xIDEwLjUyNSA2LjE1ODMzIDEwLjc4MzNDNi42ODMzMyAxMi4wMzMzIDcuODA4MzMgMTIuOTc1IDkuMTY2NjcgMTMuMjVWMTUuODMzM0g1LjgzMzMzVjE3LjVIMTQuMTY2N1YxNS44MzMzSDEwLjgzMzNWMTMuMjVDMTIuMTkxNyAxMi45NzUgMTMuMzE2NyAxMi4wMzMzIDEzLjg0MTcgMTAuNzgzM0MxNS45IDEwLjUyNSAxNy41IDguNzkxNjcgMTcuNSA2LjY2NjY3VjUuODMzMzNDMTcuNSA0LjkxNjY3IDE2Ljc1IDQuMTY2NjcgMTUuODMzMyA0LjE2NjY3Wk00LjE2NjY3IDYuNjY2NjdWNS44MzMzM0g1LjgzMzMzVjkuMDE2NjdDNC44NjY2NyA4LjY2NjY3IDQuMTY2NjcgNy43NSA0LjE2NjY3IDYuNjY2NjdaTTEwIDExLjY2NjdDOC42MjUgMTEuNjY2NyA3LjUgMTAuNTQxNyA3LjUgOS4xNjY2N1Y0LjE2NjY3SDEyLjVWOS4xNjY2N0MxMi41IDEwLjU0MTcgMTEuMzc1IDExLjY2NjcgMTAgMTEuNjY2N1pNMTUuODMzMyA2LjY2NjY3QzE1LjgzMzMgNy43NSAxNS4xMzMzIDguNjY2NjcgMTQuMTY2NyA5LjAxNjY3VjUuODMzMzNIMTUuODMzM1Y2LjY2NjY3WiIgZmlsbD0iIzVFNjc2RSIvPgo8L3N2Zz4K'); --str-chat__arrow-left-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE0Ljc5MTUgNy4wMDUxSDMuNjIxNDhMOC41MDE0OCAyLjEyNTFDOC44OTE0OCAxLjczNTEgOC44OTE0OCAxLjA5NTEgOC41MDE0OCAwLjcwNTA5OEM4LjExMTQ4IDAuMzE1MDk4IDcuNDgxNDggMC4zMTUwOTggNy4wOTE0OCAwLjcwNTA5OEwwLjUwMTQ4NCA3LjI5NTFDMC4xMTE0ODQgNy42ODUxIDAuMTExNDg0IDguMzE1MSAwLjUwMTQ4NCA4LjcwNTFMNy4wOTE0OCAxNS4yOTUxQzcuNDgxNDggMTUuNjg1MSA4LjExMTQ4IDE1LjY4NTEgOC41MDE0OCAxNS4yOTUxQzguODkxNDggMTQuOTA1MSA4Ljg5MTQ4IDE0LjI3NTEgOC41MDE0OCAxMy44ODUxTDMuNjIxNDggOS4wMDUxSDE0Ljc5MTVDMTUuMzQxNSA5LjAwNTEgMTUuNzkxNSA4LjU1NTEgMTUuNzkxNSA4LjAwNTFDMTUuNzkxNSA3LjQ1NTEgMTUuMzQxNSA3LjAwNTEgMTQuNzkxNSA3LjAwNTFaIiBmaWxsPSIjMDgwNzA3Ii8+Cjwvc3ZnPgo='); --str-chat__close-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTQgMTQiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTEzLjI5OTcgMC43MDk5NzFDMTIuOTA5NyAwLjMxOTk3MSAxMi4yNzk3IDAuMzE5OTcxIDExLjg4OTcgMC43MDk5NzFMNi45OTk3MyA1LjU4OTk3TDIuMTA5NzMgMC42OTk5NzFDMS43MTk3MyAwLjMwOTk3MSAxLjA4OTczIDAuMzA5OTcxIDAuNjk5NzI3IDAuNjk5OTcxQzAuMzA5NzI3IDEuMDg5OTcgMC4zMDk3MjcgMS43MTk5NyAwLjY5OTcyNyAyLjEwOTk3TDUuNTg5NzMgNi45OTk5N0wwLjY5OTcyNyAxMS44OUMwLjMwOTcyNyAxMi4yOCAwLjMwOTcyNyAxMi45MSAwLjY5OTcyNyAxMy4zQzEuMDg5NzMgMTMuNjkgMS43MTk3MyAxMy42OSAyLjEwOTczIDEzLjNMNi45OTk3MyA4LjQwOTk3TDExLjg4OTcgMTMuM0MxMi4yNzk3IDEzLjY5IDEyLjkwOTcgMTMuNjkgMTMuMjk5NyAxMy4zQzEzLjY4OTcgMTIuOTEgMTMuNjg5NyAxMi4yOCAxMy4yOTk3IDExLjg5TDguNDA5NzMgNi45OTk5N0wxMy4yOTk3IDIuMTA5OTdDMTMuNjc5NyAxLjcyOTk3IDEzLjY3OTcgMS4wODk5NyAxMy4yOTk3IDAuNzA5OTcxWiIgZmlsbD0iIzA4MDcwNyIvPgo8L3N2Zz4K'); + --str-chat__add-attachment-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjggMjgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNS4zMzMyIDcuMzMzMDdMMTIuNjY2NiA3LjMzMzA3TDEyLjY2NjYgMTIuNjY2NEw3LjMzMzI0IDEyLjY2NjRMNy4zMzMyNCAxNS4zMzMxTDEyLjY2NjYgMTUuMzMzMUwxMi42NjY2IDIwLjY2NjRMMTUuMzMzMiAyMC42NjY0TDE1LjMzMzIgMTUuMzMzMUwyMC42NjY2IDE1LjMzMzFMMjAuNjY2NiAxMi42NjY0TDE1LjMzMzIgMTIuNjY2NEwxNS4zMzMyIDcuMzMzMDdaTTEzLjk5OTkgMC42NjY0MDRDNi42Mzk5MSAwLjY2NjQwNCAwLjY2NjU3NiA2LjYzOTc0IDAuNjY2NTc3IDEzLjk5OTdDMC42NjY1NzYgMjEuMzU5NyA2LjYzOTkxIDI3LjMzMzEgMTMuOTk5OSAyNy4zMzMxQzIxLjM1OTkgMjcuMzMzMSAyNy4zMzMyIDIxLjM1OTcgMjcuMzMzMiAxMy45OTk3QzI3LjMzMzIgNi42Mzk3NCAyMS4zNTk5IDAuNjY2NDA0IDEzLjk5OTkgMC42NjY0MDRaTTEzLjk5OTkgMjQuNjY2NEM4LjExOTkxIDI0LjY2NjQgMy4zMzMyNCAxOS44Nzk3IDMuMzMzMjUgMTMuOTk5N0MzLjMzMzI0IDguMTE5NzQgOC4xMTk5MSAzLjMzMzA3IDEzLjk5OTkgMy4zMzMwN0MxOS44Nzk5IDMuMzMzMDcgMjQuNjY2NiA4LjExOTc0IDI0LjY2NjYgMTMuOTk5N0MyNC42NjY2IDE5Ljg3OTcgMTkuODc5OSAyNC42NjY0IDEzLjk5OTkgMjQuNjY2NFoiLz4KPC9zdmc+Cg=='); + --str-chat__folder-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAgMTYiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xOCAySDEwTDggMEgyQzAuOSAwIDAuMDA5OTk5OTkgMC45IDAuMDA5OTk5OTkgMkwwIDE0QzAgMTUuMSAwLjkgMTYgMiAxNkgxOEMxOS4xIDE2IDIwIDE1LjEgMjAgMTRWNEMyMCAyLjkgMTkuMSAyIDE4IDJaTTE4IDE0SDJWNEgxOFYxNFoiIC8+Cjwvc3ZnPgo='); + --str-chat__poll-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTggMTgiIGZpbGw9ImN1cnJlbnRDb2xvciIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICAgIDxwYXRoIGQ9Ik0xNiAwSDJDMC45IDAgMCAwLjkgMCAyVjE2QzAgMTcuMSAwLjkgMTggMiAxOEgxNkMxNy4xIDE4IDE4IDE3LjEgMTggMTZWMkMxOCAwLjkgMTcuMSAwIDE2IDBaTTE2IDE2SDJWMkgxNlYxNlpNNCA3SDZWMTRINFY3Wk04IDRIMTBWMTRIOFY0Wk0xMiAxMEgxNFYxNEgxMlYxMFoiLz4KPC9zdmc+'); + --str-chat__handle-icon: url('data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTYgNiIgZmlsbD0iY3VycmVuQ29sb3IiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgICA8cGF0aCBkPSJNMTYgMEgwVjJIMTZWMFpNMCA2SDE2VjRIMFY2WiIvPgo8L3N2Zz4K'); } @font-face { From ac6d6c8633540462419b58069322b272dffda8ff Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:59:26 +0200 Subject: [PATCH 11/24] fix: remove legacy message actions box positioning --- .../MessageActionsBox/MessageActionsBox-layout.scss | 9 --------- 1 file changed, 9 deletions(-) diff --git a/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss b/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss index ad4bdcd..4b954ab 100644 --- a/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss +++ b/src/v2/styles/MessageActionsBox/MessageActionsBox-layout.scss @@ -18,12 +18,3 @@ } } } - -.str-chat__message-actions-box:not(.str-chat__message-actions-box-angular) { - display: none; - z-index: 1; - - &.str-chat__message-actions-box--open { - display: block; - } -} From 9fd220d957257c321cd02b2117e60b5263ca7747 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 13:59:44 +0200 Subject: [PATCH 12/24] feat: add attachment selector styles --- .../MessageInput/MessageInput-layout.scss | 32 ++++++++-- .../MessageInput/MessageInput-theme.scss | 58 +++++++++++++++++++ 2 files changed, 86 insertions(+), 4 deletions(-) diff --git a/src/v2/styles/MessageInput/MessageInput-layout.scss b/src/v2/styles/MessageInput/MessageInput-layout.scss index 53611e7..413a70d 100644 --- a/src/v2/styles/MessageInput/MessageInput-layout.scss +++ b/src/v2/styles/MessageInput/MessageInput-layout.scss @@ -53,10 +53,6 @@ height: calc(var(--str-chat__spacing-px) * 45); cursor: pointer; - .str-chat__file-input { - display: none; - } - .str-chat__file-input-label { @include utils.flex-row-center; cursor: pointer; @@ -216,3 +212,31 @@ transform: scale(-1, 1); } } + +.str-chat__attachment-selector-actions-menu, +.str-chat__attachment-selector { + button { + @include utils.button-reset; + } +} + +.str-chat__attachment-selector { + .str-chat__attachment-selector__menu-button { + padding: 0.25rem 0.5rem; + cursor: pointer; + + .str-chat__attachment-selector__menu-button__icon { + height: 26px; + width: 26px; + } + } +} + +.str-chat__file-input { + display: none; +} + +.str-chat__attachment-selector-actions-menu { + min-width: 300px; + padding-block: 0.5rem; +} \ No newline at end of file diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/src/v2/styles/MessageInput/MessageInput-theme.scss index dc38207..e32e36b 100644 --- a/src/v2/styles/MessageInput/MessageInput-theme.scss +++ b/src/v2/styles/MessageInput/MessageInput-theme.scss @@ -168,6 +168,18 @@ /* Box shadow applied to the cooldown timer */ --str-chat__cooldown-box-shadow: none; + + /* Color applied to an icon in a button that opens attachment selector */ + --str-chat__attachment-selector-button-icon-color: var(--str-chat__text-low-emphasis-color); + + /* Color applied to an icon in a button that opens attachment selector when hovered over */ + --str-chat__attachment-selector-button-icon-color-hover: var(--str-chat__primary-color); + + /* Color applied to an attachment selector menu item icon when hovered over */ + --str-chat__attachment-selector-actions-menu-button-icon-color: var(--str-chat__primary-color); + + /* Color applied to an attachment selector menu item icon when hovered over or focused */ + --str-chat__attachment-selector-actions-menu-button-icon-color-active: var(--str-chat__primary-color); } .str-chat__message-input { @@ -282,3 +294,49 @@ } } } + +.str-chat__attachment-selector { + .str-chat__attachment-selector__menu-button { + .str-chat__attachment-selector__menu-button__icon { + background-color: var(--str-chat__attachment-selector-button-icon-color); + -webkit-mask: var(--str-chat__add-attachment-icon) no-repeat center / contain; + mask: var(--str-chat__add-attachment-icon) no-repeat center / contain; + } + &:hover { + .str-chat__attachment-selector__menu-button__icon { + background-color: var(--str-chat__attachment-selector-button-icon-color-hover); + } + } + } +} + +.str-chat__attachment-selector-actions-menu { + .str-chat__attachment-selector-actions-menu__button { + color: var(--str-chat__text-low-emphasis-color); + + .str-chat__dialog-menu__button-icon { + background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color); + } + + &:hover, &:focus { + color: var(--str-chat__text-color); + .str-chat__dialog-menu__button-icon { + background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active); + } + } + } + + .str-chat__attachment-selector-actions-menu__upload-file-button { + .str-chat__dialog-menu__button-icon { + -webkit-mask: var(--str-chat__folder-icon) no-repeat center / contain; + mask: var(--str-chat__folder-icon) no-repeat center / contain; + } + } + + .str-chat__attachment-selector-actions-menu__create-poll-button { + .str-chat__dialog-menu__button-icon { + -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain; + mask: var(--str-chat__poll-icon) no-repeat center / contain; + } + } +} \ No newline at end of file From 7567a4d509156bded84e0351695a7f6d9230c63f Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 14:00:17 +0200 Subject: [PATCH 13/24] fix: add poll UI fixes --- src/v2/styles/Poll/Poll-layout.scss | 261 ++++++++++++++++++++++------ src/v2/styles/Poll/Poll-theme.scss | 78 ++++++++- 2 files changed, 277 insertions(+), 62 deletions(-) diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index 733d79f..ea2a83f 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -53,22 +53,6 @@ color: var(--str-chat__primary-color); } } - - @media only screen and (max-device-width: 768px) { - min-width: unset; - - .str-chat__modal--open { - .str-chat__modal__close-button { - display: none; - } - - .str-chat__modal__inner { - height: 100%; - width: 100%; - inset: 0; - } - } - } } .str-chat__poll-option-list--full, @@ -76,7 +60,6 @@ .str-chat__poll-option { display: flex; flex-direction: column; - padding: 0.75rem 1rem; .str-chat__amount-bar { display: none; @@ -88,6 +71,12 @@ padding-block: 0.25rem; cursor: pointer; + &.str-chat__poll-option--full-vote-list { + cursor: default; + height: 100%; + padding: 0; + } + .str-chat__poll-option-data { flex: 1; display: flex; @@ -105,13 +94,16 @@ display: flex; } } + + .str-chat__infinite-scroll-paginator { + overflow-x: hidden; + } } .str-chat__poll-option-list--full { .str-chat__poll-option { display: flex; flex-direction: row; - padding-block: 1rem; &:nth-of-type(1) { padding-top: 1.5rem; @@ -152,6 +144,10 @@ } .str-chat__poll-actions .str-chat__modal { + .str-chat__modal__close-button { + display: none; + } + .str-chat__modal__inner { $content-offset-inline: 1rem; padding: 0; @@ -162,33 +158,6 @@ max-width: 300px; } - .str-chat__poll-modal__header { - display: flex; - align-items: center; - width: 100%; - padding: 1.25rem $content-offset-inline; - - button.str-chat__poll-modal__go-back-button, - .str-chat__poll-modal__close-button { - padding: 1rem; - background-size: 0.875rem; - background-repeat: no-repeat; - background-position: center; - } - - button.str-chat__poll-modal__go-back-button { - background-image: var(--str-chat__arrow-left-icon); - } - - .str-chat__poll-modal__close-button { - background-image: var(--str-chat__close-icon); - } - - .str-chat__poll-modal__title { - flex: 1; - } - } - .str-chat__modal__poll-answer-list, .str-chat__modal__poll-option-list, .str-chat__modal__poll-results { @@ -196,6 +165,7 @@ flex-direction: column; width: 100%; height: 100%; + min-height: 400px; } .str-chat__modal__poll-answer-list, @@ -211,26 +181,43 @@ .str-chat__modal__poll-option-list__title, .str-chat__modal__poll-results__title { - margin-bottom: 1.5rem; + margin: 0 $content-offset-inline 1.5rem; padding: 1.175rem 1rem; } + .str-chat__modal__poll-answer-list__body, + .str-chat__modal__poll-results__body { + display: flex; + flex-direction: column; + min-height: 0; + padding-bottom: 1rem; + } + .str-chat__modal__poll-option-list__body, .str-chat__poll-answer-list, - .str-chat__modal__poll-results__body { + .str-chat__modal__poll-results__option-list { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; - max-height: 100%; overflow-y: auto; + max-height: 100%; + min-height: 0; padding: 0 $content-offset-inline 1.25rem; } + .str-chat__poll-answer-list { + padding-bottom: 0; + } + .str-chat__modal__poll-option-list__body { gap: 0; } + .str-chat__poll-option__show-all-votes-button { + padding-bottom: 1rem; + } + .str-chat__poll-answer { display: flex; flex-direction: column; @@ -246,18 +233,12 @@ margin-right: 1rem; } - - .str-chat__poll-option { - .str-chat__poll-vote-listing { - margin-top: 1rem; - } - } - .str-chat__poll-option__header { display: flex; align-items: flex-start; gap: 0.25rem; width: 100%; + padding: 0.75rem 1rem; .str-chat__poll-option__option-text { flex: 1; @@ -276,6 +257,13 @@ display: flex; align-items: center; gap: calc(var(--str-chat__spacing-px) * 5); + min-width: 0; + + .str-chat__poll-vote__author__name { + @include utils.ellipsis-text; + max-width: 130px; + min-width: 0; + } } } @@ -292,11 +280,19 @@ } } +.str-chat__poll-vote-listing { + padding: 0 1rem 0.75rem; +} + .str-chat__modal__poll-results--option-detail { - .str-chat__poll-modal__title { + .str-chat__modal-header__title { padding-inline: 1rem; flex: 1; } + + .str-chat__modal__poll-results__body { + padding-inline: 1rem; + } } .str-chat__quoted-poll-preview { @@ -305,3 +301,156 @@ gap: 0.5rem; align-items: flex-start; } + +.str-chat__modal.str-chat__create-poll-modal { + .str-chat__modal__close-button { + display: none; + } + + .str-chat__modal__inner { + padding: 0; + max-height: unset; + display: block; + } + + .str-chat__poll-creation-dialog { + width: 100%; + height: 700px; + display: flex; + flex-direction: column; + + button { + @include utils.button-reset; + cursor: pointer; + } + + .str-chat__modal-header { + padding-block: 14px; + + .str-chat__modal-header__close-button { + background-image: var(--str-chat__close-icon); + background-repeat: no-repeat; + } + } + + .str-chat__dialog__body { + flex: 1 1; + padding: 1rem; + + form { + display: flex; + flex-direction: column; + gap: 2rem; + } + } + + .str-chat__form__input-fieldset { + margin: 0; + padding: 0; + } + + .str-chat__form__expandable-field { + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.5rem; + + .str-chat__form__switch-field { + padding: 0; + } + } + + + .str-chat__form__input-fieldset__values { + display: flex; + flex-direction: column; + } + + .str-chat__form__field-label { + display: block; + margin-bottom: 0.5rem; + } + + + .str-chat__form__input-field__value { + padding: 1rem; + + &.str-chat__form__input-field__value--has-error { + padding-block: 0.5rem; + } + + .str-chat__form__input-field__error { + height: 1rem; + } + + .str-chat__form__input-field__error { + width: 100%; + } + + input { + width: 100%; + } + } + + .str-chat__form__input-field__value--draggable { + display: flex; + align-items: center; + justify-content: space-between; + + .str-chat__drag-handle { + height: 1rem; + width: 1rem; + } + } + + .str-chat__form__switch-field { + width: 100%; + padding: 1rem; + + input[type='checkbox'] { + display: none; + } + + label { + display: flex; + align-items: center; + justify-content: space-between; + width: 100%; + } + + .str-chat__form__switch-field__switch { + display: flex; + align-items: center; + width: calc(var(--str-chat__spacing-px) * 52); + height: calc(var(--str-chat__spacing-px) * 32); + padding: 0.25rem; + + .str-chat__form__switch-field__switch-handle { + height: 1.5rem; + width: 1.5rem; + } + + &.str-chat__form__switch-field__switch--on { + .str-chat__form__switch-field__switch-handle { + transform: translateX(1.25rem); + } + } + } + } + } +} + +@media only screen and (max-device-width: 768px) { + .str-chat__modal--open .str-chat__modal__inner { + width: 90%; + } + + .str-chat__create-poll-modal, + .str-chat__poll-answer-list-modal, + .str-chat__poll-results-modal { + .str-chat__modal__inner { + height: 90%; + max-height: unset; + } + } +} diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss index a33deaa..b3048e7 100644 --- a/src/v2/styles/Poll/Poll-theme.scss +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -1,3 +1,8 @@ +@mixin field-background { + background-color: var(--str-chat__tertiary-surface-color); + border-radius: 0.75rem; +} + .str-chat__poll { .str-chat__poll-header { .str-chat__poll-subtitle { @@ -62,12 +67,6 @@ } .str-chat__poll-actions .str-chat__modal { - .str-chat__poll-modal__header { - .str-chat__poll-modal__title { - font: var(--str-chat__subtitle2-medium-text); - } - } - .str-chat__poll-answer__text, .str-chat__modal__poll-option-list__title, .str-chat__modal__poll-results__title { @@ -118,4 +117,71 @@ .str-chat__quoted-poll-preview { font: var(--str-chat__body-medium-text); +} + +.str-chat__poll-creation-dialog { + .str-chat__form__input-fieldset { + border: none; + } + + .str-chat__form__expandable-field, + .str-chat__form__input-field__value { + @include field-background; + + .str-chat__form__input-field__error { + font-size: 0.75rem; + color: var(--str-chat__danger-color) + } + + input { + border: none; + background: transparent; + outline: none; + + &::placeholder { + font: var(--str-chat__subtitle-text); + } + } + } + + .str-chat__form__input-field__value--draggable { + input { + pointer-events: auto; + } + + .str-chat__drag-handle { + background-color: var(--str-chat__text-low-emphasis-color); + -webkit-mask: var(--str-chat__handle-icon) no-repeat center / contain; + mask: var(--str-chat__handle-icon) no-repeat center / contain; + } + } + + + .str-chat__form__switch-field { + @include field-background; + + &, label { + cursor: pointer; + } + + .str-chat__form__switch-field__switch { + cursor: pointer; + background-color: var(--str-chat__text-low-emphasis-color); + border-radius: 100px; + + .str-chat__form__switch-field__switch-handle { + border-radius: var(--str-chat__border-radius-circle); + background-color: var(--str-chat__disabled-color); + } + + &.str-chat__form__switch-field__switch--on { + background-color: var(--str-chat__green600); + + .str-chat__form__switch-field__switch-handle { + background-color: var(--str-chat__background-color); + border-radius: var(--str-chat__border-radius-circle); + } + } + } + } } \ No newline at end of file From 5c37b53e6af69b11d879fc9cd918fbdd835cf696 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 14:01:29 +0200 Subject: [PATCH 14/24] style: fix lint issues --- src/v2/styles/MessageInput/MessageInput-theme.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/src/v2/styles/MessageInput/MessageInput-theme.scss index e32e36b..9947d43 100644 --- a/src/v2/styles/MessageInput/MessageInput-theme.scss +++ b/src/v2/styles/MessageInput/MessageInput-theme.scss @@ -302,6 +302,7 @@ -webkit-mask: var(--str-chat__add-attachment-icon) no-repeat center / contain; mask: var(--str-chat__add-attachment-icon) no-repeat center / contain; } + &:hover { .str-chat__attachment-selector__menu-button__icon { background-color: var(--str-chat__attachment-selector-button-icon-color-hover); @@ -320,6 +321,7 @@ &:hover, &:focus { color: var(--str-chat__text-color); + .str-chat__dialog-menu__button-icon { background-color: var(--str-chat__attachment-selector-actions-menu-button-icon-color-active); } From 292eddb47208de840b5aff38039484d29b1ffc56 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 15:00:44 +0200 Subject: [PATCH 15/24] fix: fix dialog listings layouts --- .../InfiniteScrollPaginator-layout.scss | 1 + src/v2/styles/Poll/Poll-layout.scss | 41 +++++++++++-------- src/v2/styles/Poll/Poll-theme.scss | 4 ++ 3 files changed, 30 insertions(+), 16 deletions(-) diff --git a/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss b/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss index f46e1f2..735c53a 100644 --- a/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss +++ b/src/v2/styles/InfiniteScrollPaginator/InfiniteScrollPaginator-layout.scss @@ -1,3 +1,4 @@ .str-chat__infinite-scroll-paginator { overflow-y: auto; + overflow-x: hidden; } \ No newline at end of file diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index ea2a83f..3a16a1d 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -55,15 +55,17 @@ } } -.str-chat__poll-option-list--full, .str-chat__modal__poll-results { .str-chat__poll-option { display: flex; flex-direction: column; + } +} - .str-chat__amount-bar { - display: none; - } +.str-chat__poll-option-list--full, +.str-chat__modal__poll-results { + .str-chat__amount-bar { + display: none; } } @@ -94,25 +96,22 @@ display: flex; } } - - .str-chat__infinite-scroll-paginator { - overflow-x: hidden; - } } .str-chat__poll-option-list--full { .str-chat__poll-option { display: flex; flex-direction: row; + padding: 0.75rem; &:nth-of-type(1) { - padding-top: 1.5rem; + padding-top: 1rem; border-top-left-radius: var(--str-chat__border-radius-sm); border-top-right-radius: var(--str-chat__border-radius-sm); } &:last-child { - padding-bottom: 1.5rem; + padding-bottom: 1rem; border-bottom-left-radius: var(--str-chat__border-radius-sm); border-bottom-right-radius: var(--str-chat__border-radius-sm); } @@ -150,7 +149,7 @@ .str-chat__modal__inner { $content-offset-inline: 1rem; - padding: 0; + padding: 0 0 0.5rem; overflow: hidden; max-width: 400px; @@ -181,7 +180,6 @@ .str-chat__modal__poll-option-list__title, .str-chat__modal__poll-results__title { - margin: 0 $content-offset-inline 1.5rem; padding: 1.175rem 1rem; } @@ -193,25 +191,36 @@ padding-bottom: 1rem; } + .str-chat__modal__poll-results__body, .str-chat__modal__poll-option-list__body, .str-chat__poll-answer-list, .str-chat__modal__poll-results__option-list { display: flex; flex-direction: column; - gap: 0.5rem; flex: 1; - overflow-y: auto; max-height: 100%; min-height: 0; - padding: 0 $content-offset-inline 1.25rem; } .str-chat__poll-answer-list { padding-bottom: 0; } + .str-chat__modal__poll-results__body, + .str-chat__modal__poll-option-list__body, + .str-chat__poll-answer-list { + overflow-y: auto; + padding: 0 $content-offset-inline 1.25rem; + } + + .str-chat__poll-answer-list, + .str-chat__modal__poll-results__option-list { + gap: 0.5rem; + } + + .str-chat__modal__poll-results__body, .str-chat__modal__poll-option-list__body { - gap: 0; + gap: 2rem; } .str-chat__poll-option__show-all-votes-button { diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss index b3048e7..c0c7cd8 100644 --- a/src/v2/styles/Poll/Poll-theme.scss +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -82,6 +82,10 @@ } .str-chat__poll-option-list--full { + .str-chat__poll-option-text { + font-weight: 500; + } + .str-chat__poll-option--votable:hover { background-color: var(--str-chat__secondary-surface-color) } From f966dfac3644370a196d9c5bb8e6e1367d4e3351 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 16:38:16 +0200 Subject: [PATCH 16/24] fix: fix drag and drop container borders on drag over --- .../DragAndDropContainer-theme.scss | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss b/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss index 418dc50..2ed4e96 100644 --- a/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss +++ b/src/v2/styles/DragAndDropContainer/DragAndDropContainer-theme.scss @@ -6,10 +6,10 @@ --str-chat__drag-and-drop-container-border-block-end: 2px solid transparent; /* Top border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-block-start: var(--str-chat__on-primary-color); + --str-chat__drag-and-drop-container-on-dragover-border-block-start: 2px solid var(--str-chat__primary-color); /* Bottom border of the component on dragover */ - --str-chat__drag-and-drop-container-on-dragover-border-block-end: var(--str-chat__on-primary-color); + --str-chat__drag-and-drop-container-on-dragover-border-block-end: 2px solid var(--str-chat__primary-color); /* Left (right in RTL layout) border of the component on dragover */ --str-chat__drag-and-drop-container-on-dragover-border-inline-start: none; @@ -35,12 +35,13 @@ .str-chat__drag-and-drop-container__item { border-bottom: var(--str-chat__drag-and-drop-container-border-block-start); border-top: var(--str-chat__drag-and-drop-container-border-block-start); -} -.str-chat__drag-and-drop-container__item--dragged-over-from-top { - border-bottom: 2px solid var(--str-chat__drag-and-drop-container-on-dragover-border-block-end); + &.str-chat__drag-and-drop-container__item--dragged-over-from-top { + border-bottom: var(--str-chat__drag-and-drop-container-on-dragover-border-block-end); + } + + &.str-chat__drag-and-drop-container__item--dragged-over-from-bottom { + border-top: var(--str-chat__drag-and-drop-container-on-dragover-border-block-start); + } } -.str-chat__drag-and-drop-container__item--dragged-over-from-bottom { - border-top: 2px solid var(--str-chat__drag-and-drop-container-on-dragover-border-block-start); -} \ No newline at end of file From 148dd6c4b55c9aff0fb1b45f81c5aae1ada7b0c3 Mon Sep 17 00:00:00 2001 From: martincupela Date: Tue, 22 Oct 2024 16:38:41 +0200 Subject: [PATCH 17/24] feat: style form errors --- src/v2/styles/Form/Form-layout.scss | 9 +++++++++ src/v2/styles/Form/Form-theme.scss | 4 ++++ src/v2/styles/Poll/Poll-theme.scss | 8 +++----- src/v2/styles/index.layout.scss | 1 + src/v2/styles/index.scss | 1 + 5 files changed, 18 insertions(+), 5 deletions(-) create mode 100644 src/v2/styles/Form/Form-layout.scss create mode 100644 src/v2/styles/Form/Form-theme.scss diff --git a/src/v2/styles/Form/Form-layout.scss b/src/v2/styles/Form/Form-layout.scss new file mode 100644 index 0000000..e2b2d07 --- /dev/null +++ b/src/v2/styles/Form/Form-layout.scss @@ -0,0 +1,9 @@ +.str-chat__dialog__field { + display: flex; + flex-direction: column; + gap: 0.5rem; + + .str-chat__form-field-error { + margin-left: 0.5rem; + } +} \ No newline at end of file diff --git a/src/v2/styles/Form/Form-theme.scss b/src/v2/styles/Form/Form-theme.scss new file mode 100644 index 0000000..550070f --- /dev/null +++ b/src/v2/styles/Form/Form-theme.scss @@ -0,0 +1,4 @@ +.str-chat__form-field-error { + font-size: 0.75rem; + color: var(--str-chat__danger-color) +} \ No newline at end of file diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss index c0c7cd8..ef70ef1 100644 --- a/src/v2/styles/Poll/Poll-theme.scss +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -132,11 +132,6 @@ .str-chat__form__input-field__value { @include field-background; - .str-chat__form__input-field__error { - font-size: 0.75rem; - color: var(--str-chat__danger-color) - } - input { border: none; background: transparent; @@ -160,6 +155,9 @@ } } + .str-chat__form__input-field__value--has-error { + border: 1px solid var(--str-chat__message-error-message-color); + } .str-chat__form__switch-field { @include field-background; diff --git a/src/v2/styles/index.layout.scss b/src/v2/styles/index.layout.scss index 14cf6c7..2242fa0 100755 --- a/src/v2/styles/index.layout.scss +++ b/src/v2/styles/index.layout.scss @@ -18,6 +18,7 @@ @use 'Dialog/Dialog-layout'; @use 'DragAndDropContainer/DragAmdDropContainer-layout'; @use 'EditMessageForm/EditMessageForm-layout'; +@use 'Form/Form-layout'; @use 'ImageCarousel/ImageCarousel-layout'; @use 'Icon/Icon-layout'; @use 'InfiniteScrollPaginator/InfiniteScrollPaginator-layout'; diff --git a/src/v2/styles/index.scss b/src/v2/styles/index.scss index 6e4bcf1..27390bb 100644 --- a/src/v2/styles/index.scss +++ b/src/v2/styles/index.scss @@ -20,6 +20,7 @@ @use 'Dialog/Dialog-theme'; @use 'DragAndDropContainer/DragAndDropContainer-theme'; @use 'EditMessageForm/EditMessageForm-theme'; +@use 'Form/Form-theme'; @use 'Icon/Icon-theme'; @use 'ImageCarousel/ImageCarousel-theme'; @use 'LinkPreview/LinkPreview-theme'; From 88d9de2ce5f498e01f30a7cea1531f32446f3474 Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 24 Oct 2024 12:09:39 +0200 Subject: [PATCH 18/24] fix: adjust poll creation from styling --- src/v2/styles/Poll/Poll-layout.scss | 70 +++++++++++++++++++---------- src/v2/styles/Poll/Poll-theme.scss | 25 +++++++++-- 2 files changed, 67 insertions(+), 28 deletions(-) diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index 3a16a1d..1646231 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -125,6 +125,7 @@ grid-template-rows: 1fr 1fr; padding-block: 0.25rem; gap: 0.125rem; + height: 40px; .str-chat__poll-option-data { @@ -157,6 +158,12 @@ max-width: 300px; } + .str-chat__modal__suggest-poll-option { + .str-chat__form-field-error { + height: 1rem; + } + } + .str-chat__modal__poll-answer-list, .str-chat__modal__poll-option-list, .str-chat__modal__poll-results { @@ -356,19 +363,54 @@ .str-chat__form__input-fieldset { margin: 0; padding: 0; + + .str-chat__form__input-field { + width: 100%; + padding: 1rem; + + .str-chat__form__input-field__value { + width: 100%; + + .str-chat__form__input-field__error { + height: 1rem; + width: 100%; + } + } + } + } + + .str-chat__form__input-field--with-label { + .str-chat__form__input-field__value { + padding: 1rem; + } + } + + .str-chat__form__input-field__value input { + width: 100%; } .str-chat__form__expandable-field { padding: 1rem; display: flex; flex-direction: column; - gap: 0.5rem; + gap: 1rem; .str-chat__form__switch-field { padding: 0; } - } + .str-chat__form__input-field { + width: 100%; + + .str-chat__form__input-field__value { + padding: 0; + + .str-chat__form-field-error { + height: 1rem; + } + } + } + } .str-chat__form__input-fieldset__values { display: flex; @@ -380,31 +422,11 @@ margin-bottom: 0.5rem; } - - .str-chat__form__input-field__value { - padding: 1rem; - - &.str-chat__form__input-field__value--has-error { - padding-block: 0.5rem; - } - - .str-chat__form__input-field__error { - height: 1rem; - } - - .str-chat__form__input-field__error { - width: 100%; - } - - input { - width: 100%; - } - } - - .str-chat__form__input-field__value--draggable { + .str-chat__form__input-field--draggable { display: flex; align-items: center; justify-content: space-between; + gap: 0.5rem; .str-chat__drag-handle { height: 1rem; diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss index ef70ef1..411daf5 100644 --- a/src/v2/styles/Poll/Poll-theme.scss +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -129,7 +129,8 @@ } .str-chat__form__expandable-field, - .str-chat__form__input-field__value { + .str-chat__form__input-field:not(.str-chat__form__input-field--with-label), + .str-chat__form__input-field--with-label .str-chat__form__input-field__value { @include field-background; input { @@ -137,13 +138,13 @@ background: transparent; outline: none; - &::placeholder { + &, & ::placeholder { font: var(--str-chat__subtitle-text); } } } - .str-chat__form__input-field__value--draggable { + .str-chat__form__input-field--draggable { input { pointer-events: auto; } @@ -155,10 +156,26 @@ } } - .str-chat__form__input-field__value--has-error { + .str-chat__form__input-field--has-error { border: 1px solid var(--str-chat__message-error-message-color); } + .str-chat__form__expandable-field .str-chat__form__input-field--has-error, { + border: none; + + .str-chat__form__input-field__value { + border: none; + } + } + + .str-chat__form__input-field--with-label.str-chat__form__input-field--has-error { + border: none; + + .str-chat__form__input-field__value { + border: 1px solid var(--str-chat__message-error-message-color); + } + } + .str-chat__form__switch-field { @include field-background; From bc5de0395627d01d7c2a163daf3fa566b159ed63 Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 24 Oct 2024 12:10:06 +0200 Subject: [PATCH 19/24] fix: make drag and drop container item expandable --- .../DragAndDropContainer/DragAmdDropContainer-layout.scss | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss b/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss index 499cb64..f3a6036 100644 --- a/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss +++ b/src/v2/styles/DragAndDropContainer/DragAmdDropContainer-layout.scss @@ -1,3 +1,5 @@ .str-chat__drag-and-drop-container__item { + display: flex; + width: 100%; padding-block: 0.25rem; } From bbab9539290865d97a6011160692f12b5ac58537 Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 24 Oct 2024 12:10:20 +0200 Subject: [PATCH 20/24] fix:hide spin buttons form input of type number --- src/v2/styles/Form/Form-theme.scss | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/src/v2/styles/Form/Form-theme.scss b/src/v2/styles/Form/Form-theme.scss index 550070f..29587ae 100644 --- a/src/v2/styles/Form/Form-theme.scss +++ b/src/v2/styles/Form/Form-theme.scss @@ -1,4 +1,17 @@ .str-chat__form-field-error { font-size: 0.75rem; color: var(--str-chat__danger-color) +} + +// hide spin buttons form input of type number +/* Chrome, Safari, Edge, Opera */ +input::-webkit-outer-spin-button, +input::-webkit-inner-spin-button { + -webkit-appearance: none; + margin: 0; +} + +/* Firefox */ +input[type=number] { + -moz-appearance: textfield; } \ No newline at end of file From b66dba44158a974066d8acad07fad6e12d558313 Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 24 Oct 2024 13:58:00 +0200 Subject: [PATCH 21/24] fix: fix options distances in option list --- src/v2/styles/Poll/Poll-layout.scss | 29 ++++++++++++++++------------- 1 file changed, 16 insertions(+), 13 deletions(-) diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index 1646231..7c2851f 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -55,13 +55,6 @@ } } -.str-chat__modal__poll-results { - .str-chat__poll-option { - display: flex; - flex-direction: column; - } -} - .str-chat__poll-option-list--full, .str-chat__modal__poll-results { .str-chat__amount-bar { @@ -70,7 +63,6 @@ } .str-chat__poll-option { - padding-block: 0.25rem; cursor: pointer; &.str-chat__poll-option--full-vote-list { @@ -98,11 +90,12 @@ } } + .str-chat__poll-option-list--full { .str-chat__poll-option { display: flex; flex-direction: row; - padding: 0.75rem; + padding: 1rem 0.75rem; &:nth-of-type(1) { padding-top: 1rem; @@ -119,14 +112,16 @@ } .str-chat__poll-option-list:not(.str-chat__poll-option-list--full) { + display: flex; + flex-direction: column; + gap: 1.5rem; + padding-block: 1rem 0.5rem; + .str-chat__poll-option { display: grid; grid-template-columns: auto 1fr; - grid-template-rows: 1fr 1fr; - padding-block: 0.25rem; + grid-template-rows: 1fr auto; gap: 0.125rem; - height: 40px; - .str-chat__poll-option-data { grid-column: 2 / 3; @@ -143,6 +138,14 @@ } } + +.str-chat__modal__poll-results { + .str-chat__poll-option { + display: flex; + flex-direction: column; + } +} + .str-chat__poll-actions .str-chat__modal { .str-chat__modal__close-button { display: none; From e1beba3c062595554cb52246b22adf5e29afc55a Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 24 Oct 2024 14:13:07 +0200 Subject: [PATCH 22/24] fix: make poll shrinkable --- src/v2/styles/Poll/Poll-layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index 7c2851f..9f69d0b 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -6,7 +6,6 @@ flex-direction: column; gap: 0.5rem; padding: 0.75rem 0.675rem; - min-width: 220px; max-width: 270px; font: var(--str-chat__body-text); From 514bc40d1bb31187032aeb6264632ff65e741e36 Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 31 Oct 2024 13:17:11 +0100 Subject: [PATCH 23/24] fix: remove field error height in poll forms --- src/v2/styles/Poll/Poll-layout.scss | 1 - 1 file changed, 1 deletion(-) diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index 9f69d0b..f6c4b8d 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -374,7 +374,6 @@ width: 100%; .str-chat__form__input-field__error { - height: 1rem; width: 100%; } } From 7c70e6a2b3805e3d66fd4877338096da67602814 Mon Sep 17 00:00:00 2001 From: martincupela Date: Thu, 31 Oct 2024 13:18:52 +0100 Subject: [PATCH 24/24] fix: fix selector --- src/v2/styles/Poll/Poll-theme.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/styles/Poll/Poll-theme.scss b/src/v2/styles/Poll/Poll-theme.scss index 411daf5..54d24dc 100644 --- a/src/v2/styles/Poll/Poll-theme.scss +++ b/src/v2/styles/Poll/Poll-theme.scss @@ -138,7 +138,7 @@ background: transparent; outline: none; - &, & ::placeholder { + &, &::placeholder { font: var(--str-chat__subtitle-text); } }