From d87cd907481e0e5c57e6b7d92a10e428e688116b Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Mon, 29 Sep 2025 09:20:16 +0200 Subject: [PATCH 1/2] feat(stream-chat-angular): Polls for Angular --- src/v2/styles/Dialog/Dialog-layout.scss | 15 ++++++-- src/v2/styles/Icon/Icon-layout.scss | 6 ++++ src/v2/styles/Icon/Icon-theme.scss | 4 +++ .../MessageInput/MessageInput-layout.scss | 8 +++++ .../MessageInput/MessageInput-theme.scss | 3 +- src/v2/styles/Poll/Poll-layout.scss | 36 +++++++++++++++---- 6 files changed, 61 insertions(+), 11 deletions(-) diff --git a/src/v2/styles/Dialog/Dialog-layout.scss b/src/v2/styles/Dialog/Dialog-layout.scss index aa434412..b283ff87 100644 --- a/src/v2/styles/Dialog/Dialog-layout.scss +++ b/src/v2/styles/Dialog/Dialog-layout.scss @@ -18,7 +18,6 @@ .str-chat__dialog__title { margin-bottom: 1rem; } - } .str-chat__dialog__controls { @@ -33,8 +32,18 @@ } } +.str-chat-angular__dialog-body { + &.str-chat__dialog__body { + padding: 0; + } + + .str-chat__dialog__controls { + padding-bottom: 0; + } +} + .str-chat__prompt-dialog { - input[type=text] { + input[type='text'] { width: 100%; padding: 0.625rem 1rem; } @@ -58,4 +67,4 @@ padding-inline: 0.675rem; } } -} \ No newline at end of file +} diff --git a/src/v2/styles/Icon/Icon-layout.scss b/src/v2/styles/Icon/Icon-layout.scss index 2723d08d..45e697fb 100644 --- a/src/v2/styles/Icon/Icon-layout.scss +++ b/src/v2/styles/Icon/Icon-layout.scss @@ -30,6 +30,12 @@ content: url('data:image/svg+xml;base64,PHN2ZwogIGNsYXNzPSJyZnUtZmlsZS1hdWRpbyIKICBmaWxsPSJub25lIgogIHZpZXdCb3g9IjAgMCAzNCA0MCIKICB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgaGVpZ2h0PSIyMCIKICB3aWR0aD0iMjAiCj4KICA8cGF0aAogICAgY2xpcC1ydWxlPSJldmVub2RkIgogICAgZD0iTTE3LjcxNjggMzMuMTcyQzE4LjIzNDggMzMuMTcyIDE4LjQyMzggMzMuNjU1IDE4LjQyMzggMzQuMThDMTguNDIzOCAzNC42NDIgMTguMjk3OCAzNS4xOTUgMTcuNzE2OCAzNS4xOTVDMTcuMTcwOCAzNS4xOTUgMTYuOTg4OCAzNC42NDIgMTYuOTg4OCAzNC4xNDVDMTYuOTg4OCAzMy42ODMgMTcuMTcwOCAzMy4xNzIgMTcuNzE2OCAzMy4xNzJaTTE5LjU3MTggMzEuMDAySDE4LjM4MThWMzIuNzU4OUgxOC4zNjc4QzE4LjEyMjggMzIuNDMgMTcuNzc5OCAzMi4yNjIgMTcuMzMxOCAzMi4yNjJDMTYuMzAyOCAzMi4yNjIgMTUuNzk4OCAzMy4xNTggMTUuNzk4OCAzNC4xMDNDMTUuNzk4OCAzNS4xMjUgMTYuMjgxOCAzNi4xMDQ5IDE3LjQyMjggMzYuMTA0OUMxNy44NDI4IDM2LjEwNDkgMTguMTkyOCAzNS45MjMgMTguNDIzOCAzNS41OEgxOC40Mzc4VjM2SDE5LjU3MThWMzEuMDAyWk0xMi43MDk1IDM0LjE4NzJDMTIuNzA5NSAzMy43MjUyIDEyLjg3NzUgMzMuMTcyMiAxMy40MzA1IDMzLjE3MjJDMTMuOTgzNSAzMy4xNzIyIDE0LjE1ODUgMzMuNzI1MiAxNC4xNTg1IDM0LjE4NzJDMTQuMTU4NSAzNC42NDkyIDEzLjk4MzUgMzUuMTk1MiAxMy40MzA1IDM1LjE5NTJDMTIuODc3NSAzNS4xOTUyIDEyLjcwOTUgMzQuNjQ5MiAxMi43MDk1IDM0LjE4NzJaTTExLjUxOTUgMzQuMTg3MkMxMS41MTk1IDM1LjI3OTIgMTIuMzAzNSAzNi4xMDUyIDEzLjQzMDUgMzYuMTA1MkMxNC41NTc1IDM2LjEwNTIgMTUuMzQ4NSAzNS4yNzkyIDE1LjM0ODUgMzQuMTg3MkMxNS4zNDg1IDMzLjA5NTIgMTQuNTU3NSAzMi4yNjIyIDEzLjQzMDUgMzIuMjYyMkMxMi4zMDM1IDMyLjI2MjIgMTEuNTE5NSAzMy4wOTUyIDExLjUxOTUgMzQuMTg3MlpNMjEuODM5IDMyLjM2NzFIMjIuNTc0VjMzLjEzNzFIMjEuODM5VjM0Ljc4OTFDMjEuODM5IDM1LjA3NjEgMjIuMDA3IDM1LjEzOTEgMjIuMjY2IDM1LjEzOTFDMjIuMzE0MiAzNS4xMzkxIDIyLjM2NCAzNS4xMzU3IDIyLjQxNDcgMzUuMTMyM0MyMi40NjcyIDM1LjEyODcgMjIuNTIwNiAzNS4xMjUxIDIyLjU3NCAzNS4xMjUxVjM2LjAwMDFDMjIuNDgxIDM2LjAwMzEgMjIuMzg4IDM2LjAwOTkgMjIuMjk1IDM2LjAxNjhDMjIuMTcxIDM2LjAyNTkgMjIuMDQ3IDM2LjAzNTEgMjEuOTIzIDM2LjAzNTFDMjAuOTA4IDM2LjAzNTEgMjAuNjQ5IDM1Ljc0MTEgMjAuNjQ5IDM0Ljc1NDFWMzMuMTM3MUgyMC4wNDdWMzIuMzY3MUgyMC42NDlWMzEuMjY4MUgyMS44MzlWMzIuMzY3MVoiCiAgICBmaWxsPSJ3aGl0ZSIKICAgIGZpbGwtcnVsZT0iZXZlbm9kZCIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBkPSJNMCAyOEgzNFYzN0MzNCAzOC42NTY5IDMyLjY1NjkgNDAgMzEgNDBIM0MxLjM0MzE1IDQwIDAgMzguNjU2OSAwIDM3VjI4WiIKICAgIGZpbGw9IiMyNzI3QjAiCiAgPjwvcGF0aD4KICA8cGF0aCBkPSJNMCAzQzAgMS4zNDMxNSAxLjM0MzE1IDAgMyAwSDIzTDM0IDExVjI4SDBWM1oiIGZpbGw9IiNGNUY1RjUiPjwvcGF0aD4KICA8cGF0aAogICAgZD0iTTM0IDExTDI2IDExQzI0LjM0MzEgMTEgMjMgOS42NTY4NSAyMyA4VjBMMzQgMTFaIgogICAgZmlsbD0iI0RCREJEQiIKICA+PC9wYXRoPgogIDxwYXRoCiAgICBjbGlwLXJ1bGU9ImV2ZW5vZGQiCiAgICBkPSJNOC44NzkxMiAyMS45NDFIMTIuMjk4TDE2Ljk1MjEgMjQuNzQ5M0MxNy4wMzA3IDI0LjgxMzggMTcuMTI5MyAyNC44NDkgMTcuMjMxMSAyNC44NDlDMTcuNDczOCAyNC44NDg4IDE3LjY3MDUgMjQuNjUxOSAxNy42NzAzIDI0LjQwOTJWMTIuNDM5OUMxNy42NzA0IDEyLjMzODEgMTcuNjM1MiAxMi4yMzk2IDE3LjU3MDcgMTIuMTYwOUMxNy40MTY4IDExLjk3MzIgMTcuMTM5OCAxMS45NDU3IDE2Ljk1MjEgMTIuMDk5NkwxMi4yOTggMTQuOTA4SDguODc5MTJDOC4zOTM2IDE0LjkwOCA4IDE1LjMwMTYgOCAxNS43ODcxVjIxLjA2MTlDOCAyMS41NDc0IDguMzkzNiAyMS45NDEgOC44NzkxMiAyMS45NDFaTTEyLjkyNTggMTYuNjY2NEwxNS45MTIyIDE1LjIyMjRWMjEuNjI2OEwxMi45MjU4IDIwLjE4MjlIOS43NTgzVjE2LjY2NjRIMTIuOTI1OFpNMTkuODUxMSAxNi4zNTE3QzE5LjQ3NCAxNi40MDkyIDE5LjIzOTcgMTYuNjYzNyAxOS4zMjgzIDE2LjkxOTFMMTkuMzI2MiAxNi45MkMxOS41Mjk1IDE3LjQ5OTUgMTkuNjMwNSAxOC4wOTggMTkuNjI4NCAxOC42OTUzQzE5LjYzMDUgMTkuMjk3NSAxOS41MjM3IDE5LjkwMTQgMTkuMzE5NiAyMC40OTA5QzE5LjIyOSAyMC43NDYyIDE5LjQ2ODIgMjAuOTk5NiAxOS44NDc0IDIxLjA2QzE5LjkwMDggMjEuMDY4MyAxOS45NTQyIDIxLjA3MiAyMC4wMDc2IDIxLjA3MkMyMC4zMjU5IDIxLjA3MiAyMC42MTU2IDIwLjkyMzQgMjAuNjkyMiAyMC43MDU3QzIwLjkxOTQgMjAuMDQ1MSAyMS4wMzM3IDE5LjM3IDIxLjAzNzQgMTguNjk1M0MyMS4wMzQ5IDE4LjAyNTEgMjAuOTIxMSAxNy4zNTc1IDIwLjY5NTUgMTYuNzAzNUMyMC42MDUzIDE2LjQ0NzcgMjAuMjI5IDE2LjI5MDggMTkuODUxMSAxNi4zNTE3Wk0yMi4xNjA1IDE0LjYwMjhDMjIuNTI1MiAxNC41MTYzIDIyLjkyNTkgMTQuNjQ1NCAyMy4wNTUgMTQuODkzOEMyMy42ODkxIDE2LjExNTcgMjQgMTcuNDA0MiAyNCAxOC42OTIzQzI0LjAwMDQgMTkuOTg5NSAyMy42Nzk2IDIxLjI4MzkgMjMuMDUyMSAyMi41MTUzQzIyLjk1MDMgMjIuNzEyMyAyMi42NzYzIDIyLjgzNDQgMjIuMzgyOCAyMi44MzQ0QzIyLjMwNzEgMjIuODM0NCAyMi4yMzAxIDIyLjgyNjEgMjIuMTU0MyAyMi44MDkyQzIxLjc4NjMgMjIuNzI1MSAyMS41OTE0IDIyLjQ1MzYgMjEuNzE4NSAyMi4yMDc3QzIyLjI5ODggMjEuMDc2MSAyMi41OTIyIDE5Ljg4MzYgMjIuNTkzMSAxOC42OTE5QzIyLjU5MzEgMTcuNTA1NiAyMi4zMDU0IDE2LjMyMjIgMjEuNzI3NiAxNS4yMDI1QzIxLjYwMDEgMTQuOTU2MyAyMS43OTUgMTQuNjg2IDIyLjE2MDUgMTQuNjAyOFoiCiAgICBmaWxsPSIjMjcyN0IwIgogICAgZmlsbC1ydWxlPSJldmVub2RkIgogID48L3BhdGg+Cjwvc3ZnPg=='); } +.str-chat__icon--poll { + -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain; + mask: var(--str-chat__poll-icon) no-repeat center / contain; + --str-chat-icon-width: var(--str-chat-icon-height); +} + .str-chat__icon--action::before { content: '\e800'; } /* '' */ diff --git a/src/v2/styles/Icon/Icon-theme.scss b/src/v2/styles/Icon/Icon-theme.scss index 3daad312..c4a857a6 100644 --- a/src/v2/styles/Icon/Icon-theme.scss +++ b/src/v2/styles/Icon/Icon-theme.scss @@ -11,3 +11,7 @@ .str-chat__icon--error { --str-chat-icon-color: var(--str-chat__danger-color); } + +.str-chat__icon--poll { + background-color: var(--str-chat-icon-color); +} diff --git a/src/v2/styles/MessageInput/MessageInput-layout.scss b/src/v2/styles/MessageInput/MessageInput-layout.scss index 336a740c..8efd87e1 100644 --- a/src/v2/styles/MessageInput/MessageInput-layout.scss +++ b/src/v2/styles/MessageInput/MessageInput-layout.scss @@ -46,6 +46,14 @@ } } + .str-chat-angular__create-poll { + --str-chat-icon-height: calc(var(--str-chat__spacing-px) * 21); + @include utils.flex-row-center; + width: calc(var(--str-chat__spacing-px) * 45); + height: calc(var(--str-chat__spacing-px) * 45); + cursor: pointer; + } + .str-chat__message-textarea-container { @include utils.flex-col-center; width: 100%; diff --git a/src/v2/styles/MessageInput/MessageInput-theme.scss b/src/v2/styles/MessageInput/MessageInput-theme.scss index c065e499..5d60be0c 100644 --- a/src/v2/styles/MessageInput/MessageInput-theme.scss +++ b/src/v2/styles/MessageInput/MessageInput-theme.scss @@ -178,7 +178,8 @@ .str-chat__message-input { @include utils.component-layer-overrides('message-input'); - .str-chat__file-input-container { + .str-chat__file-input-container, + .str-chat-angular__create-poll { --str-chat-icon-color: var(--str-chat__message-input-tools-color); @include utils.component-layer-overrides('message-input-tools'); diff --git a/src/v2/styles/Poll/Poll-layout.scss b/src/v2/styles/Poll/Poll-layout.scss index 8b158525..675864e5 100644 --- a/src/v2/styles/Poll/Poll-layout.scss +++ b/src/v2/styles/Poll/Poll-layout.scss @@ -45,7 +45,6 @@ display: flex; flex-direction: column; align-items: center; - } } @@ -66,8 +65,6 @@ } } - - .str-chat__poll-option-list--full, .str-chat__modal__poll-results { .str-chat__amount-bar { @@ -103,7 +100,6 @@ } } - .str-chat__poll-option-list--full { .str-chat__poll-option { display: flex; @@ -151,7 +147,6 @@ } } - .str-chat__modal__poll-results { .str-chat__poll-option { display: flex; @@ -159,11 +154,15 @@ } } -.str-chat-react__modal.str-chat__poll-action-modal, .str-chat__poll-actions .str-chat__modal { +.str-chat-react__modal.str-chat__poll-action-modal, +.str-chat__poll-actions:not(.str-chat-angular__poll-actions) .str-chat__modal { .str-chat__modal__close-button { display: none; } +} +.str-chat-react__modal.str-chat__poll-action-modal, +.str-chat__poll-actions .str-chat__modal { .str-chat__modal__inner { $content-offset-inline: 1rem; padding: 0 0 0.5rem; @@ -334,6 +333,7 @@ align-items: flex-start; } +.str-chat-angular__create-poll-modal .str-chat__modal, .str-chat__modal.str-chat__create-poll-modal { .str-chat__modal__close-button { display: none; @@ -415,7 +415,7 @@ } .str-chat__form__input-field { - width: 100%; + width: 100%; .str-chat__form__input-field__value { padding: 0; @@ -465,3 +465,25 @@ } } } + +.str-chat-angular__poll-actions { + .str-chat__modal__poll-option-list { + max-height: 100%; + min-height: 0; + display: flex; + flex-direction: column; + + .str-chat__modal__poll-option-list__body { + max-height: 100%; + min-height: 0; + display: flex; + flex-direction: column; + + stream-poll-options-list { + height: 100%; + overflow-y: auto; + overflow-x: hidden; + } + } + } +} From 6002d6d677e8ed72488adc4d0325af75e47641b5 Mon Sep 17 00:00:00 2001 From: Zita Szupera Date: Mon, 29 Sep 2025 09:22:58 +0200 Subject: [PATCH 2/2] Fix lint issue --- src/v2/styles/Icon/Icon-layout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/styles/Icon/Icon-layout.scss b/src/v2/styles/Icon/Icon-layout.scss index 45e697fb..e819a199 100644 --- a/src/v2/styles/Icon/Icon-layout.scss +++ b/src/v2/styles/Icon/Icon-layout.scss @@ -31,9 +31,9 @@ } .str-chat__icon--poll { + --str-chat-icon-width: var(--str-chat-icon-height); -webkit-mask: var(--str-chat__poll-icon) no-repeat center / contain; mask: var(--str-chat__poll-icon) no-repeat center / contain; - --str-chat-icon-width: var(--str-chat-icon-height); } .str-chat__icon--action::before {