Skip to content

Commit ab73614

Browse files
lenadaxlenadax
committed
collapse static sidebars by default. add limit_page_width flag.
1 parent cadcdc0 commit ab73614

9 files changed

Lines changed: 69 additions & 34 deletions

File tree

‎js/src/sidebar.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -101,6 +101,8 @@ export class Sidebar extends ResizeAware(ts.Motion) {
101101
const width = Math.max(this.min_width, this.sidebar_width);
102102
elem.css('width', width + 'px');
103103

104+
const static_data = this.elem.data('static');
105+
this.static = static_data === true || static_data === 'True';
104106
this.moving = false;
105107
this.trigger_event = this.trigger_event.bind(this);
106108
this.scrollbar = ts.query_elem('.scrollable-y', elem).data('scrollbar');
@@ -199,12 +201,20 @@ export class Sidebar extends ResizeAware(ts.Motion) {
199201
this.elem.removeClass('collapsed');
200202
this.elem.removeClass('expanded');
201203
}
202-
if (this.collapsed) {
204+
if (this.static) {
205+
if (!this.collapsed) {
206+
this.collapse();
207+
}
203208
this.elem.removeClass('responsive-expanded');
204-
this.elem.addClass('responsive-collapsed');
205-
} else {
206-
this.elem.addClass('responsive-expanded');
207209
this.elem.removeClass('responsive-collapsed');
210+
} else {
211+
if (this.collapsed) {
212+
this.elem.removeClass('responsive-expanded');
213+
this.elem.addClass('responsive-collapsed');
214+
} else {
215+
this.elem.addClass('responsive-expanded');
216+
this.elem.removeClass('responsive-collapsed');
217+
}
208218
}
209219

210220
if (this.collapsed !== this.responsive_collapsed) {

‎src/cone/app/__init__.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,7 @@ def __init__(self, model=None, request=None):
7171
self.livesearch = True
7272
self.personaltools = True
7373
self.limit_content_width = True
74+
self.limit_page_width = False
7475
self.center_content = False
7576
self.pathbar = True
7677
self.sidebar_left_mode = 'stacked' # 'toggle' or 'stacked'

‎src/cone/app/browser/layout.py‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,16 +19,16 @@
1919
from cone.app.utils import node_path
2020
from cone.tile import render_template
2121
from cone.tile import render_tile
22-
from cone.tile import Tile
2322
from cone.tile import tile
23+
from cone.tile import Tile
2424
from node.utils import LocationIterator
2525
from node.utils import safe_decode
2626
from odict import odict
2727
from pyramid.i18n import get_localizer
2828
from pyramid.i18n import negotiate_locale_name
2929
from pyramid.i18n import TranslationStringFactory
30-
import warnings
3130
import json
31+
import warnings
3232

3333

3434
_ = TranslationStringFactory('cone.app')

‎src/cone/app/browser/static/cone/cone.app.js‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1120,6 +1120,8 @@ var cone = (function (exports, $, ts) {
11201120
this.min_width = elem.data('min-width') || 115;
11211121
const width = Math.max(this.min_width, this.sidebar_width);
11221122
elem.css('width', width + 'px');
1123+
const static_data = this.elem.data('static');
1124+
this.static = static_data === true || static_data === 'True';
11231125
this.moving = false;
11241126
this.trigger_event = this.trigger_event.bind(this);
11251127
this.scrollbar = ts.query_elem('.scrollable-y', elem).data('scrollbar');
@@ -1187,12 +1189,20 @@ var cone = (function (exports, $, ts) {
11871189
this.elem.removeClass('collapsed');
11881190
this.elem.removeClass('expanded');
11891191
}
1190-
if (this.collapsed) {
1192+
if (this.static) {
1193+
if (!this.collapsed) {
1194+
this.collapse();
1195+
}
11911196
this.elem.removeClass('responsive-expanded');
1192-
this.elem.addClass('responsive-collapsed');
1193-
} else {
1194-
this.elem.addClass('responsive-expanded');
11951197
this.elem.removeClass('responsive-collapsed');
1198+
} else {
1199+
if (this.collapsed) {
1200+
this.elem.removeClass('responsive-expanded');
1201+
this.elem.addClass('responsive-collapsed');
1202+
} else {
1203+
this.elem.addClass('responsive-expanded');
1204+
this.elem.removeClass('responsive-collapsed');
1205+
}
11961206
}
11971207
if (this.collapsed !== this.responsive_collapsed) {
11981208
this.responsive_collapsed = this.collapsed;

‎src/cone/app/browser/static/cone/cone.app.min.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/cone/app/browser/templates/layout.pt‎

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@
2424
class="position-relative p-0 navbar navbar-expand navbar-light shadow-sm border-bottom">
2525

2626
<div id="header-content"
27-
class="h-100 px-0 container-fluid">
27+
tal:define="css 'h-100 px-0 ';
28+
css css + ('container-xxl' if config.limit_page_width else 'container-fluid');
29+
css css + ('' if config.center_content else ' ms-0');"
30+
tal:attributes="class css">
2831

2932
<!-- logo -->
3033
<tal:logo replace="structure tile('logo')" />
@@ -72,7 +75,8 @@
7275
tal:attributes="class 'd-flex flex-column flex-shrink-0 pt-1 px-0 pb-5' + (' static' if config.sidebar_left_static else '')"
7376
data-min-width="${config.sidebar_left_min_width}"
7477
data-mode="${config.sidebar_left_mode}"
75-
data-tiles="${context.dump(config.sidebar_left)}">
78+
data-tiles="${context.dump(config.sidebar_left)}"
79+
data-static="${config.sidebar_left_static}">
7680

7781
<div id="sidebar_collapse">
7882
<div class="collapse_btn btn btn-primary">
@@ -124,8 +128,9 @@
124128
<!-- content -->
125129
<div id="content"
126130
tal:define="css 'd-flex flex-column px-3 pb-4 py-2 overflow-auto';
127-
css css + ' container-xxl' if userid and config.limit_content_width else css;
128-
css css + ' ms-0' if userid and not config.center_content else css;"
131+
css css + (' container-xxl' if userid and config.limit_content_width else css);
132+
css css + (' container-xxl' if userid and config.limit_page_width else css);
133+
css css + (' ms-0' if userid and not config.center_content else css);"
129134
tal:attributes="class css"
130135
ajax:bind="contextchanged"
131136
ajax:action="content:#content:inner">
@@ -141,7 +146,8 @@
141146
tal:attributes="class 'd-flex flex-column flex-shrink-0 px-0 pb-5' + (' static' if config.sidebar_right_static else '')"
142147
data-min-width="${config.sidebar_right_min_width}"
143148
data-mode="${config.sidebar_right_mode}"
144-
data-tiles="${context.dump(config.sidebar_right)}">
149+
data-tiles="${context.dump(config.sidebar_right)}"
150+
data-static="${config.sidebar_right_static}">
145151

146152
<div id="sidebar_collapse">
147153
<div class="collapse_btn btn btn-secondary">

‎src/cone/app/browser/templates/pathbar.pt‎

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,33 @@
55
omit-tag="True">
66

77
<nav id="pathbar"
8-
class="contextsensitiv position-relative px-3 py-2 shadow-sm border-bottom"
8+
tal:define="config context.config"
9+
class="contextsensitiv position-relative shadow-sm border-bottom"
910
ajax:bind="contextchanged"
1011
ajax:action="pathbar:#pathbar:replace">
1112

12-
<ol class="breadcrumb m-0">
13-
<tal:li repeat="item context.items">
14-
<li tal:attributes="class item['selected'] and 'breadcrumb-item active' or 'breadcrumb-item'">
15-
<a href="${item['url']}"
16-
ajax:bind="click"
17-
ajax:target="${item['target']}"
18-
ajax:event="contextchanged:#layout"
19-
ajax:path="href"
20-
tal:content="item['title']"
21-
tal:condition="not item['selected']">
22-
Title
23-
</a>
24-
<strong tal:content="item['title']"
25-
tal:condition="item['selected']">Title</strong>
26-
</li>
27-
</tal:li>
28-
</ol>
13+
<div tal:define="css 'pathbar-wrapper px-3 py-2 ';
14+
css css + ('container-xxl' if config.limit_page_width else 'container-fluid');
15+
css css + ('' if config.center_content else ' ms-0');"
16+
tal:attributes="class css">
17+
<ol class="breadcrumb m-0">
18+
<tal:li repeat="item context.items">
19+
<li tal:attributes="class item['selected'] and 'breadcrumb-item active' or 'breadcrumb-item'">
20+
<a href="${item['url']}"
21+
ajax:bind="click"
22+
ajax:target="${item['target']}"
23+
ajax:event="contextchanged:#layout"
24+
ajax:path="href"
25+
tal:content="item['title']"
26+
tal:condition="not item['selected']">
27+
Title
28+
</a>
29+
<strong tal:content="item['title']"
30+
tal:condition="item['selected']">Title</strong>
31+
</li>
32+
</tal:li>
33+
</ol>
34+
</div>
2935
</nav>
3036

3137
</tal:block>

‎src/cone/app/interfaces.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ class ILayoutConfig(IProperties):
9292
livesearch = Attribute(u'Flag whether to display livesearch')
9393
personaltools = Attribute(u'Flag whether to display personaltools')
9494
limit_content_width = Attribute(u'Flag whether content width should be limited on large screens')
95+
limit_page_width = Attribute(u'Flag whether page width should be limited on large screens')
9596
center_content = Attribute(u'Flag whether to center the content area (used with limit_content_width)')
9697
pathbar = Attribute(u'Flag whether to display pathbar')
9798
sidebar_left = Attribute(u'Tiles which should be rendered in sidebar')

‎src/cone/app/tests/test_app.py‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,7 @@ def test_layout_config(self):
168168
self.assertTrue(config.livesearch)
169169
self.assertTrue(config.personaltools)
170170
self.assertTrue(config.limit_content_width)
171+
self.assertFalse(config.limit_page_width)
171172
self.assertTrue(config.pathbar)
172173
self.assertEqual(config.sidebar_left, ['navtree'])
173174
self.assertEqual(config.sidebar_right, [])

0 commit comments

Comments
 (0)