From 80d8cfda1c75e560840a2ee6ac08e6c554d87060 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?= Date: Fri, 5 Jan 2024 17:27:18 -0500 Subject: [PATCH] move btn-ghost to core remove "btn-outline", it can be replaced with "btn-ghost border" move chats templates and css from harmony to core, persona nd peace will use same templates --- public/scss/admin/common.scss | 14 +- public/scss/btn-ghost.scss | 51 +++++++ public/scss/chats.scss | 127 ++++++++++++++++++ public/scss/client.scss | 2 + src/views/chat.tpl | 37 +++++ src/views/chats.tpl | 54 ++++++++ src/views/partials/chats/add-reaction.tpl | 1 + src/views/partials/chats/composer.tpl | 27 ++++ src/views/partials/chats/dropdown.tpl | 10 ++ src/views/partials/chats/message-window.tpl | 43 ++++++ src/views/partials/chats/message.tpl | 73 ++++++++++ src/views/partials/chats/messages.tpl | 7 + src/views/partials/chats/options.tpl | 100 ++++++++++++++ src/views/partials/chats/parent.tpl | 13 ++ .../partials/chats/pinned-messages-list.tpl | 32 +++++ src/views/partials/chats/pinned-messages.tpl | 12 ++ src/views/partials/chats/reactions.tpl | 1 + src/views/partials/chats/recent_room.tpl | 55 ++++++++ src/views/partials/chats/scroll-up-alert.tpl | 3 + src/views/partials/chats/system-message.tpl | 7 + src/views/partials/chats/user-list.tpl | 11 ++ src/views/partials/chats/user.tpl | 1 + 22 files changed, 668 insertions(+), 13 deletions(-) create mode 100644 public/scss/btn-ghost.scss create mode 100644 public/scss/chats.scss create mode 100644 src/views/chat.tpl create mode 100644 src/views/chats.tpl create mode 100644 src/views/partials/chats/add-reaction.tpl create mode 100644 src/views/partials/chats/composer.tpl create mode 100644 src/views/partials/chats/dropdown.tpl create mode 100644 src/views/partials/chats/message-window.tpl create mode 100644 src/views/partials/chats/message.tpl create mode 100644 src/views/partials/chats/messages.tpl create mode 100644 src/views/partials/chats/options.tpl create mode 100644 src/views/partials/chats/parent.tpl create mode 100644 src/views/partials/chats/pinned-messages-list.tpl create mode 100644 src/views/partials/chats/pinned-messages.tpl create mode 100644 src/views/partials/chats/reactions.tpl create mode 100644 src/views/partials/chats/recent_room.tpl create mode 100644 src/views/partials/chats/scroll-up-alert.tpl create mode 100644 src/views/partials/chats/system-message.tpl create mode 100644 src/views/partials/chats/user-list.tpl create mode 100644 src/views/partials/chats/user.tpl diff --git a/public/scss/admin/common.scss b/public/scss/admin/common.scss index b99da61b94..945c5b89e3 100644 --- a/public/scss/admin/common.scss +++ b/public/scss/admin/common.scss @@ -51,18 +51,6 @@ } } -.btn-outline { - @include btn-ghost-base(); - border-color: $border-color; -} - -.btn-outline-sm { - @include btn-ghost-base(); - border-color: $border-color; - font-size: 0.875rem; - line-height: 1.25rem; -} - @include color-mode(dark) { .btn-light { @extend .btn-dark; @@ -70,7 +58,7 @@ .text-bg-light { @extend .text-bg-dark; } - .btn-ghost, .btn-ghost-sm, .btn-outline, .btn-outline-sm { + .btn-ghost, .btn-ghost-sm { color: $btn-ghost-color-dark; &:hover, &.active { background-color: $btn-ghost-hover-color-dark; diff --git a/public/scss/btn-ghost.scss b/public/scss/btn-ghost.scss new file mode 100644 index 0000000000..fc1a99e76e --- /dev/null +++ b/public/scss/btn-ghost.scss @@ -0,0 +1,51 @@ +$btn-ghost-hover-color: mix($light, $dark, 90%); +$btn-ghost-active-color: lighten($btn-ghost-hover-color, 5%); +$btn-ghost-hover-color-dark: mix($dark, $light, 90%); +$btn-ghost-active-color-dark: lighten($btn-ghost-hover-color-dark, 5%); + +:root { + --btn-ghost-hover-color: #{$btn-ghost-hover-color}; + --btn-ghost-active-color: #{$btn-ghost-active-color}; +} +[data-bs-theme="dark"] { + --btn-ghost-hover-color: #{$btn-ghost-hover-color-dark}; + --btn-ghost-active-color: #{$btn-ghost-active-color-dark}; +} + +@mixin btn-ghost-base { + display: flex; + align-items: center; + justify-content: center; + gap: ($spacer * 0.5); + border-radius: $border-radius-sm; + border-width: 1px; + border-color: transparent; + background-color: transparent; + box-shadow: none; + padding: ($spacer * 0.25) ($spacer * 0.5); + text-align: left; + --bs-text-opacity: 1; + color: inherit !important; + cursor: pointer; + &:hover, &.active { + background-color: var(--btn-ghost-hover-color); + text-decoration: none; + } +} + +.btn-ghost { + @include btn-ghost-base(); + line-height: 1.5rem; + > i { + line-height: 1.5rem; + } +} + +.btn-ghost-sm { + @include btn-ghost-base(); + font-size: 0.875rem; + line-height: 1.25rem; + > i { + line-height: 1.25rem; + } +} \ No newline at end of file diff --git a/public/scss/chats.scss b/public/scss/chats.scss new file mode 100644 index 0000000000..e9bd116a90 --- /dev/null +++ b/public/scss/chats.scss @@ -0,0 +1,127 @@ +// chats need a bit of css + +.stacked-avatars { + width: 32px; + height: 32px; + span:first-child { + top: 0; + left: 8px; + } + span:last-child { + left: 0; + top: 8px; + } +} + +body.page-user-chats { + #content { + max-width: 100%; + margin-bottom: 0!important; + } + overflow: hidden; + [data-widget-area="footer"] { + display: none; + } + height: 100%; +} + +[component="chat/recent"] { + .active .chat-room-btn { + background-color: var(--btn-ghost-hover-color); + } +} + +[component="chat/nav-wrapper"] { + width: 300px; + [component="chat/public/room"].unread { + font-weight: $font-weight-bold; + } +} + +[component="chat/user/list"] [data-uid] { + [component="chat/user/list/username"] { + color: $text-muted; + } + &.online { + [component="chat/user/list/username"] { + color: initial; + font-weight: $font-weight-semibold; + } + } +} + +.expanded-chat { + .chat-content { + .message-body { + @include fix-lists; + } + + .chat-message { + .message-body-wrapper { + .controls { + opacity: 0; + transition: $transition-fade; + &:has([aria-expanded="true"]) { opacity: 1; } + [data-action="restore"], [data-action="unpin"] { display: none; } + } + &:hover { + .controls { opacity: 1; } + } + } + &.deleted { + .message-body { opacity: 0.3; } + .message-body-wrapper .controls { + [data-action] { display: none; } + [data-action="restore"] { display: block; } + } + } + &.pinned { + .message-body-wrapper .controls { + [data-action="pin"] { display: none; } + [data-action="unpin"] { display: block;} + } + } + } + } +} + +/* Mobile handling of chat page */ +@include media-breakpoint-down(lg) { + .page-user-chats.chat-loaded { + padding-bottom: 4.75rem; + } +} + +@include media-breakpoint-down(md) { + .page-user-chats.chat-loaded { + padding-bottom: initial; + } + [component="chat/nav-wrapper"] { + width: 100%; + } + + + .page-user-chats.chat-loaded .bottombar { + display: none!important; + } + + [component="chat/nav-wrapper"][data-loaded="1"] { + display: none!important; + } + + [component="chat/nav-wrapper"][data-loaded="0"] + [component="chat/main-wrapper"] { + display: none!important; + } +} + +.chat-modal { + left: auto; + top: auto; + bottom: 0px; + right: 2rem; + width: auto!important; + height: auto!important; + [component="chat/user/list/btn"], [component="chat/pinned/messages/btn"] { + display: none!important; + } +} diff --git a/public/scss/client.scss b/public/scss/client.scss index 3d134ceb42..3bcd1bd080 100644 --- a/public/scss/client.scss +++ b/public/scss/client.scss @@ -1,7 +1,9 @@ // core scss files shared by all themes @import "flags"; +@import "chats"; @import "global"; @import "modals"; +@import "btn-ghost"; @import "modules/picture-switcher"; @import "modules/bottom-sheet"; @import "modules/icon-picker"; diff --git a/src/views/chat.tpl b/src/views/chat.tpl new file mode 100644 index 0000000000..c4b673088c --- /dev/null +++ b/src/views/chat.tpl @@ -0,0 +1,37 @@ + diff --git a/src/views/chats.tpl b/src/views/chats.tpl new file mode 100644 index 0000000000..23db9e49fc --- /dev/null +++ b/src/views/chats.tpl @@ -0,0 +1,54 @@ +
+
+ +
+ +
+ + {{{ if publicRooms.length }}} +
+ +
+
+ + +
+
+
+ {{{ each publicRooms }}} +
+
{./roomName}
{./unreadCountText}
+
+
+
+
+ {{{ end }}} +
+
+
+ {{{ end }}} + +
+ +
+ {{{ if publicRooms.length }}} +
+ + +
+ {{{ end }}} + +
+ {{{each rooms}}} + + {{{end}}} +
+
+
+
+ +
+
[[topic:composer.drag-and-drop-images]]
+
\ No newline at end of file diff --git a/src/views/partials/chats/add-reaction.tpl b/src/views/partials/chats/add-reaction.tpl new file mode 100644 index 0000000000..c8f127e786 --- /dev/null +++ b/src/views/partials/chats/add-reaction.tpl @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/partials/chats/composer.tpl b/src/views/partials/chats/composer.tpl new file mode 100644 index 0000000000..cae9634f9a --- /dev/null +++ b/src/views/partials/chats/composer.tpl @@ -0,0 +1,27 @@ +
+ +
+ +
+ +
+
+ {{{ each composerActions }}} + + {{{ end }}} + +
+
+
+
+ + +
+
{maximumChatMessageLength}
+
+ +
\ No newline at end of file diff --git a/src/views/partials/chats/dropdown.tpl b/src/views/partials/chats/dropdown.tpl new file mode 100644 index 0000000000..6524ee5dcb --- /dev/null +++ b/src/views/partials/chats/dropdown.tpl @@ -0,0 +1,10 @@ +{{{ if !rooms.length }}} +
  • +
    +
    [[modules:chat.no-active]]
    +
    • +{{{ end }}} + +{{{ each rooms }}} + +{{{ end }}} \ No newline at end of file diff --git a/src/views/partials/chats/message-window.tpl b/src/views/partials/chats/message-window.tpl new file mode 100644 index 0000000000..26c95c3d9a --- /dev/null +++ b/src/views/partials/chats/message-window.tpl @@ -0,0 +1,43 @@ +
    + {{{ if widgets.header.length }}} +
    + {{{each widgets.header}}} + {{widgets.header.html}} + {{{end}}} +
    + {{{ end }}} + {{{ if !roomId }}} +
    + + [[modules:chat.no-active]] +
    + {{{ else }}} +
    + +
    + {{{ if ./roomName }}} {roomName}{{{ else }}}{./chatWithMessage}{{{ end}}} +
    + + +
    + +
    +
    +
    +
      + +
    + + +
    + + + +
    + {{{ end }}} +
    \ No newline at end of file diff --git a/src/views/partials/chats/message.tpl b/src/views/partials/chats/message.tpl new file mode 100644 index 0000000000..b0bb0d0e76 --- /dev/null +++ b/src/views/partials/chats/message.tpl @@ -0,0 +1,73 @@ +
  • + + {{{ if messages.parent }}} + + {{{ end }}} + +
    + {buildAvatar(messages.fromUser, "18px", true, "not-responsive")} + {messages.fromUser.displayname} + {{{ if messages.fromUser.banned }}} + [[user:banned]] + {{{ end }}} + {{{ if messages.fromUser.deleted }}} + [[user:deleted]] + {{{ end }}} + + +
    +
    +
    +
    + {messages.content} +
    + +
    +
    + + + +
    + + +
    +
    +
    +
    +
    • \ No newline at end of file diff --git a/src/views/partials/chats/messages.tpl b/src/views/partials/chats/messages.tpl new file mode 100644 index 0000000000..d59cce50a5 --- /dev/null +++ b/src/views/partials/chats/messages.tpl @@ -0,0 +1,7 @@ +{{{each messages}}} + {{{ if !./system }}} + + {{{ else }}} + + {{{ end }}} +{{{end}}} \ No newline at end of file diff --git a/src/views/partials/chats/options.tpl b/src/views/partials/chats/options.tpl new file mode 100644 index 0000000000..1500439a02 --- /dev/null +++ b/src/views/partials/chats/options.tpl @@ -0,0 +1,100 @@ +
    + + + + + + +
    + + +
    + + + + + +
    + + +
    + + + {{{ if users.length }}} +
    +
    + {{{ if ./users.0 }}} + {buildAvatar(./users.0, "24px", true)} + {{{ end }}} + {{{ if ./users.1 }}} + {buildAvatar(./users.1, "24px", true)} + {{{ end }}} + {{{ if ./users.2 }}} + {buildAvatar(./users.2, "24px", true)} + {{{ end }}} +
    + {./userCount} +
    + {{{ end }}} +
    diff --git a/src/views/partials/chats/parent.tpl b/src/views/partials/chats/parent.tpl new file mode 100644 index 0000000000..5f76398846 --- /dev/null +++ b/src/views/partials/chats/parent.tpl @@ -0,0 +1,13 @@ +
    +
    +
    +
    +
    + {buildAvatar(messages.parent.user, "14px", true, "not-responsive align-middle")} + {messages.parent.user.displayname} +
    + +
    +
    {messages.parent.content}
    +
    +
    \ No newline at end of file diff --git a/src/views/partials/chats/pinned-messages-list.tpl b/src/views/partials/chats/pinned-messages-list.tpl new file mode 100644 index 0000000000..7fbe978328 --- /dev/null +++ b/src/views/partials/chats/pinned-messages-list.tpl @@ -0,0 +1,32 @@ +{{{ each messages }}} +
  • + + {{{ if messages.parent }}} + + {{{ end }}} + +
    + {buildAvatar(messages.fromUser, "18px", true, "not-responsive")} + {messages.fromUser.displayname} + + +
    +
    +
    +
    + {messages.content} +
    +
    +
    + {{{ if (isAdminOrGlobalMod || (!config.disableChatMessageEditing && messages.self)) }}} + + {{{ end }}} + {{{ if (isAdminOrGlobalMod || isOwner )}}} + + + {{{ end }}} +
    +
    +
    +
    • +{{{ end }}} \ No newline at end of file diff --git a/src/views/partials/chats/pinned-messages.tpl b/src/views/partials/chats/pinned-messages.tpl new file mode 100644 index 0000000000..20d33f9c1d --- /dev/null +++ b/src/views/partials/chats/pinned-messages.tpl @@ -0,0 +1,12 @@ + diff --git a/src/views/partials/chats/reactions.tpl b/src/views/partials/chats/reactions.tpl new file mode 100644 index 0000000000..c8f127e786 --- /dev/null +++ b/src/views/partials/chats/reactions.tpl @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/views/partials/chats/recent_room.tpl b/src/views/partials/chats/recent_room.tpl new file mode 100644 index 0000000000..92c50bcd4e --- /dev/null +++ b/src/views/partials/chats/recent_room.tpl @@ -0,0 +1,55 @@ +{{{ if (loadingMore && @first)}}} +
    +{{{ end }}} +
    +
    +
    +
    + {{{ if ./users.length }}} + {{{ if ./groupChat}}} +
    + {buildAvatar(./users.1, "24px", true)} + {buildAvatar(./users.0, "24px", true)} +
    + {{{ else }}} + {buildAvatar(./users.0, "32px", true)} + {{{ end }}} + {{{ else }}} + ? + {{{ end }}} +
    + +
    +
    + {{{ if ./roomName}}} + {./roomName} + {{{ else }}} + {{{ if !./lastUser.uid }}} + [[modules:chat.no-users-in-room]] + {{{ else }}} + {./usernames} + {{{ end }}} + {{{ end }}} +
    + + {{{ if ./teaser }}} +
    + {buildAvatar(./teaser.user, "14px", true)} + {./teaser.user.username}: + {./teaser.content} +
    +
    {{{ if ./teaser.timeagoLong }}}{./teaser.timeagoLong}{{{ else }}}{{{ end }}}
    + {{{ end }}} +
    +
    +
    + +
    +
    +
    +{{{ if !@last }}} +
    +{{{ end }}} diff --git a/src/views/partials/chats/scroll-up-alert.tpl b/src/views/partials/chats/scroll-up-alert.tpl new file mode 100644 index 0000000000..52601bfa47 --- /dev/null +++ b/src/views/partials/chats/scroll-up-alert.tpl @@ -0,0 +1,3 @@ +
    + +
    \ No newline at end of file diff --git a/src/views/partials/chats/system-message.tpl b/src/views/partials/chats/system-message.tpl new file mode 100644 index 0000000000..f522bd108c --- /dev/null +++ b/src/views/partials/chats/system-message.tpl @@ -0,0 +1,7 @@ +
  • +
    +
    + [[modules:chat.system.{messages.content}, {messages.fromUser.username}, {messages.timestampISO}]] +
    +
    +
    • \ No newline at end of file diff --git a/src/views/partials/chats/user-list.tpl b/src/views/partials/chats/user-list.tpl new file mode 100644 index 0000000000..c73a915828 --- /dev/null +++ b/src/views/partials/chats/user-list.tpl @@ -0,0 +1,11 @@ + \ No newline at end of file diff --git a/src/views/partials/chats/user.tpl b/src/views/partials/chats/user.tpl new file mode 100644 index 0000000000..9ed5b71fbf --- /dev/null +++ b/src/views/partials/chats/user.tpl @@ -0,0 +1 @@ +{buildAvatar(rooms.users, "32px", true)} \ No newline at end of file