diff --git a/client/css/colors.styl b/client/css/colors.styl index cf7e7caf..e9458139 100644 --- a/client/css/colors.styl +++ b/client/css/colors.styl @@ -18,6 +18,8 @@ $message-error-border-color = #FCC $message-error-background-color = #FFF5F5 $message-success-border-color = #D3E3D3 $message-success-background-color = #F5FFF5 +$pool-navigator-border-color = #888 +$pool-navigator-background-color = #EEE $input-bad-border-color = #FCC $input-bad-background-color = #FFF5F5 $input-good-border-color = #D3E3D3 diff --git a/client/css/pool-navigator-control.styl b/client/css/pool-navigator-control.styl index aaf6fac2..c9f96a53 100644 --- a/client/css/pool-navigator-control.styl +++ b/client/css/pool-navigator-control.styl @@ -1,9 +1,34 @@ @import colors -$pool-navigator-header-background-color = $top-navigation-color -$pool-navigator-header-background-color-darktheme = $top-navigation-color-darktheme .pool-navigator-container - padding: 0 0 0 60px + padding: 0 0.50em 0 0.50em + margin: 0 auto + + .pool-info-wrapper + box-sizing: border-box + width: 100% + max-width: 40em + margin: 0 0 1em 0 + display: flex + padding: 0.5em 1em + border: 1px solid $pool-navigator-border-color + background: $pool-navigator-background-color + &.active + font-weight: bold + + .pool-name + flex: 1 1; + text-align: center; + overflow: hidden; + white-space: nowrap; + -o-text-overflow: ellipsis; + text-overflow: ellipsis; + + .prev, .next + flex: 0 1; + margin: 0 .25em; + white-space: nowrap; + .darktheme .pool-navigator-container background: $pool-navigator-header-background-color-darktheme diff --git a/client/html/pool_navigator.tpl b/client/html/pool_navigator.tpl index e71c4194..88e7b53e 100644 --- a/client/html/pool_navigator.tpl +++ b/client/html/pool_navigator.tpl @@ -1,2 +1,31 @@
+
+ + <% if (ctx.canViewPosts && ctx.prevPost) { %> + + <% } %> + ‹ prev + <% if (ctx.canViewPosts && ctx.prevPost) { %> + + <% } %> + + + <% if (ctx.canViewPools) { %> + + <% } %> + <%- ctx.pool.names[0] %> + <% if (ctx.canViewPools) { %> + + <% } %> + + + <% if (ctx.canViewPosts && ctx.nextPost) { %> + + <% } %> + next › + <% if (ctx.canViewPosts && ctx.nextPost) { %> + + <% } %> + +
diff --git a/client/js/controllers/post_main_controller.js b/client/js/controllers/post_main_controller.js index a55acb9d..a2717e85 100644 --- a/client/js/controllers/post_main_controller.js +++ b/client/js/controllers/post_main_controller.js @@ -16,10 +16,10 @@ class PostMainController extends BasePostController { constructor(ctx, editMode) { super(ctx); - let poolPostsAround = Promise.resolve({results: [], activePool: null}) - if (api.hasPrivilege("pools.list") && api.hasPrivilege("pools.view")) { + let poolPostsAround = Promise.resolve({results: [], activePool: null}); + if (api.hasPrivilege("pools:list") && api.hasPrivilege("pools:view")) { poolPostsAround = PostList.getPoolPostsAround( - ctxt.parameters.id, + ctx.parameters.id, parameters ? parameters.query : null ); } @@ -35,6 +35,7 @@ class PostMainController extends BasePostController { ]).then( (responses) => { const [post, aroundResponse, poolPostsAroundResponse] = responses; + let activePool = null; // remove junk from query, but save it into history so that it can // be still accessed after history navigation / page refresh @@ -48,13 +49,20 @@ class PostMainController extends BasePostController { ) : uri.formatClientLink("post", ctx.parameters.id); router.replace(url, ctx.state, false); + console.log(parameters.query); + parameters.query.split(" ").forEach((item) => { + const found = item.match(/^pool:([0-9]+)/i); + if (found) { + activePool = parseInt(found[1]); + } + }); } this._post = post; this._view = new PostMainView({ post: post, - poolPostsAround: poolPostsAroundResponse.results, - activePool: poolPostsAroundResponse.activePool, + poolPostsAround: poolPostsAroundResponse, + activePool: activePool, editMode: editMode, prevPostId: aroundResponse.prev ? aroundResponse.prev.id diff --git a/client/js/controls/pool_navigator_control.js b/client/js/controls/pool_navigator_control.js index afaa45ee..54de6c7a 100644 --- a/client/js/controls/pool_navigator_control.js +++ b/client/js/controls/pool_navigator_control.js @@ -8,19 +8,26 @@ const views = require("../util/views.js"); const template = views.getTemplate("pool-navigator"); class PoolNavigatorControl extends events.EventTarget { - constructor(hostNode, pool) { + constructor(hostNode, poolPostAround, isActivePool) { super(); this._hostNode = hostNode; - this._pool = pool; + this._poolPostAround = poolPostAround; + this._isActivePool = isActivePool; + + views.replaceContent( + this._hostNode, + template({ + pool: poolPostAround.pool, + parameters: { query: `pool:${poolPostAround.pool.id}` }, + linkClass: misc.makeCssName(poolPostAround.pool.category, "pool"), + canViewPosts: api.hasPrivilege("posts:view"), + canViewPools: api.hasPrivilege("pools:view"), + prevPost: poolPostAround.prevPost, + nextPost: poolPostAround.nextPost, + isActivePool: isActivePool + }) + ); } - - // get _formNode() { - // return this._hostNode.querySelector("form"); - // } - - // get _scoreContainerNode() { - // return this._hostNode.querySelector(".score-container"); - // } } module.exports = PoolNavigatorControl; diff --git a/client/js/controls/pool_navigator_list_control.js b/client/js/controls/pool_navigator_list_control.js index dd6a09b7..bc2ff221 100644 --- a/client/js/controls/pool_navigator_list_control.js +++ b/client/js/controls/pool_navigator_list_control.js @@ -7,44 +7,53 @@ const PoolNavigatorControl = require("../controls/pool_navigator_control.js"); const template = views.getTemplate("pool-navigator-list"); class PoolNavigatorListControl extends events.EventTarget { - constructor(hostNode, pools) { + constructor(hostNode, poolPostsAround, activePool) { super(); this._hostNode = hostNode; + this._poolPostsAround = poolPostsAround; + this._activePool = activePool; + this._indexToNode = {}; - const poolList = []; - for (let pool of poolList) { - this._installPoolNavigatorNode(pool); + for (let [i, entry] of this._poolPostsAround.entries()) { + this._installPoolNavigatorNode(entry, i); } } get _poolNavigatorListNode() { - return this._hostNode.querySelector("ul"); + return this._hostNode; } - _installPoolNavigatorNode(pool) { - const poolListItemNode = document.createElement("li"); + _installPoolNavigatorNode(poolPostAround, i) { + const isActivePool = poolPostAround.pool.id == this._activePool + const poolListItemNode = document.createElement("div"); const poolControl = new PoolNavigatorControl( - pool + poolListItemNode, + poolPostAround, + isActivePool ); // events.proxyEvent(commentControl, this, "submit"); // events.proxyEvent(commentControl, this, "score"); // events.proxyEvent(commentControl, this, "delete"); - // this._commentIdToNode[comment.id] = commentListItemNode; - this._poolNavigatorListNode.appendChild(poolListItemNode); + this._indexToNode[poolPostAround.id] = poolListItemNode; + if (isActivePool) { + this._poolNavigatorListNode.insertBefore(poolListItemNode, this._poolNavigatorListNode.firstChild); + } else { + this._poolNavigatorListNode.appendChild(poolListItemNode); + } } - _uninstallCommentNode(pool) { - const poolListItemNode = this._commentIdToNode[pool.id]; + _uninstallPoolNavigatorNode(index) { + const poolListItemNode = this._indexToNode[index]; poolListItemNode.parentNode.removeChild(poolListItemNode); } - // _evtAdd(e) { - // this._installPoolNode(e.detail.comment); - // } + _evtAdd(e) { + this._installPoolNavigatorNode(e.detail.index); + } - // _evtRemove(e) { - // this._uninstallPoolNode(e.detail.comment); - // } + _evtRemove(e) { + this._uninstallPoolNavigatorNode(e.detail.index); + } } module.exports = PoolNavigatorListControl; diff --git a/client/js/views/post_main_view.js b/client/js/views/post_main_view.js index 5c031243..d8168ad4 100644 --- a/client/js/views/post_main_view.js +++ b/client/js/views/post_main_view.js @@ -59,7 +59,7 @@ class PostMainView { this._installSidebar(ctx); this._installCommentForm(); this._installComments(ctx.post.comments); - this._installPoolNavigators(ctx); + this._installPoolNavigators(ctx.poolPostsAround, ctx.activePool); const showPreviousImage = () => { if (ctx.prevPostId) { @@ -140,9 +140,9 @@ class PostMainView { } } - _installPoolNavigators(ctx) { + _installPoolNavigators(poolPostsAround, activePool) { const poolNavigatorsContainerNode = document.querySelector( - "#content-holder .poolnavigators-container" + "#content-holder .pool-navigators-container" ); if (!poolNavigatorsContainerNode) { return; @@ -150,7 +150,8 @@ class PostMainView { this.poolNavigatorsControl = new PoolNavigatorListControl( poolNavigatorsContainerNode, - null + poolPostsAround, + activePool ); } diff --git a/server/szurubooru/func/posts.py b/server/szurubooru/func/posts.py index cc553167..7b0e81e2 100644 --- a/server/szurubooru/func/posts.py +++ b/server/szurubooru/func/posts.py @@ -1033,8 +1033,8 @@ def serialize_pool_posts_around(around: List[PoolPostsAround]) -> Optional[rest. return [ { "pool": pools.serialize_micro_pool(entry.pool), - "prev_post": entry.prev_post, - "next_post": entry.next_post + "prevPost": entry.prev_post, + "nextPost": entry.next_post } for entry in sort_pool_posts_around(around) ]