@okjavis/nodebb-theme-javis 1.7.0 → 2.1.0

package/templates/partials/topic/sidebar.tpl

@@ -0,0 +1,48 @@
+<div id="topic-sidebar" class="topic-sidebar">
+	<div class="d-flex flex-column gap-2">
+		<div class="topic-sidebar-actions d-flex flex-column gap-2 mb-3">
+			<!-- Reply Button -->
+			<!-- IMPORT partials/topic/reply-button.tpl -->
+
+			<!-- Mark Unread Button -->
+			{{{ if loggedIn }}}
+			<button component="topic/mark-unread" class="btn btn-ghost btn-sm d-flex gap-2 align-items-center w-100 justify-content-start">
+				<i class="fa fa-fw fa-inbox"></i>
+				<span class="fw-semibold text-nowrap">[[topic:mark-unread]]</span>
+			</button>
+			{{{ end }}}
+
+			<!-- Watching/Not Watching -->
+			<!-- IMPORT partials/topic/watch.tpl -->
+
+			<!-- Sort Options -->
+			<!-- IMPORT partials/topic/sort.tpl -->
+
+			<!-- Topic Tools (for mods/admins) -->
+			<!-- IMPORT partials/topic/tools.tpl -->
+		</div>
+
+		<!-- Post Navigator / Timeline -->
+		<div class="pagination-block flex-grow-1">
+			<div class="scroller-content d-flex gap-2 flex-column align-items-start">
+				<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center pagetop w-100 justify-content-start">
+					<i class="fa fa-fw fa-angle-up"></i>
+					<span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span>
+				</button>
+				<div class="scroller-container position-relative w-100">
+					<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
+						<div class="scroller-thumb-icon rounded d-inline-block" style="width: 4px; height: 40px;"></div>
+						<div class="d-flex flex-column">
+							<span class="thumb-text small fw-semibold mb-0"></span>
+							<span class="thumb-timestamp timeago text-xs text-muted mb-0"></span>
+						</div>
+					</div>
+				</div>
+				<button class="btn btn-ghost btn-sm d-flex gap-2 align-items-center pagebottom w-100 justify-content-start">
+					<i class="fa fa-fw fa-angle-down"></i>
+					<span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span>
+				</button>
+			</div>
+		</div>
+	</div>
+</div>

package/templates/topic.tpl

@@ -0,0 +1,133 @@
+<!-- IMPORT partials/breadcrumbs-json-ld.tpl -->
+{{{ if config.theme.enableBreadcrumbs }}}
+<!-- IMPORT partials/breadcrumbs.tpl -->
+{{{ end }}}
+{{{ if widgets.header.length }}}
+<div data-widget-area="header">
+{{{each widgets.header}}}
+{{widgets.header.html}}
+{{{end}}}
+</div>
+{{{ end }}}
+
+<div itemid="{url}" itemscope itemtype="https://schema.org/DiscussionForumPosting">
+	<meta itemprop="headline" content="{escape(titleRaw)}">
+	<meta itemprop="text" content="{escape(titleRaw)}">
+	<meta itemprop="url" content="{url}">
+	<meta itemprop="datePublished" content="{timestampISO}">
+	<meta itemprop="dateModified" content="{lastposttimeISO}">
+	<div itemprop="author" itemscope itemtype="https://schema.org/Person">
+		<meta itemprop="name" content="{author.username}">
+		{{{ if author.userslug }}}<meta itemprop="url" content="{config.relative_path}/user/{author.userslug}">{{{ end }}}
+	</div>
+
+	<div class="d-flex flex-column gap-3">
+		<div class="d-flex flex-wrap">
+			<div class="d-flex flex-column gap-3 flex-grow-1">
+				<div class="topic-header d-flex align-items-start gap-3">
+					<a href="#" onclick="history.back(); return false;" class="topic-back-btn" title="Go back">
+						<i class="fa fa-arrow-left"></i>
+					</a>
+					<h1 component="post/header" class="tracking-tight fw-semibold fs-3 mb-0 text-break {{{ if config.theme.centerHeaderElements }}}text-center{{{ end }}}">
+						<span class="topic-title" component="topic/title">{title}</span>
+					</h1>
+				</div>
+
+				<div class="topic-info d-flex gap-2 align-items-center flex-wrap {{{ if config.theme.centerHeaderElements }}}justify-content-center{{{ end }}}">
+					<span component="topic/labels" class="d-flex gap-2 {{{ if (!scheduled && (!pinned && (!locked && (!oldCid && !icons.length)))) }}}hidden{{{ end }}}">
+						<span component="topic/scheduled" class="badge badge border border-gray-300 text-body {{{ if !scheduled }}}hidden{{{ end }}}">
+							<i class="fa fa-clock-o"></i> [[topic:scheduled]]
+						</span>
+						<span component="topic/pinned" class="badge badge border border-gray-300 text-body {{{ if (scheduled || !pinned) }}}hidden{{{ end }}}">
+							<i class="fa fa-thumb-tack"></i> {{{ if !pinExpiry }}}[[topic:pinned]]{{{ else }}}[[topic:pinned-with-expiry, {isoTimeToLocaleString(./pinExpiryISO, config.userLang)}]]{{{ end }}}
+						</span>
+						<span component="topic/locked" class="badge badge border border-gray-300 text-body {{{ if !locked }}}hidden{{{ end }}}">
+							<i class="fa fa-lock"></i> [[topic:locked]]
+						</span>
+						<a component="topic/moved" href="{config.relative_path}/category/{oldCid}" class="badge badge border border-gray-300 text-body text-decoration-none {{{ if !oldCid }}}hidden{{{ end }}}">
+							<i class="fa fa-arrow-circle-right"></i> {{{ if privileges.isAdminOrMod }}}[[topic:moved-from, {oldCategory.name}]]{{{ else }}}[[topic:moved]]{{{ end }}}
+						</a>
+						{{{each icons}}}<span class="lh-1">{@value}</span>{{{end}}}
+					</span>
+					{function.buildCategoryLabel, category, "a", "border"}
+					<div data-tid="{./tid}" component="topic/tags" class="lh-1 tags tag-list d-flex flex-wrap hidden-xs hidden-empty gap-2"><!-- IMPORT partials/topic/tags.tpl --></div>
+					<div class="d-flex hidden-xs gap-2"><!-- IMPORT partials/topic/stats.tpl --></div>
+				</div>
+			</div>
+			<div class="d-flex gap-2 align-items-center mt-2 hidden-empty" component="topic/thumb/list"><!-- IMPORT partials/topic/thumbs.tpl --></div>
+		</div>
+
+		<div class="topic-layout d-flex gap-4 mb-4 mb-lg-0">
+			<!-- Main Content Area -->
+			<div class="topic flex-grow-1" style="min-width: 0;">
+				{{{ if merger }}}
+				<!-- IMPORT partials/topic/merged-message.tpl -->
+				{{{ end }}}
+				{{{ if forker }}}
+				<!-- IMPORT partials/topic/forked-message.tpl -->
+				{{{ end }}}
+				{{{ if !scheduled }}}
+				<!-- IMPORT partials/topic/deleted-message.tpl -->
+				{{{ end }}}
+
+				<div class="posts-container" style="min-width: 0;">
+					<ul component="topic" class="posts timeline list-unstyled mt-sm-2 p-0 py-3" style="min-width: 0;" data-tid="{tid}" data-cid="{cid}">
+					{{{ each posts }}}
+						<li component="post" class="pt-4 {{{ if posts.deleted }}}deleted{{{ end }}} {{{ if posts.selfPost }}}self-post{{{ end }}} {{{ if posts.topicOwnerPost }}}topic-owner-post{{{ end }}}" <!-- IMPORT partials/data/topic.tpl -->>
+							<a component="post/anchor" data-index="{./index}" id="{increment(./index, "1")}"></a>
+							<meta itemprop="datePublished" content="{./timestampISO}">
+							{{{ if ./editedISO }}}
+							<meta itemprop="dateModified" content="{./editedISO}">
+							{{{ end }}}
+
+							<!-- IMPORT partials/topic/post.tpl -->
+						</li>
+						{{{ if (config.topicPostSort != "most_votes") }}}
+						{{{ each ./events}}}<!-- IMPORT partials/topic/event.tpl -->{{{ end }}}
+						{{{ end }}}
+					{{{ end }}}
+					</ul>
+					{{{ if browsingUsers }}}
+					<div class="visible-xs">
+						<!-- IMPORT partials/topic/browsing-users.tpl -->
+						<hr/>
+					</div>
+					{{{ end }}}
+					{{{ if config.theme.enableQuickReply }}}
+					<!-- IMPORT partials/topic/quickreply.tpl -->
+					{{{ end }}}
+				</div>
+
+				{{{ if config.usePagination }}}
+				<!-- IMPORT partials/paginator.tpl -->
+				{{{ end }}}
+			</div>
+
+			<!-- Right Sidebar with Topic Actions -->
+			<div class="topic-sidebar-container d-none d-lg-block" style="width: 200px; flex-shrink: 0;">
+				<!-- IMPORT partials/topic/sidebar.tpl -->
+
+				<!-- Additional Widgets (if any) -->
+				{{{ if widgets.sidebar.length }}}
+				<div data-widget-area="sidebar" class="mt-4">
+				{{{each widgets.sidebar}}}
+				{{widgets.sidebar.html}}
+				{{{end}}}
+				</div>
+				{{{ end }}}
+			</div>
+		</div>
+	</div>
+</div>
+
+<div data-widget-area="footer">
+{{{each widgets.footer}}}
+{{widgets.footer.html}}
+{{{end}}}
+</div>
+
+{{{ if !config.usePagination }}}
+<noscript>
+<!-- IMPORT partials/paginator.tpl -->
+</noscript>
+{{{ end }}}

package/theme.js

@@ -5,8 +5,64 @@
 
 'use strict';
 
+const meta = require.main.require('./src/meta');
+const user = require.main.require('./src/user');
+const _ = require.main.require('lodash');
+
 const theme = {};
 
+// Harmony's defaults - we override openSidebars to 'on'
+const defaults = {
+  enableQuickReply: 'on',
+  enableBreadcrumbs: 'on',
+  centerHeaderElements: 'off',
+  mobileTopicTeasers: 'off',
+  stickyToolbar: 'on',
+  topicSidebarTools: 'on',
+  topMobilebar: 'off',
+  autohideBottombar: 'on',
+  openSidebars: 'on', // JAVIS override: sidebar open by default
+  chatModals: 'off',
+};
+
+/**
+ * Load theme config - replaces Harmony's loadThemeConfig
+ * Uses JAVIS defaults (with openSidebars: 'on')
+ */
+async function loadThemeConfig(uid) {
+  const [themeConfig, userConfig] = await Promise.all([
+    meta.settings.get('harmony'),
+    user.getSettings(uid),
+  ]);
+
+  // 3-tier cascade: JAVIS defaults -> theme settings -> user settings
+  const config = { ...defaults, ...themeConfig, ...(_.pick(userConfig, Object.keys(defaults))) };
+
+  // Convert 'on'/'off' strings to boolean
+  config.enableQuickReply = config.enableQuickReply === 'on';
+  config.enableBreadcrumbs = config.enableBreadcrumbs === 'on';
+  config.centerHeaderElements = config.centerHeaderElements === 'on';
+  config.mobileTopicTeasers = config.mobileTopicTeasers === 'on';
+  config.stickyToolbar = config.stickyToolbar === 'on';
+  config.topicSidebarTools = config.topicSidebarTools === 'on';
+  config.autohideBottombar = config.autohideBottombar === 'on';
+  config.topMobilebar = config.topMobilebar === 'on';
+  config.openSidebars = config.openSidebars === 'on';
+  config.chatModals = config.chatModals === 'on';
+
+  return config;
+}
+
+/**
+ * Hook: filter:config.get
+ * Sets config.theme with JAVIS-specific defaults
+ */
+theme.getThemeConfig = async function (config) {
+  config.theme = await loadThemeConfig(config.uid);
+  config.openDraftsOnPageLoad = false;
+  return config;
+};
+
 theme.defineWidgetAreas = async (areas) => {
   // Define widget areas like Harmony does
   const locations = ['header', 'sidebar', 'footer'];

package/theme.scss

@@ -12,6 +12,7 @@
 // JAVIS Custom Styles
 @import "./scss/variables";
 @import "./scss/base";
+@import "./scss/header";
 @import "./scss/buttons";
 @import "./scss/forms";
 @import "./scss/cards";
@@ -19,3 +20,4 @@
 @import "./scss/sidebar-user";
 @import "./scss/categories";
 @import "./scss/feed";
+@import "./scss/topic";