Skip to content

Commit 346ac15

Browse files
lenadaxlenadax
committed
add more settings to layout demo.
1 parent 0a26ca5 commit 346ac15

5 files changed

Lines changed: 157 additions & 18 deletions

File tree

‎examples/cone.example/src/cone/example/browser/__init__.py‎

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,13 @@ def configure_resources(config, settings):
5858
'personaltools': True,
5959
'pathbar': True,
6060
'sidebar_left': ['navtree'],
61+
'sidebar_left_static': False,
62+
'sidebar_left_min_width': 150,
6163
'sidebar_right': ['tutorial'],
64+
'sidebar_right_static': False,
65+
'sidebar_right_min_width': 150,
66+
'limit_content_width': True,
67+
'center_content': False
6268
}
6369

6470

@@ -86,7 +92,13 @@ def __init__(self, model=None, request=None):
8692
self.personaltools = session.get('layout.personaltools', LAYOUT_DEMO_DEFAULTS['personaltools'])
8793
self.pathbar = session.get('layout.pathbar', LAYOUT_DEMO_DEFAULTS['pathbar'])
8894
self.sidebar_left = session.get('layout.sidebar_left', LAYOUT_DEMO_DEFAULTS['sidebar_left'])
95+
self.sidebar_left_static = session.get('layout.sidebar_left_static', LAYOUT_DEMO_DEFAULTS['sidebar_left_static'])
96+
self.sidebar_left_min_width = session.get('layout.sidebar_left_min_width', LAYOUT_DEMO_DEFAULTS['sidebar_left_min_width'])
8997
self.sidebar_right = session.get('layout.sidebar_right', LAYOUT_DEMO_DEFAULTS['sidebar_right'])
98+
self.sidebar_right_static = session.get('layout.sidebar_right_static', LAYOUT_DEMO_DEFAULTS['sidebar_right_static'])
99+
self.sidebar_right_min_width = session.get('layout.sidebar_right_min_width', LAYOUT_DEMO_DEFAULTS['sidebar_right_min_width'])
100+
self.limit_content_width = session.get('layout.limit_content_width', LAYOUT_DEMO_DEFAULTS['limit_content_width'])
101+
self.center_content = session.get('layout.center_content', LAYOUT_DEMO_DEFAULTS['center_content'])
90102

91103

92104
@tile(name='toggle_tutorial', permission='view')
@@ -113,7 +125,10 @@ class ToggleLayoutBoolTile(Tile):
113125

114126
def render(self):
115127
setting = self.request.params.get('setting')
116-
if setting in ('mainmenu', 'livesearch', 'personaltools', 'pathbar'):
128+
if setting in (
129+
'mainmenu', 'livesearch', 'personaltools', 'pathbar',
130+
'limit_content_width', 'sidebar_left_static',
131+
'sidebar_right_static', 'center_content'):
117132
session = self.request.session
118133
key = f'layout.{setting}'
119134
current = session.get(key, LAYOUT_DEMO_DEFAULTS.get(setting, True))
@@ -149,6 +164,28 @@ def render(self):
149164
return ''
150165

151166

167+
@tile(name='set_layout_number', permission='view')
168+
class SetLayoutNumberTile(Tile):
169+
"""Set a numeric layout setting via session (for LayoutDemo page only)."""
170+
171+
def render(self):
172+
setting = self.request.params.get('setting')
173+
value = self.request.params.get('value')
174+
if setting in ('sidebar_left_min_width', 'sidebar_right_min_width') and value:
175+
try:
176+
value = int(value)
177+
session = self.request.session
178+
key = f'layout.{setting}'
179+
session[key] = value
180+
except ValueError:
181+
pass
182+
url = make_url(self.request, node=self.model)
183+
ajax_continue(self.request, [
184+
AjaxEvent(url, 'contextchanged', '#layout')
185+
])
186+
return ''
187+
188+
152189
@tile(name='reset_layout', permission='view')
153190
class ResetLayoutTile(Tile):
154191
"""Reset all layout settings to defaults (for LayoutDemo page only)."""

‎examples/cone.example/src/cone/example/browser/static/cone.example.css‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,15 @@ tr.state-public td.title a {
173173
z-index: 100;
174174
margin-bottom: 4px;
175175
}
176+
#layout_config_demo > .btn.tooltip-left:hover::after {
177+
left: 0;
178+
transform: none;
179+
}
180+
#layout_config_demo > .btn.tooltip-right:hover::after {
181+
right: 0;
182+
left: auto;
183+
transform: none;
184+
}
176185
#layout_config_demo > .btn[title]:hover::before {
177186
content: '';
178187
position: absolute;

‎examples/cone.example/src/cone/example/browser/templates/layout.pt‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -69,7 +69,7 @@
6969
<!-- sidebar -->
7070
<div id="sidebar_left"
7171
tal:condition="config.sidebar_left and request.has_permission('view', model)"
72-
class="d-flex flex-column flex-shrink-0 pt-1 px-0 pb-5"
72+
tal:attributes="class 'd-flex flex-column flex-shrink-0 pt-1 px-0 pb-5' + (' static' if config.sidebar_left_static else '')"
7373
data-min-width="${config.sidebar_left_min_width}"
7474
data-mode="${config.sidebar_left_mode}"
7575
data-tiles="${context.dump(config.sidebar_left)}">
@@ -124,7 +124,8 @@
124124
<!-- content -->
125125
<div id="content"
126126
tal:define="css 'd-flex flex-column px-3 pb-4 py-2 overflow-auto';
127-
css css + ' container-xxl ms-0' if userid and config.limit_content_width else css;"
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;"
128129
tal:attributes="class css"
129130
ajax:bind="contextchanged"
130131
ajax:action="content:#content:inner">
@@ -147,7 +148,7 @@
147148

148149
<div id="sidebar_right"
149150
tal:condition="config.sidebar_right and request.has_permission('view', model)"
150-
class="d-flex flex-column flex-shrink-0 px-0 pb-5"
151+
tal:attributes="class 'd-flex flex-column flex-shrink-0 px-0 pb-5' + (' static' if config.sidebar_right_static else '')"
151152
data-min-width="${config.sidebar_right_min_width}"
152153
data-mode="${config.sidebar_right_mode}"
153154
data-tiles="${context.dump(config.sidebar_right)}">

‎examples/cone.example/src/cone/example/layout/browser.py‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,29 @@ def has_navtree(self):
5656
def has_tutorial(self):
5757
return 'tutorial' in self.sidebar_right
5858

59+
@property
60+
def limit_content_width(self):
61+
return self.get_setting('limit_content_width')
62+
63+
@property
64+
def sidebar_left_static(self):
65+
return self.get_setting('sidebar_left_static')
66+
67+
@property
68+
def sidebar_left_min_width(self):
69+
return self.get_setting('sidebar_left_min_width')
70+
71+
@property
72+
def sidebar_right_static(self):
73+
return self.get_setting('sidebar_right_static')
74+
75+
@property
76+
def sidebar_right_min_width(self):
77+
return self.get_setting('sidebar_right_min_width')
78+
79+
@property
80+
def center_content(self):
81+
return self.get_setting('center_content')
5982

6083
# tutorial
6184

‎examples/cone.example/src/cone/example/layout/templates/layout_view.pt‎

Lines changed: 83 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -14,15 +14,10 @@
1414
</h4>
1515

1616
<p class="card-text text-muted">
17-
Dynamic layout configuration with session-based element toggling.
17+
The Layout Attributes on this page are mapped to this Page's LayoutConfig.
18+
Try changing the elements below!
1819
</p>
1920

20-
<div class="mt-2">
21-
<span class="badge example-badge-layout">LayoutConfig</span>
22-
<span class="badge example-badge-layout">Session State</span>
23-
<span class="badge example-badge-layout">AjaxEvent</span>
24-
</div>
25-
2621
</div>
2722

2823
</div>
@@ -32,7 +27,7 @@
3227
<h5 class="mb-0">Default Layout Elements</h5>
3328
</div>
3429
<div id="layout_config_demo" class="card-body">
35-
<div class="logo btn"
30+
<div class="tooltip-left logo btn"
3631
title="show_logo: Display application logo (not configurable in this demo)">
3732
Logo
3833
</div>
@@ -45,15 +40,15 @@
4540
Mainmenu
4641
</a>
4742
<a href="#"
48-
tal:attributes="class 'livesearch btn ajax' + (' active' if context.livesearch else '')"
43+
tal:attributes="class 'tooltip-right livesearch btn ajax' + (' active' if context.livesearch else '')"
4944
title="livesearch: Enable live search input (default: True)"
5045
ajax:bind="click"
5146
ajax:target="${context.ajax_url}?setting=livesearch"
5247
ajax:action="toggle_layout_bool:NONE:NONE">
5348
Livesearch
5449
</a>
5550
<a href="#"
56-
tal:attributes="class 'personaltools btn ajax' + (' active' if context.personaltools else '')"
51+
tal:attributes="class 'tooltip-right personaltools btn ajax' + (' active' if context.personaltools else '')"
5752
title="personaltools: User dropdown menu (default: True)"
5853
ajax:bind="click"
5954
ajax:target="${context.ajax_url}?setting=personaltools"
@@ -69,19 +64,21 @@
6964
Breadcrumbs
7065
</a>
7166
<a href="#"
72-
tal:attributes="class 'sidebar_left btn ajax' + (' active' if context.has_navtree else '')"
67+
tal:attributes="class 'tooltip-left sidebar_left btn ajax' + (' active' if context.has_navtree else '')"
7368
title="sidebar_left: List of tile names for left sidebar (e.g. ['navtree'])"
7469
ajax:bind="click"
7570
ajax:target="${context.ajax_url}?sidebar=left&amp;tile=navtree"
7671
ajax:action="toggle_sidebar_tile:NONE:NONE">
7772
sidebar_left
7873
</a>
7974
<div class="content_area btn"
80-
title="contenttile: Main content tile name (default: 'content')">
75+
tal:define="mode 'limited' if context.limit_content_width else 'full'"
76+
title="contenttile: Main content tile name (default: 'content'). Width mode: limit_content_width">
8177
Content Area
78+
<small class="d-block text-muted" tal:content="mode"></small>
8279
</div>
8380
<a href="#"
84-
tal:attributes="class 'sidebar_right btn ajax' + (' active' if context.has_tutorial else '')"
81+
tal:attributes="class 'tooltip-right sidebar_right btn ajax' + (' active' if context.has_tutorial else '')"
8582
title="sidebar_right: List of tile names for right sidebar (e.g. ['tutorial'])"
8683
ajax:bind="click"
8784
ajax:target="${context.ajax_url}?sidebar=right&amp;tile=tutorial"
@@ -150,10 +147,30 @@
150147
pathbar
151148
</a>
152149
</div>
150+
<div class="form-check">
151+
<a href="#"
152+
class="form-check-label ajax"
153+
ajax:bind="click"
154+
ajax:target="${context.ajax_url}?setting=limit_content_width"
155+
ajax:action="toggle_layout_bool:NONE:NONE">
156+
<i tal:attributes="class 'bi me-1 ' + ('bi-check-square' if context.limit_content_width else 'bi-square')"></i>
157+
limit_content_width
158+
</a>
159+
</div>
160+
<div class="form-check">
161+
<a href="#"
162+
class="form-check-label ajax"
163+
ajax:bind="click"
164+
ajax:target="${context.ajax_url}?setting=center_content"
165+
ajax:action="toggle_layout_bool:NONE:NONE">
166+
<i tal:attributes="class 'bi me-1 ' + ('bi-check-square' if context.center_content else 'bi-square')"></i>
167+
center_content
168+
</a>
169+
</div>
153170
</div>
154171
<div class="col-md-6">
155172
<h6>Sidebar Tiles</h6>
156-
<div class="mb-2">
173+
<div class="mb-3">
157174
<small class="text-muted">sidebar_left:</small>
158175
<div class="form-check">
159176
<a href="#"
@@ -165,6 +182,32 @@
165182
navtree
166183
</a>
167184
</div>
185+
<div class="form-check">
186+
<a href="#"
187+
class="form-check-label ajax"
188+
ajax:bind="click"
189+
ajax:target="${context.ajax_url}?setting=sidebar_left_static"
190+
ajax:action="toggle_layout_bool:NONE:NONE">
191+
<i tal:attributes="class 'bi me-1 ' + ('bi-check-square' if context.sidebar_left_static else 'bi-square')"></i>
192+
static (overlay)
193+
</a>
194+
</div>
195+
<div class="d-flex align-items-center mt-1">
196+
<small class="text-muted me-2">min_width:</small>
197+
<div class="btn-group btn-group-sm">
198+
<a href="#"
199+
class="btn btn-outline-secondary ajax"
200+
ajax:bind="click"
201+
ajax:target="${context.ajax_url}?setting=sidebar_left_min_width&amp;value=${context.sidebar_left_min_width - 50}"
202+
ajax:action="set_layout_number:NONE:NONE">-</a>
203+
<span class="btn btn-outline-secondary disabled" tal:content="context.sidebar_left_min_width">150</span>
204+
<a href="#"
205+
class="btn btn-outline-secondary ajax"
206+
ajax:bind="click"
207+
ajax:target="${context.ajax_url}?setting=sidebar_left_min_width&amp;value=${context.sidebar_left_min_width + 50}"
208+
ajax:action="set_layout_number:NONE:NONE">+</a>
209+
</div>
210+
</div>
168211
</div>
169212
<div>
170213
<small class="text-muted">sidebar_right:</small>
@@ -178,6 +221,32 @@
178221
tutorial
179222
</a>
180223
</div>
224+
<div class="form-check">
225+
<a href="#"
226+
class="form-check-label ajax"
227+
ajax:bind="click"
228+
ajax:target="${context.ajax_url}?setting=sidebar_right_static"
229+
ajax:action="toggle_layout_bool:NONE:NONE">
230+
<i tal:attributes="class 'bi me-1 ' + ('bi-check-square' if context.sidebar_right_static else 'bi-square')"></i>
231+
static (overlay)
232+
</a>
233+
</div>
234+
<div class="d-flex align-items-center mt-1">
235+
<small class="text-muted me-2">min_width:</small>
236+
<div class="btn-group btn-group-sm">
237+
<a href="#"
238+
class="btn btn-outline-secondary ajax"
239+
ajax:bind="click"
240+
ajax:target="${context.ajax_url}?setting=sidebar_right_min_width&amp;value=${context.sidebar_right_min_width - 50}"
241+
ajax:action="set_layout_number:NONE:NONE">-</a>
242+
<span class="btn btn-outline-secondary disabled" tal:content="context.sidebar_right_min_width">150</span>
243+
<a href="#"
244+
class="btn btn-outline-secondary ajax"
245+
ajax:bind="click"
246+
ajax:target="${context.ajax_url}?setting=sidebar_right_min_width&amp;value=${context.sidebar_right_min_width + 50}"
247+
ajax:action="set_layout_number:NONE:NONE">+</a>
248+
</div>
249+
</div>
181250
</div>
182251
</div>
183252
</div>

0 commit comments

Comments
 (0)