From 858a6051accc9bbb4b30a0ad7505240a6a9d2c0e Mon Sep 17 00:00:00 2001 From: JC Brand Date: Sun, 8 May 2022 20:05:30 +0200 Subject: [PATCH] Refactoring of the headlines plugins - Move template to relevant plugin - Turn ElementView into CustomElement - Use the terminology "Headlines Feed" instead of "Headlines Box" - Break the `converse-headlines` plugin up into multiple files - Fix CSS styling for headlines feeds for the Dracula theme --- src/headless/headless.js | 2 +- src/headless/plugins/headlines.js | 164 ------------------ src/headless/plugins/headlines/api.js | 44 +++++ src/headless/plugins/headlines/feed.js | 31 ++++ src/headless/plugins/headlines/index.js | 62 +++++++ src/headless/plugins/headlines/utils.js | 33 ++++ src/plugins/chatview/chat.js | 2 +- .../controlbox/templates/controlbox.js | 2 +- src/plugins/headlines-view/feed-list.js | 37 ++++ src/plugins/headlines-view/index.js | 7 +- src/plugins/headlines-view/panel.js | 45 ----- .../headlines-view/styles/headlines.scss | 72 ++++++-- .../headlines-view/templates/feeds-list.js | 33 ++++ src/plugins/headlines-view/templates/panel.js | 12 -- src/plugins/headlines-view/tests/headline.js | 7 +- src/plugins/headlines-view/view.js | 8 +- src/plugins/minimize/utils.js | 2 +- src/shared/styles/themes/classic.scss | 5 +- src/shared/styles/themes/dracula.scss | 7 + src/templates/headline_list.js | 19 -- 20 files changed, 323 insertions(+), 271 deletions(-) delete mode 100644 src/headless/plugins/headlines.js create mode 100644 src/headless/plugins/headlines/api.js create mode 100644 src/headless/plugins/headlines/feed.js create mode 100644 src/headless/plugins/headlines/index.js create mode 100644 src/headless/plugins/headlines/utils.js create mode 100644 src/plugins/headlines-view/feed-list.js delete mode 100644 src/plugins/headlines-view/panel.js create mode 100644 src/plugins/headlines-view/templates/feeds-list.js delete mode 100644 src/plugins/headlines-view/templates/panel.js delete mode 100644 src/templates/headline_list.js diff --git a/src/headless/headless.js b/src/headless/headless.js index b2fee1957..86263a705 100644 --- a/src/headless/headless.js +++ b/src/headless/headless.js @@ -9,7 +9,7 @@ import "./plugins/caps/index.js"; // XEP-0115 Entity Capabilities import "./plugins/chat/index.js"; // RFC-6121 Instant messaging import "./plugins/chatboxes/index.js"; import "./plugins/disco/index.js"; // XEP-0030 Service discovery -import "./plugins/headlines.js"; // Support for headline messages +import "./plugins/headlines/index.js"; // Support for headline messages import "./plugins/mam/index.js"; // XEP-0313 Message Archive Management import "./plugins/muc/index.js"; // XEP-0045 Multi-user chat import "./plugins/ping/index.js"; // XEP-0199 XMPP Ping diff --git a/src/headless/plugins/headlines.js b/src/headless/plugins/headlines.js deleted file mode 100644 index b20895e42..000000000 --- a/src/headless/plugins/headlines.js +++ /dev/null @@ -1,164 +0,0 @@ -/** - * @module converse-headlines - * @copyright 2022, the Converse.js contributors - * @description XEP-0045 Multi-User Chat Views - */ -import { _converse, api, converse } from "@converse/headless/core"; -import { isHeadline, isServerMessage } from '@converse/headless/shared/parsers'; -import { parseMessage } from '@converse/headless/plugins/chat/parsers'; - - -converse.plugins.add('converse-headlines', { - /* Plugin dependencies are other plugins which might be - * overridden or relied upon, and therefore need to be loaded before - * this plugin. - * - * If the setting "strict_plugin_dependencies" is set to true, - * an error will be raised if the plugin is not found. By default it's - * false, which means these plugins are only loaded opportunistically. - * - * NB: These plugins need to have already been loaded via require.js. - */ - dependencies: ["converse-chat"], - - overrides: { - // Overrides mentioned here will be picked up by converse.js's - // plugin architecture they will replace existing methods on the - // relevant objects or classes. - // - // New functions which don't exist yet can also be added. - - ChatBoxes: { - model (attrs, options) { - const { _converse } = this.__super__; - if (attrs.type == _converse.HEADLINES_TYPE) { - return new _converse.HeadlinesBox(attrs, options); - } else { - return this.__super__.model.apply(this, arguments); - } - }, - } - }, - - - initialize () { - /* The initialize function gets called as soon as the plugin is - * loaded by converse.js's plugin machinery. - */ - - /** - * Shows headline messages - * @class - * @namespace _converse.HeadlinesBox - * @memberOf _converse - */ - _converse.HeadlinesBox = _converse.ChatBox.extend({ - defaults () { - return { - 'bookmarked': false, - 'hidden': ['mobile', 'fullscreen'].includes(api.settings.get("view_mode")), - 'message_type': 'headline', - 'num_unread': 0, - 'time_opened': this.get('time_opened') || (new Date()).getTime(), - 'type': _converse.HEADLINES_TYPE - } - }, - - async initialize () { - this.set({'box_id': `box-${this.get('jid')}`}); - this.initUI(); - this.initMessages(); - await this.fetchMessages(); - /** - * Triggered once a {@link _converse.HeadlinesBox} has been created and initialized. - * @event _converse#headlinesBoxInitialized - * @type { _converse.HeadlinesBox } - * @example _converse.api.listen.on('headlinesBoxInitialized', model => { ... }); - */ - api.trigger('headlinesBoxInitialized', this); - } - }); - - async function onHeadlineMessage (stanza) { - // Handler method for all incoming messages of type "headline". - if (isHeadline(stanza) || isServerMessage(stanza)) { - const from_jid = stanza.getAttribute('from'); - - await api.waitUntil('rosterInitialized') - if (from_jid.includes('@') && - !_converse.roster.get(from_jid) && - !api.settings.get("allow_non_roster_messaging")) { - return; - } - if (stanza.querySelector('body') === null) { - // Avoid creating a chat box if we have nothing to show inside it. - return; - } - const chatbox = _converse.chatboxes.create({ - 'id': from_jid, - 'jid': from_jid, - 'type': _converse.HEADLINES_TYPE, - 'from': from_jid - }); - const attrs = await parseMessage(stanza, _converse); - await chatbox.createMessage(attrs); - api.trigger('message', {chatbox, stanza, attrs}); - } - } - - - /************************ BEGIN Event Handlers ************************/ - function registerHeadlineHandler () { - _converse.connection.addHandler(message => (onHeadlineMessage(message) || true), null, 'message'); - } - api.listen.on('connected', registerHeadlineHandler); - api.listen.on('reconnected', registerHeadlineHandler); - /************************ END Event Handlers ************************/ - - - /************************ BEGIN API ************************/ - Object.assign(api, { - /** - * The "headlines" namespace, which is used for headline-channels - * which are read-only channels containing messages of type - * "headline". - * - * @namespace api.headlines - * @memberOf api - */ - headlines: { - /** - * Retrieves a headline-channel or all headline-channels. - * - * @method api.headlines.get - * @param {String|String[]} jids - e.g. 'buddy@example.com' or ['buddy1@example.com', 'buddy2@example.com'] - * @param {Object} [attrs] - Attributes to be set on the _converse.ChatBox model. - * @param {Boolean} [create=false] - Whether the chat should be created if it's not found. - * @returns { Promise<_converse.HeadlinesBox> } - */ - async get (jids, attrs={}, create=false) { - async function _get (jid) { - let model = await api.chatboxes.get(jid); - if (!model && create) { - model = await api.chatboxes.create(jid, attrs, _converse.HeadlinesBox); - } else { - model = (model && model.get('type') === _converse.HEADLINES_TYPE) ? model : null; - if (model && Object.keys(attrs).length) { - model.save(attrs); - } - } - return model; - } - if (jids === undefined) { - const chats = await api.chatboxes.get(); - return chats.filter(c => (c.get('type') === _converse.HEADLINES_TYPE)); - } else if (typeof jids === 'string') { - return _get(jids); - } - return Promise.all(jids.map(jid => _get(jid))); - } - } - }); - /************************ END API ************************/ - } -}); diff --git a/src/headless/plugins/headlines/api.js b/src/headless/plugins/headlines/api.js new file mode 100644 index 000000000..85cf7c08c --- /dev/null +++ b/src/headless/plugins/headlines/api.js @@ -0,0 +1,44 @@ +import { _converse, api } from "@converse/headless/core"; + +export default { + /** + * The "headlines" namespace, which is used for headline-channels + * which are read-only channels containing messages of type + * "headline". + * + * @namespace api.headlines + * @memberOf api + */ + headlines: { + /** + * Retrieves a headline-channel or all headline-channels. + * + * @method api.headlines.get + * @param {String|String[]} jids - e.g. 'buddy@example.com' or ['buddy1@example.com', 'buddy2@example.com'] + * @param {Object} [attrs] - Attributes to be set on the _converse.ChatBox model. + * @param {Boolean} [create=false] - Whether the chat should be created if it's not found. + * @returns { Promise<_converse.HeadlinesFeed> } + */ + async get (jids, attrs={}, create=false) { + async function _get (jid) { + let model = await api.chatboxes.get(jid); + if (!model && create) { + model = await api.chatboxes.create(jid, attrs, _converse.HeadlinesFeed); + } else { + model = (model && model.get('type') === _converse.HEADLINES_TYPE) ? model : null; + if (model && Object.keys(attrs).length) { + model.save(attrs); + } + } + return model; + } + if (jids === undefined) { + const chats = await api.chatboxes.get(); + return chats.filter(c => (c.get('type') === _converse.HEADLINES_TYPE)); + } else if (typeof jids === 'string') { + return _get(jids); + } + return Promise.all(jids.map(jid => _get(jid))); + } + } +}; diff --git a/src/headless/plugins/headlines/feed.js b/src/headless/plugins/headlines/feed.js new file mode 100644 index 000000000..82392feec --- /dev/null +++ b/src/headless/plugins/headlines/feed.js @@ -0,0 +1,31 @@ +import ChatBox from '@converse/headless/plugins/chat/model.js'; +import { _converse, api } from '../../core.js'; + + +export default class HeadlinesFeed extends ChatBox { + + defaults () { + return { + 'bookmarked': false, + 'hidden': ['mobile', 'fullscreen'].includes(api.settings.get("view_mode")), + 'message_type': 'headline', + 'num_unread': 0, + 'time_opened': this.get('time_opened') || (new Date()).getTime(), + 'type': _converse.HEADLINES_TYPE + } + } + + async initialize () { + this.set({'box_id': `box-${this.get('jid')}`}); + this.initUI(); + this.initMessages(); + await this.fetchMessages(); + /** + * Triggered once a { @link _converse.HeadlinesFeed } has been created and initialized. + * @event _converse#headlinesFeedInitialized + * @type { _converse.HeadlinesFeed } + * @example _converse.api.listen.on('headlinesFeedInitialized', model => { ... }); + */ + api.trigger('headlinesFeedInitialized', this); + } +} diff --git a/src/headless/plugins/headlines/index.js b/src/headless/plugins/headlines/index.js new file mode 100644 index 000000000..cc8011818 --- /dev/null +++ b/src/headless/plugins/headlines/index.js @@ -0,0 +1,62 @@ +/** + * @module converse-headlines + * @copyright 2022, the Converse.js contributors + * @description XEP-0045 Multi-User Chat Views + */ +import HeadlinesFeed from './feed.js'; +import headlines_api from './api.js'; +import { _converse, api, converse } from "@converse/headless/core"; +import { onHeadlineMessage } from './utils.js'; + + +converse.plugins.add('converse-headlines', { + /* Plugin dependencies are other plugins which might be + * overridden or relied upon, and therefore need to be loaded before + * this plugin. + * + * If the setting "strict_plugin_dependencies" is set to true, + * an error will be raised if the plugin is not found. By default it's + * false, which means these plugins are only loaded opportunistically. + * + * NB: These plugins need to have already been loaded via require.js. + */ + dependencies: ["converse-chat"], + + overrides: { + // Overrides mentioned here will be picked up by converse.js's + // plugin architecture they will replace existing methods on the + // relevant objects or classes. + // + // New functions which don't exist yet can also be added. + + ChatBoxes: { + model (attrs, options) { + const { _converse } = this.__super__; + if (attrs.type == _converse.HEADLINES_TYPE) { + return new _converse.HeadlinesFeed(attrs, options); + } else { + return this.__super__.model.apply(this, arguments); + } + }, + } + }, + + + initialize () { + /** + * Shows headline messages + * @class + * @namespace _converse.HeadlinesFeed + * @memberOf _converse + */ + _converse.HeadlinesFeed = HeadlinesFeed; + + function registerHeadlineHandler () { + _converse.connection.addHandler(m => (onHeadlineMessage(m) || true), null, 'message'); + } + api.listen.on('connected', registerHeadlineHandler); + api.listen.on('reconnected', registerHeadlineHandler); + + Object.assign(api, headlines_api); + } +}); diff --git a/src/headless/plugins/headlines/utils.js b/src/headless/plugins/headlines/utils.js new file mode 100644 index 000000000..ad4669c42 --- /dev/null +++ b/src/headless/plugins/headlines/utils.js @@ -0,0 +1,33 @@ +import { _converse, api } from "@converse/headless/core"; +import { isHeadline, isServerMessage } from '@converse/headless/shared/parsers'; +import { parseMessage } from '@converse/headless/plugins/chat/parsers'; + +/** + * Handler method for all incoming messages of type "headline". + * @param { XMLElement } stanza + */ +export async function onHeadlineMessage (stanza) { + if (isHeadline(stanza) || isServerMessage(stanza)) { + const from_jid = stanza.getAttribute('from'); + + await api.waitUntil('rosterInitialized') + if (from_jid.includes('@') && + !_converse.roster.get(from_jid) && + !api.settings.get("allow_non_roster_messaging")) { + return; + } + if (stanza.querySelector('body') === null) { + // Avoid creating a chat box if we have nothing to show inside it. + return; + } + const chatbox = _converse.chatboxes.create({ + 'id': from_jid, + 'jid': from_jid, + 'type': _converse.HEADLINES_TYPE, + 'from': from_jid + }); + const attrs = await parseMessage(stanza, _converse); + await chatbox.createMessage(attrs); + api.trigger('message', {chatbox, stanza, attrs}); + } +} diff --git a/src/plugins/chatview/chat.js b/src/plugins/chatview/chat.js index e861d1346..b4f8e5fda 100644 --- a/src/plugins/chatview/chat.js +++ b/src/plugins/chatview/chat.js @@ -26,7 +26,7 @@ export default class ChatView extends BaseChatView { /** * Triggered once the {@link _converse.ChatBoxView} has been initialized * @event _converse#chatBoxViewInitialized - * @type { _converse.HeadlinesBoxView } + * @type { _converse.ChatBoxView } * @example _converse.api.listen.on('chatBoxViewInitialized', view => { ... }); */ api.trigger('chatBoxViewInitialized', this); diff --git a/src/plugins/controlbox/templates/controlbox.js b/src/plugins/controlbox/templates/controlbox.js index 4935c69cb..f9604f489 100644 --- a/src/plugins/controlbox/templates/controlbox.js +++ b/src/plugins/controlbox/templates/controlbox.js @@ -38,7 +38,7 @@ export default (el) => { ${o.connected ? html` - +
diff --git a/src/plugins/headlines-view/feed-list.js b/src/plugins/headlines-view/feed-list.js new file mode 100644 index 000000000..04f2e3ad3 --- /dev/null +++ b/src/plugins/headlines-view/feed-list.js @@ -0,0 +1,37 @@ +import tpl_feeds_list from './templates/feeds-list.js'; +import { CustomElement } from 'shared/components/element.js'; +import { _converse, api } from '@converse/headless/core'; + +/** + * Custom element which renders a list of headline feeds + * @class + * @namespace _converse.HeadlinesFeedsList + * @memberOf _converse + */ +export class HeadlinesFeedsList extends CustomElement { + + initialize () { + this.model = _converse.chatboxes; + this.listenTo(this.model, 'add', (m) => this.renderIfHeadline(m)); + this.listenTo(this.model, 'remove', (m) => this.renderIfHeadline(m)); + this.listenTo(this.model, 'destroy', (m) => this.renderIfHeadline(m)); + this.requestUpdate(); + } + + render () { + return tpl_feeds_list(this); + } + + renderIfHeadline (model) { + return model?.get('type') === _converse.HEADLINES_TYPE && this.requestUpdate(); + } + + async openHeadline (ev) { // eslint-disable-line class-methods-use-this + ev.preventDefault(); + const jid = ev.target.getAttribute('data-headline-jid'); + const feed = await api.headlines.get(jid); + feed.maybeShow(true); + } +} + +api.elements.define('converse-headlines-feeds-list', HeadlinesFeedsList); diff --git a/src/plugins/headlines-view/index.js b/src/plugins/headlines-view/index.js index 36900aaea..4bcea22a7 100644 --- a/src/plugins/headlines-view/index.js +++ b/src/plugins/headlines-view/index.js @@ -5,7 +5,7 @@ */ import '../chatview/index.js'; import './view.js'; -import { HeadlinesPanel } from './panel.js'; +import { HeadlinesFeedsList } from './feed-list.js'; import { _converse, converse } from '@converse/headless/core'; import './styles/headlines.scss'; @@ -25,6 +25,9 @@ converse.plugins.add('converse-headlines-view', { dependencies: ['converse-headlines', 'converse-chatview'], initialize () { - _converse.HeadlinesPanel = HeadlinesPanel; + _converse.HeadlinesFeedsList = HeadlinesFeedsList; + + // Deprecated + _converse.HeadlinesPanel = HeadlinesFeedsList; } }); diff --git a/src/plugins/headlines-view/panel.js b/src/plugins/headlines-view/panel.js deleted file mode 100644 index aca4dced9..000000000 --- a/src/plugins/headlines-view/panel.js +++ /dev/null @@ -1,45 +0,0 @@ -import tpl_headline_panel from './templates/panel.js'; -import { ElementView } from '@converse/skeletor/src/element.js'; -import { __ } from 'i18n'; -import { _converse, api } from '@converse/headless/core'; - -/** - * View which renders headlines section of the control box. - * @class - * @namespace _converse.HeadlinesPanel - * @memberOf _converse - */ -export class HeadlinesPanel extends ElementView { - events = { - 'click .open-headline': 'openHeadline' - } - - initialize () { - this.model = _converse.chatboxes; - this.listenTo(this.model, 'add', this.renderIfHeadline); - this.listenTo(this.model, 'remove', this.renderIfHeadline); - this.listenTo(this.model, 'destroy', this.renderIfHeadline); - this.render(); - } - - toHTML () { - return tpl_headline_panel({ - 'heading_headline': __('Announcements'), - 'headlineboxes': this.model.filter(m => m.get('type') === _converse.HEADLINES_TYPE), - 'open_title': __('Click to open this server message') - }); - } - - renderIfHeadline (model) { - return model && model.get('type') === _converse.HEADLINES_TYPE && this.render(); - } - - openHeadline (ev) { // eslint-disable-line class-methods-use-this - ev.preventDefault(); - const jid = ev.target.getAttribute('data-headline-jid'); - const chat = _converse.chatboxes.get(jid); - chat.maybeShow(true); - } -} - -api.elements.define('converse-headlines-panel', HeadlinesPanel); diff --git a/src/plugins/headlines-view/styles/headlines.scss b/src/plugins/headlines-view/styles/headlines.scss index e3b430307..b16f92195 100644 --- a/src/plugins/headlines-view/styles/headlines.scss +++ b/src/plugins/headlines-view/styles/headlines.scss @@ -1,23 +1,50 @@ .conversejs { - .chat-head-headline { - background-color: var(--headline-head-color); - } + .chatbox { + converse-headlines-heading { + &.chat-head { + .chatbox-title__text { + color: var(--headline-head-text-color) !important; + background-color: var(--headline-head-bg-color); + } - .chatbox.headlines { - .chat-head { - &.chat-head-chatbox { - background-color: var(--headline-head-color); + a, a:visited, a:hover, a:not([href]):not([tabindex]) { + &.chatbox-btn { + &.fa, + &.fas, + &.far { + color: var(--headline-head-text-color); + &.button-on:before { + padding: 0.2em; + background-color: var(--headline-head-text-color); + color: var(--headline-head-bg-color); + } + } + } + } } } - .chat-body { - background-color: var(--headline-head-color); - .chat-message { - color: var(--headline-message-color); + + &.headlines { + .chat-head { + &.chat-head-chatbox { + background-color: var(--headline-head-bg-color); + border-bottom: var(--headline-head-border-bottom); + } + } + .chat-body { + background-color: var(--background); + .chat-message { + color: var(--headline-message-color); + } + hr { + border-bottom: var(--headline-separator-border-bottom); + } + } + .chat-content { + height: 100%; } } - .chat-content { - height: 100%; - } + } .message { @@ -29,22 +56,29 @@ } } } -} -.conversejs { + #controlbox { + .controlbox-section { + .controlbox-heading--headline { + color: var(--headline-head-text-color); + } + } + } + + converse-chats { &.converse-fullscreen { .chatbox.headlines { .box-flyout { - background-color: var(--headline-head-color); + background-color: var(--headline-head-text-color); } .chat-head { &.chat-head-chatbox { - background-color: var(--headline-head-color); + background-color: var(--headline-head-text-color); } } .flyout { - border-color: var(--headline-head-color); + border-color: var(--headline-head-text-color); } } } diff --git a/src/plugins/headlines-view/templates/feeds-list.js b/src/plugins/headlines-view/templates/feeds-list.js new file mode 100644 index 000000000..b4c79b397 --- /dev/null +++ b/src/plugins/headlines-view/templates/feeds-list.js @@ -0,0 +1,33 @@ +import { __ } from 'i18n'; +import { _converse } from '@converse/headless/core'; +import { html } from "lit"; + +const tpls_headlines_feeds_list_item = (el, feed) => { + const open_title = __('Click to open this server message'); + return html` +
+ el.openHeadline(ev)} + href="#">${feed.get('jid')} +
+ `; +} + +export default (el) => { + const feeds = el.model.filter(m => m.get('type') === _converse.HEADLINES_TYPE); + const heading_headline = __('Announcements'); + return html` +
+
+ ${heading_headline} +
+
+
+
+ ${ feeds.map(feed => tpls_headlines_feeds_list_item(el, feed)) } +
+
` +} diff --git a/src/plugins/headlines-view/templates/panel.js b/src/plugins/headlines-view/templates/panel.js deleted file mode 100644 index 3b23e9108..000000000 --- a/src/plugins/headlines-view/templates/panel.js +++ /dev/null @@ -1,12 +0,0 @@ -import { html } from "lit"; -import tpl_headline_list from "templates/headline_list.js"; - - -export default (o) => html` -
-
- ${o.heading_headline} -
-
- ${ tpl_headline_list(o) } -`; diff --git a/src/plugins/headlines-view/tests/headline.js b/src/plugins/headlines-view/tests/headline.js index 8d97125fe..6b6711eb6 100644 --- a/src/plugins/headlines-view/tests/headline.js +++ b/src/plugins/headlines-view/tests/headline.js @@ -68,7 +68,12 @@ describe("A headlines box", function () { it("will show headline messages in the controlbox", mock.initConverse( [], {}, async function (_converse) { - await mock.waitForRoster(_converse, 'current', 0); + await mock.waitForRoster(_converse, 'current', 1); + await mock.openControlBox(_converse); + + const sender_jid = mock.cur_names[0].replace(/ /g,'.').toLowerCase() + '@montague.lit'; + await mock.openChatBoxFor(_converse, sender_jid); + const { u, $msg} = converse.env; /* { ... }); */ api.trigger('headlinesBoxViewInitialized', this); @@ -52,4 +52,4 @@ class HeadlinesView extends BaseChatView { } } -api.elements.define('converse-headlines', HeadlinesView); +api.elements.define('converse-headlines', HeadlinesFeedView); diff --git a/src/plugins/minimize/utils.js b/src/plugins/minimize/utils.js index 6000df836..3cb4bf55f 100644 --- a/src/plugins/minimize/utils.js +++ b/src/plugins/minimize/utils.js @@ -58,7 +58,7 @@ function getBoxesWidth (newchat) { * to create space. * @private * @method _converse.ChatBoxViews#trimChats - * @param { _converse.ChatBoxView|_converse.ChatRoomView|_converse.ControlBoxView|_converse.HeadlinesBoxView } [newchat] + * @param { _converse.ChatBoxView|_converse.ChatRoomView|_converse.ControlBoxView|_converse.HeadlinesFeedView } [newchat] */ export function trimChats (newchat) { if (_converse.isTestEnv() || api.settings.get('no_trimming') || api.settings.get("view_mode") !== 'overlayed') { diff --git a/src/shared/styles/themes/classic.scss b/src/shared/styles/themes/classic.scss index 14a69df12..69eceb443 100644 --- a/src/shared/styles/themes/classic.scss +++ b/src/shared/styles/themes/classic.scss @@ -131,8 +131,11 @@ --muc-toolbar-btn-color: var(--redder-orange); --muc-toolbar-btn-disabled-color: gray; - --headline-head-color: var(--orange); + --headlines-color: var(--orange); + --headline-head-text-color: var(--white); + --headline-head-bg-color: var(--headlines-color); --headline-message-color: #D2842B; + --headline-separator-border-bottom: 2px solid var(--headlines-color); --chatbox-button-size: 14px; --fullpage-chatbox-button-size: 16px; diff --git a/src/shared/styles/themes/dracula.scss b/src/shared/styles/themes/dracula.scss index 5fab8303b..2518c96fe 100644 --- a/src/shared/styles/themes/dracula.scss +++ b/src/shared/styles/themes/dracula.scss @@ -23,6 +23,13 @@ // --- + --headlines-color: var(--pink); + --headline-head-text-color: var(--headlines-color); + --headline-head-bg-color: var(--background); + --headline-message-color: var(--headlines-color); + --headline-separator-border-bottom: 2px solid var(--headlines-color); + --headline-head-border-bottom: 0.15em solid var(--headlines-color); + --icon-hover-color: var(--cyan); --gray-color: var(--comment); diff --git a/src/templates/headline_list.js b/src/templates/headline_list.js deleted file mode 100644 index 3528f8424..000000000 --- a/src/templates/headline_list.js +++ /dev/null @@ -1,19 +0,0 @@ -import { html } from "lit"; - -const tpl_headline_box = (o) => html` -
- ${o.headlinebox.get('jid')} -
-`; - - -export default (o) => html` -
-
- ${ o.headlineboxes.map(headlinebox => tpl_headline_box(Object.assign({headlinebox}, o))) } -
-
-`;