NodeBB/nodebb-theme-harmony
2
0
Fork 0
mirror of https://hk.gh-proxy.com/https://github.com/NodeBB/nodebb-theme-harmony.git synced 2025-10-04 05:11:21 +08:00
Code Issues Projects Packages Wiki Activity Actions

alternative topic sidebar

Browse source
This commit is contained in:
Barış Soner Uşaklı 2025-02-05 19:54:17 -05:00
parent 856f659e20
commit 83a1f1e183
10 changed files with 75 additions and 58 deletions
Download patch file Download diff file Expand all files Collapse all files

2
library.js
View file

@ -15,6 +15,7 @@ const defaults = {
centerHeaderElements: 'off',
mobileTopicTeasers: 'off',
stickyToolbar: 'on',
topicSidebarTools: 'off',
autohideBottombar: 'on',
openSidebars: 'off',
chatModals: 'off',
@ -147,6 +148,7 @@ library.loadThemeConfig = async function (uid) {
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.openSidebars = config.openSidebars === 'on';
config.chatModals = config.chatModals === 'on';

18
scss/mixins.scss
View file

@ -35,24 +35,6 @@
margin-left: 1.5rem;
transition: border-color 1s ease-out;

&:first-child {
&:before {
content: '';
position: absolute;
top: 0;
height: 16px;
width: 16px;
background-color: $border-color;
border-radius: 100%;
transform: translate(calc(-50% - .5px), -100%);
transition: background-color 1s ease-out;
}

&.highlight:before {
background-color: $primary;
}
}

&:last-child {
padding-bottom: 2rem;


4
scss/modules/topic-navigator.scss
View file

@ -21,8 +21,8 @@ body.template-topic {
min-width: 170px;
}
.scroller-container {
left: 10px;
height: 300px;
left: 16px;
height: 275px;
border-left: 2px solid $border-color;

.scroller-thumb {

11
templates/account/theme.tpl
View file

@ -37,6 +37,17 @@
</label>
</div>

<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="topicSidebarTools" name="topicSidebarTools" {{{ if theme.topicSidebarTools }}}checked{{{ end }}}>
<label class="form-check-label" for="topicSidebarTools">
[[themes/harmony:settings.topicSidebarTools]]
<p class="form-text mb-0">
[[themes/harmony:settings.topicSidebarTools.help]]
</p>
</label>
</div>


<div class="form-check form-switch mb-3">
<input class="form-check-input" type="checkbox" role="switch" id="autohideBottombar" name="autohideBottombar" {{{ if theme.autohideBottombar }}}checked{{{ end }}}>
<label class="form-check-label" for="autohideBottombar">

9
templates/admin/plugins/harmony.tpl
View file

@ -30,6 +30,15 @@
</p>
</div>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="topicSidebarTools" name="topicSidebarTools" />
<div for="topicSidebarTools" class="form-check-label">
[[themes/harmony:settings.topicSidebarTools]]
<p class="form-text">
[[themes/harmony:settings.topicSidebarTools.help]]
</p>
</div>
</div>
<div class="form-check form-switch">
<input type="checkbox" class="form-check-input" id="autohideBottombar" name="autohideBottombar" />
<div for="autohideBottombar" class="form-check-label">

14
templates/partials/post_bar.tpl
View file

@ -1,14 +1,8 @@
<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}}">
<div class="{{{ if config.theme.stickyToolbar }}}sticky-tools{{{ end }}} {{{ if config.theme.topicSidebarTools }}}d-block d-lg-none{{{ end }}}">
<nav class="d-flex flex-nowrap my-2 p-0 border-0 rounded topic-main-buttons">
<div class="d-flex flex-row p-2 text-bg-light border rounded w-100 align-items-center">
<div class="d-flex me-auto mb-0 gap-2 align-items-center flex-wrap">
{{{ if loggedIn }}}
<button component="topic/mark-unread" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center">
<i class="fa fa-fw fa-inbox text-primary"></i>
<span class="d-none d-md-inline fw-semibold">[[topic:mark-unread]]</span>
</button>
{{{ end }}}

<!-- IMPORT partials/topic/mark-unread.tpl -->
<!-- IMPORT partials/topic/watch.tpl -->
<!-- IMPORT partials/topic/sort.tpl -->
<!-- IMPORT partials/topic/tools.tpl -->
@ -16,10 +10,6 @@
{{{ if (!feeds:disableRSS && rssFeedUrl) }}}
<a class="btn btn-ghost btn-sm d-none d-lg-flex align-items-center align-self-stretch" target="_blank" href="{rssFeedUrl}" title="[[global:rss-feed]]"><i class="fa fa-rss text-primary"></i></a>
{{{ end }}}

{{{ if browsingUsers }}}
<div class="hidden-xs"><!-- IMPORT partials/topic/browsing-users.tpl --></div>
{{{ end }}}
</div>
<!-- IMPORT partials/topic/reply-button.tpl -->
</div>

6
templates/partials/topic/mark-unread.tpl Normal file
View file

@ -0,0 +1,6 @@
{{{ if loggedIn }}}
<button component="topic/mark-unread" class="btn btn-ghost btn-sm ff-secondary d-flex gap-2 align-items-center">
<i class="fa fa-fw fa-inbox text-primary"></i>
<span class="d-none d-md-inline fw-semibold">[[topic:mark-unread]]</span>
</button>
{{{ end }}}

36
templates/partials/topic/navigator.tpl
View file

@ -1,26 +1,22 @@
<div class="pagination-block d-none d-lg-block flex-grow-1 mb-4">
<div class="d-flex justify-content-end sticky-top mt-4" style="top:6rem;z-index:1;">
<div class="ps-1 ps-md-0 d-inline-block">
<div class="scroller-content d-flex gap-2 flex-column align-items-start">
<button class="pagetop btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
<div class="scroller-container position-relative">
<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
<div>
<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
</div>
</div>

<div class="unread d-inline-block position-absolute bottom-0">
<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
<a class="text-decoration-none" href="{url}" tabindex="-1" aria-disabled="true" aria-label="[[topic:unread-posts-link]]"></a>
</div>
</div>
<div class="pagination-block d-none d-lg-block">
<div class="scroller-content d-flex gap-2 flex-column align-items-start">
<button class="pagetop btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px 8px;"><i class="fa fa-fw fa-chevron-up"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./timestampISO}"></span></button>
<div class="scroller-container position-relative">
<div class="scroller-thumb d-flex gap-2 text-nowrap position-relative" style="height: 40px;">
<div class="scroller-thumb-icon bg-primary rounded d-inline-block" style="width:9px; height: 40px;"></div>
<div>
<p class="small thumb-text d-none d-md-inline-block ff-secondary fw-semibold user-select-none mb-0"></p>
<p class="meta thumb-timestamp timeago text-xs text-muted ff-secondary fw-semibold mb-0 user-select-none"></p>
</div>
</div>

<div class="unread d-inline-block position-absolute bottom-0">
<div class="meta small position-absolute top-50 translate-middle-y text-nowrap fw-semibold ms-2">
<a class="text-decoration-none" href="{url}" tabindex="-1" aria-disabled="true" aria-label="[[topic:unread-posts-link]]"></a>
</div>
<button class="pagebottom btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px;"><i class="fa fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
</div>
</div>
<button class="pagebottom btn btn-ghost btn-sm ff-secondary d-inline-flex border-0 align-items-center gap-2" style="padding: 4px 8px;"><i class="fa fa-fw fa-chevron-down"></i> <span class="timeago text-xs text-muted text-nowrap" title="{./lastposttimeISO}"></span></button>
</div>
</div>


4
templates/partials/topic/reply-button.tpl
View file

@ -1,7 +1,7 @@
{{{ if privileges.topics:reply }}}
<div component="topic/reply/container" class="btn-group">
<a href="{config.relative_path}/compose?tid={tid}" class="d-flex align-items-center btn btn-sm btn-primary px-3 fw-semibold" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-reply d-sm-block d-md-none"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
<button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:reply-options]]">
<a href="{config.relative_path}/compose?tid={tid}" class="d-flex {{{ if !config.theme.topicSidebarTools}}}px-3{{{ end }}} gap-2 align-items-center btn btn-sm btn-primary fw-semibold" component="topic/reply" data-ajaxify="false" role="button"><i class="fa fa-fw fa-reply {{{ if !config.theme.topicSidebarTools}}} d-sm-block d-md-none {{{ end }}}"></i><span class="d-none d-md-block"> [[topic:reply]]</span></a>
<button type="button" class="btn btn-sm btn-primary dropdown-toggle flex-0" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false" aria-label="[[topic:reply-options]]">
<span class="caret"></span>
</button>
<ul class="dropdown-menu dropdown-menu-end p-1 text-sm" role="menu">

29
templates/topic.tpl
View file

@ -67,9 +67,9 @@

<div class="d-flex gap-0 gap-lg-5">
<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}">
<ul component="topic" class="posts timeline list-unstyled 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 -->>
<li component="post" class="{{{ if (./index != 0) }}}pt-4{{{ end }}} {{{ 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 }}}
@ -93,8 +93,29 @@
<!-- IMPORT partials/topic/quickreply.tpl -->
{{{ end }}}
</div>

<!-- IMPORT partials/topic/navigator.tpl -->
<div class="d-flex d-none d-lg-block flex-grow-1 mt-2">
<div class="sticky-top" style="{{{ if config.theme.topicSidebarTools }}}top:2rem;{{{ else }}}top:6rem; {{{ end }}} z-index:1;">
<div class="d-flex flex-column gap-3 align-items-end">
{{{ if config.theme.topicSidebarTools }}}
<div class="d-flex flex-column gap-2" style="min-width: 170px;">
<!-- IMPORT partials/topic/reply-button.tpl -->
<!-- IMPORT partials/topic/mark-unread.tpl -->
<!-- IMPORT partials/topic/watch.tpl -->
<!-- IMPORT partials/topic/sort.tpl -->
<!-- IMPORT partials/topic/tools.tpl -->
</div>
{{{ end }}}
{{{ if config.theme.topicSidebarTools }}}<hr class="my-0" style="min-width: 170px;"/>{{{ end }}}
<!-- IMPORT partials/topic/navigator.tpl -->
{{{ if config.theme.topicSidebarTools }}}<hr class="my-0" style="min-width: 170px;" />{{{ end }}}
{{{ if browsingUsers }}}
<div class="d-flex flex-column ps-2 hidden-xs" style="min-width: 170px;">
<!-- IMPORT partials/topic/browsing-users.tpl -->
</div>
{{{ end }}}
</div>
</div>
</div>
</div>

{{{ if config.usePagination }}}