From bef2cbb462a031d62ba4340a23ac3bf0de866f1f Mon Sep 17 00:00:00 2001 From: JC Brand Date: Mon, 31 Jan 2022 21:51:51 +0100 Subject: [PATCH] Use SVG icons and tweak message padding --- src/modals/muc-details.js | 10 +---- src/modals/templates/muc-details.js | 40 +++++++++++-------- src/modals/templates/user-details.js | 7 +++- src/plugins/muc-views/modals/muc-list.js | 4 +- .../profile/templates/chat-status-modal.js | 10 ++--- src/plugins/rosterview/filterview.js | 3 +- src/plugins/rosterview/styles/roster.scss | 26 ++++++++++-- .../rosterview/templates/roster_filter.js | 10 ++--- .../rosterview/templates/roster_item.js | 16 ++++++-- src/shared/chat/chat-content.js | 3 +- src/shared/chat/message-actions.js | 1 - src/shared/chat/toolbar.js | 6 +-- src/shared/components/styles/icon.scss | 19 ++++++--- src/shared/directives/retraction.js | 2 - src/shared/styles/_core.scss | 14 ++----- src/shared/styles/index.scss | 1 + src/shared/styles/messages.scss | 10 ++--- src/shared/styles/spinner.scss | 19 +++++++++ src/shared/styles/status.scss | 13 ++++-- src/templates/spinner.js | 4 +- src/utils/html.js | 6 +-- 21 files changed, 135 insertions(+), 89 deletions(-) create mode 100644 src/shared/styles/spinner.scss diff --git a/src/modals/muc-details.js b/src/modals/muc-details.js index 3dd718733..95122eeac 100644 --- a/src/modals/muc-details.js +++ b/src/modals/muc-details.js @@ -1,6 +1,5 @@ import BootstrapModal from "plugins/modal/base.js"; import tpl_muc_details from "./templates/muc-details.js"; -import { __ } from 'i18n'; export default BootstrapModal.extend({ @@ -15,13 +14,6 @@ export default BootstrapModal.extend({ }, toHTML () { - return tpl_muc_details(Object.assign( - this.model.toJSON(), { - 'config': this.model.config.toJSON(), - 'display_name': __('Groupchat info for %1$s', this.model.getDisplayName()), - 'features': this.model.features.toJSON(), - 'num_occupants': this.model.occupants.length, - }) - ); + return tpl_muc_details(this.model); } }); diff --git a/src/modals/templates/muc-details.js b/src/modals/templates/muc-details.js index f19bce974..2f00db25b 100644 --- a/src/modals/templates/muc-details.js +++ b/src/modals/templates/muc-details.js @@ -13,7 +13,13 @@ const subject = (o) => { } -export default (o) => { +export default (model) => { + const o = model.toJSON(); + const config = model.config.toJSON(); + const display_name = __('Groupchat info for %1$s', model.getDisplayName()); + const features = model.features.toJSON(); + const num_occupants = model.occupants.filter(o => o.get('show') !== 'offline').length; + const i18n_address = __('Groupchat XMPP address'); const i18n_archiving = __('Message archiving'); const i18n_archiving_help = __('Messages are archived on the server'); @@ -48,7 +54,7 @@ export default (o) => {
- + ${modal_header_close_button}
@@ -56,25 +62,25 @@ export default (o) => {

${i18n_name}: ${o.name}

${i18n_address}: ${o.jid}

-

${i18n_desc}: ${o.config.description}

+

${i18n_desc}: ${config.description}

${ (o.subject) ? subject(o) : '' } -

${i18n_online_users}: ${o.num_occupants}

+

${i18n_online_users}: ${num_occupants}

${i18n_features}:

    - ${ o.features.passwordprotected ? html`
  • ${i18n_password_protected} - ${i18n_password_help}
    • ` : '' } - ${ o.features.unsecured ? html`
  • ${i18n_no_password_required} - ${i18n_no_pass_help}
    • ` : '' } - ${ o.features.hidden ? html`
  • ${i18n_hidden} - ${i18n_hidden_help}
    • ` : '' } - ${ o.features.public_room ? html`
  • ${i18n_public} - ${o.__('This groupchat is publicly searchable') }
    • ` : '' } - ${ o.features.membersonly ? html`
  • ${i18n_members_only} - ${i18n_members_help}
    • ` : '' } - ${ o.features.open ? html`
  • ${i18n_open} - ${i18n_open_help}
    • ` : '' } - ${ o.features.persistent ? html`
  • ${i18n_persistent} - ${i18n_persistent_help}
    • ` : '' } - ${ o.features.temporary ? html`
  • ${i18n_temporary} - ${i18n_temporary_help}
    • ` : '' } - ${ o.features.nonanonymous ? html`
  • ${i18n_not_anonymous} - ${i18n_not_anonymous_help}
    • ` : '' } - ${ o.features.semianonymous ? html`
  • ${i18n_semi_anon} - ${i18n_semi_anon_help}
    • ` : '' } - ${ o.features.moderated ? html`
  • ${i18n_moderated} - ${i18n_moderated_help}
    • ` : '' } - ${ o.features.unmoderated ? html`
  • ${i18n_not_moderated} - ${i18n_not_moderated_help}
    • ` : '' } - ${ o.features.mam_enabled ? html`
  • ${i18n_archiving} - ${i18n_archiving_help}
    • ` : '' } + ${ features.passwordprotected ? html`
  • ${i18n_password_protected} - ${i18n_password_help}
    • ` : '' } + ${ features.unsecured ? html`
  • ${i18n_no_password_required} - ${i18n_no_pass_help}
    • ` : '' } + ${ features.hidden ? html`
  • ${i18n_hidden} - ${i18n_hidden_help}
    • ` : '' } + ${ features.public_room ? html`
  • ${i18n_public} - ${o.__('This groupchat is publicly searchable') }
    • ` : '' } + ${ features.membersonly ? html`
  • ${i18n_members_only} - ${i18n_members_help}
    • ` : '' } + ${ features.open ? html`
  • ${i18n_open} - ${i18n_open_help}
    • ` : '' } + ${ features.persistent ? html`
  • ${i18n_persistent} - ${i18n_persistent_help}
    • ` : '' } + ${ features.temporary ? html`
  • ${i18n_temporary} - ${i18n_temporary_help}
    • ` : '' } + ${ features.nonanonymous ? html`
  • ${i18n_not_anonymous} - ${i18n_not_anonymous_help}
    • ` : '' } + ${ features.semianonymous ? html`
  • ${i18n_semi_anon} - ${i18n_semi_anon_help}
    • ` : '' } + ${ features.moderated ? html`
  • ${i18n_moderated} - ${i18n_moderated_help}
    • ` : '' } + ${ features.unmoderated ? html`
  • ${i18n_not_moderated} - ${i18n_not_moderated_help}
    • ` : '' } + ${ features.mam_enabled ? html`
  • ${i18n_archiving} - ${i18n_archiving_help}
    • ` : '' }

diff --git a/src/modals/templates/user-details.js b/src/modals/templates/user-details.js index f27c4034d..6b2da3531 100644 --- a/src/modals/templates/user-details.js +++ b/src/modals/templates/user-details.js @@ -8,7 +8,12 @@ const remove_button = (o) => { const i18n_remove_contact = __('Remove as contact'); return html` `; } diff --git a/src/plugins/muc-views/modals/muc-list.js b/src/plugins/muc-views/modals/muc-list.js index 1a900dd39..30fbf9846 100644 --- a/src/plugins/muc-views/modals/muc-list.js +++ b/src/plugins/muc-views/modals/muc-list.js @@ -1,7 +1,7 @@ import BootstrapModal from "plugins/modal/base.js"; import head from "lodash-es/head"; import log from "@converse/headless/log"; -import tpl_list_chatrooms_modal from "../templates/muc-list.js"; +import tpl_muc_list from "../templates/muc-list.js"; import tpl_muc_description from "../templates/muc-description.js"; import tpl_spinner from "templates/spinner.js"; import { __ } from 'i18n'; @@ -87,7 +87,7 @@ export default BootstrapModal.extend({ toHTML () { const muc_domain = this.model.get('muc_domain') || api.settings.get('muc_domain'); - return tpl_list_chatrooms_modal( + return tpl_muc_list( Object.assign(this.model.toJSON(), { 'show_form': !api.settings.get('locked_muc_domain'), 'server_placeholder': muc_domain ? muc_domain : __('conference.example.org'), diff --git a/src/plugins/profile/templates/chat-status-modal.js b/src/plugins/profile/templates/chat-status-modal.js index 9b5be40ec..5a043b057 100644 --- a/src/plugins/profile/templates/chat-status-modal.js +++ b/src/plugins/profile/templates/chat-status-modal.js @@ -17,32 +17,32 @@ export default (o) => html` + ${o.label_online}
+ ${o.label_busy}
+ ${o.label_away}
+ ${o.label_xa}
- +
diff --git a/src/plugins/rosterview/filterview.js b/src/plugins/rosterview/filterview.js index 6cffc52f6..f04c1cb96 100644 --- a/src/plugins/rosterview/filterview.js +++ b/src/plugins/rosterview/filterview.js @@ -3,6 +3,7 @@ import tpl_roster_filter from "./templates/roster_filter.js"; import { CustomElement } from 'shared/components/element.js'; import { Model } from '@converse/skeletor/src/model.js'; import { _converse, api } from "@converse/headless/core"; +import { ancestor } from 'utils/html.js'; import { initStorage } from '@converse/headless/utils/storage.js'; export const RosterFilter = Model.extend({ @@ -62,7 +63,7 @@ export class RosterFilterView extends CustomElement { changeTypeFilter (ev) { ev && ev.preventDefault(); - const type = ev.target.dataset.type; + const type = ancestor(ev.target, 'converse-icon')?.dataset.type || 'contacts'; if (type === 'state') { this.model.save({ 'filter_type': type, diff --git a/src/plugins/rosterview/styles/roster.scss b/src/plugins/rosterview/styles/roster.scss index f82be09f8..6c80f49db 100644 --- a/src/plugins/rosterview/styles/roster.scss +++ b/src/plugins/rosterview/styles/roster.scss @@ -30,10 +30,8 @@ padding: 0.2em; } - span { - padding: 0.3em; - min-width: 25px; - text-align: center; + converse-icon { + padding: 0.25em; } .roster-filter { @@ -56,6 +54,16 @@ overflow-y: auto; color: var(--text-color); + .roster-group-contacts { + .list-item { + &:hover { + .list-item-action { + opacity: 1; + } + } + } + } + converse-roster-contact { width: 100%; overflow: hidden; @@ -63,6 +71,16 @@ text-overflow: ellipsis; display: flex; justify-content: space-between; + + .list-item-action { + line-height: 2em; + } + + &:hover { + .list-item-action { + opacity: 1; + } + } } .group-toggle { diff --git a/src/plugins/rosterview/templates/roster_filter.js b/src/plugins/rosterview/templates/roster_filter.js index faf14a8b8..44e7ce88a 100644 --- a/src/plugins/rosterview/templates/roster_filter.js +++ b/src/plugins/rosterview/templates/roster_filter.js @@ -21,18 +21,18 @@ export default (o) => { @submit=${o.submitFilter}>
- - - + + +
- - +
`; @@ -147,7 +146,6 @@ export class ChatToolbar extends CustomElement { `; diff --git a/src/shared/components/styles/icon.scss b/src/shared/components/styles/icon.scss index 84bd199b2..7aac4223f 100644 --- a/src/shared/components/styles/icon.scss +++ b/src/shared/components/styles/icon.scss @@ -5,12 +5,19 @@ converse-icon { svg { fill: var(--subdued-color); } -} - -a, .clickable { - converse-icon { - svg { - &:hover { + &.clickable { + &:hover { + svg { + fill: var(--icon-hover-color); + } + } + } +} + +a, .clickable { + converse-icon { + &:hover { + svg { fill: var(--icon-hover-color); } } diff --git a/src/shared/directives/retraction.js b/src/shared/directives/retraction.js index ee9ac768f..5ec10e11f 100644 --- a/src/shared/directives/retraction.js +++ b/src/shared/directives/retraction.js @@ -1,5 +1,4 @@ import { __ } from '../i18n'; -import { api } from "@converse/headless/core"; import { directive, html } from "lit"; @@ -8,7 +7,6 @@ const tpl_retract = (o) => html`