From 5f39b1c072d6fa12b1bfbd8ca9e2c6e80eab5638 Mon Sep 17 00:00:00 2001 From: Lena Daxenbichler Date: Tue, 3 Dec 2024 13:25:12 +0100 Subject: [PATCH] style referencebrowser as input-group --- scss/styles.scss | 3 +++ src/cone/app/browser/referencebrowser.py | 7 ++++--- src/cone/app/browser/static/cone/cone.app.css | 4 ++++ src/cone/app/browser/static/cone/cone.app.min.css | 2 +- 4 files changed, 12 insertions(+), 4 deletions(-) diff --git a/scss/styles.scss b/scss/styles.scss index abf9f825..856f20b7 100644 --- a/scss/styles.scss +++ b/scss/styles.scss @@ -15,6 +15,9 @@ body { #footer { z-index: 1; } +.referencebrowser_trigger { + cursor: pointer; +} @import 'content.scss'; @import 'form.scss'; diff --git a/src/cone/app/browser/referencebrowser.py b/src/cone/app/browser/referencebrowser.py index 4bbacf7b..78a46024 100644 --- a/src/cone/app/browser/referencebrowser.py +++ b/src/cone/app/browser/referencebrowser.py @@ -287,7 +287,7 @@ def reference_extractor(widget, data): return data.request['{}.uid'.format(widget.dottedpath)] -def wrap_ajax_target(rendered, widget, data): +def wrap_ajax_target(rendered, widget, data, cssclass): target = widget.attrs['target'] if not target: request = data.request.request @@ -327,13 +327,14 @@ def wrap_ajax_target(rendered, widget, data): target = '{}{}'.format(target, query) attrs = { 'ajax:target': target, + 'class_': cssclass } return tag('span', rendered, **attrs) def reference_trigger_renderer(widget, data): attrs = { - 'class': 'referencebrowser_trigger', + 'class': 'referencebrowser_trigger input-group-text', 'data-reference-name': widget.dottedpath } return data.tag( @@ -411,7 +412,7 @@ def reference_edit_renderer(widget, data): } rendered = tag('input', **text_attrs) + tag('input', **hidden_attrs) trigger = reference_trigger_renderer(widget, data) - return wrap_ajax_target(rendered + trigger, widget, data) + return wrap_ajax_target(rendered + trigger, widget, data, 'input-group') def reference_display_renderer(widget, data): diff --git a/src/cone/app/browser/static/cone/cone.app.css b/src/cone/app/browser/static/cone/cone.app.css index b9ca98a6..6271b15f 100644 --- a/src/cone/app/browser/static/cone/cone.app.css +++ b/src/cone/app/browser/static/cone/cone.app.css @@ -84,6 +84,10 @@ body { z-index: 1; } +.referencebrowser_trigger { + cursor: pointer; +} + /* content */ #content { height: calc(100% - 40px); diff --git a/src/cone/app/browser/static/cone/cone.app.min.css b/src/cone/app/browser/static/cone/cone.app.min.css index ea946fab..a09bf219 100644 --- a/src/cone/app/browser/static/cone/cone.app.min.css +++ b/src/cone/app/browser/static/cone/cone.app.min.css @@ -1 +1 @@ -:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}:root{--sidebar-width: 300px;--navbar-height: 50px}html{height:100%;width:100%}body{height:100%}#footer{z-index:1}#content{height:calc(100% - 40px)}#main-area{width:0 !important}tr.selectable td{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#input-contentform-save{margin-right:1rem}#header-logo{z-index:4}#header-logo>span,#header-logo-placeholder>span{font-size:1.5rem !important}#header-logo-placeholder{visibility:hidden}#main-area.compact #header-main.mobile-menu-open #header-logo-placeholder{display:none}#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{max-height:calc(100vh - 50px);position:relative;overflow:hidden;padding:0 !important;z-index:3}@media screen and (max-width: 768px){#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{z-index:1200}}#main-area.compact #header-main.mobile-menu-open #header-content{align-items:flex-start}#main-area.compact #header-main.mobile-menu-open .navbar-toggler{height:50px !important}#main-area.compact #header-main.mobile-menu-open #mainmenu{align-items:baseline}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollbar{display:none !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollable-content{right:0 !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu{border:none}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li .dropdown-item{padding:8px 20px}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li:first-child .dropdown-item{padding-top:0}#main-area.super-compact #personaltools{height:50px;justify-content:space-between;margin:auto 20px}#main-area.super-compact #personaltools #colortoggler{padding-left:0}#main-area.full #mainmenu{height:var(--navbar-height)}#main-area.full #mainmenu .dropdown-menu{position:fixed}#main-area.full #personaltools{height:100%}#main-area #header-main{height:var(--navbar-height)}#main-area #header-main.navbar-expand #header-content{flex-direction:row-reverse}#main-area #header-main.navbar-expand #navbar-content-wrapper{box-shadow:none !important;background:none}#main-area #header-main:not(.navbar-expand) #header-content{flex-direction:row}#main-area #header-main:not(.navbar-expand) #navbar-content{flex-direction:column}#main-area #header-main:not(.navbar-expand) #livesearch{order:0;width:100%;padding-left:55px !important;padding-right:15px !important}#main-area #header-main:not(.navbar-expand) #mainmenu{order:1;margin-left:10px !important;margin-top:20px;margin-bottom:20px}#main-area #header-main:not(.navbar-expand) #mainmenu ul>li{display:block !important}#main-area #header-main #navbar-content-wrapper{min-width:0;z-index:1}#main-area #header-main #navbar-content-wrapper #navbar-content{min-width:0}#main-area #header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#main-area #header-main #mainmenu .nav-item.active .nav-link{color:#4e7bba}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a{height:20px}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a img{vertical-align:baseline}#main-area #header-main #personaltools #colortoggler #colortoggle-switch{width:2rem;height:1rem}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#form-loginform{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{display:grid;grid-template-columns:1fr 2fr;margin-bottom:.5rem;gap:1rem}@media(max-width: 400px){#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{grid-template-columns:auto;gap:0}}#form-loginform #input-loginform-login{margin-top:1.5rem;width:200px}#layout:has(#sidebar_left.expanded) #header-logo,#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) #header-logo{color:#fff}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4e7bba}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}#sidebar_left{height:100%;max-height:100%;user-select:none}#sidebar_left>.scrollable-y{margin-top:34px}#sidebar_left ul.list-group,#sidebar_left ul.list-group li{background-color:inherit}#sidebar_left #navtree{max-width:100%}#sidebar_left #navtree .nav-link{z-index:2000;white-space:nowrap}#sidebar_left #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.bi-chevron-right{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #sidebar_resize{position:relative;left:100%;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse{position:relative;left:100%;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn{position:absolute;bottom:0px;border-radius:100%;z-index:20001}#sidebar_left.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded){width:0 !important;min-width:0 !important}#sidebar_left:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize{display:none}#sidebar_left.expanded{width:100% !important;z-index:3}#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}.table_length,.table_filter{width:unset}#contents>div.card-body div.row>div{flex:1 0 auto;flex-wrap:nowrap}.table-footer{gap:1rem 0}.table-footer .table_info{white-space:nowrap}#main-area.full .table_length{max-width:max-content}#main-area.full .table_filter{max-width:300px}#settings-grid-container .settings-grid a i{font-size:44px}@media(max-width: 450px){#settings-grid-container .settings-grid a i{font-size:30px}} +:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}:root{--sidebar-width: 300px;--navbar-height: 50px}html{height:100%;width:100%}body{height:100%}#footer{z-index:1}.referencebrowser_trigger{cursor:pointer}#content{height:calc(100% - 40px)}#main-area{width:0 !important}tr.selectable td{user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#input-contentform-save{margin-right:1rem}#header-logo{z-index:4}#header-logo>span,#header-logo-placeholder>span{font-size:1.5rem !important}#header-logo-placeholder{visibility:hidden}#main-area.compact #header-main.mobile-menu-open #header-logo-placeholder{display:none}#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{max-height:calc(100vh - 50px);position:relative;overflow:hidden;padding:0 !important;z-index:3}@media screen and (max-width: 768px){#main-area.compact #header-main.mobile-menu-open #navbar-content-wrapper{z-index:1200}}#main-area.compact #header-main.mobile-menu-open #header-content{align-items:flex-start}#main-area.compact #header-main.mobile-menu-open .navbar-toggler{height:50px !important}#main-area.compact #header-main.mobile-menu-open #mainmenu{align-items:baseline}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollbar{display:none !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .scrollable-content{right:0 !important}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu{border:none}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li .dropdown-item{padding:8px 20px}#main-area.compact #header-main.mobile-menu-open #mainmenu .dropdown-menu>li:first-child .dropdown-item{padding-top:0}#main-area.super-compact #personaltools{height:50px;justify-content:space-between;margin:auto 20px}#main-area.super-compact #personaltools #colortoggler{padding-left:0}#main-area.full #mainmenu{height:var(--navbar-height)}#main-area.full #mainmenu .dropdown-menu{position:fixed}#main-area.full #personaltools{height:100%}#main-area #header-main{height:var(--navbar-height)}#main-area #header-main.navbar-expand #header-content{flex-direction:row-reverse}#main-area #header-main.navbar-expand #navbar-content-wrapper{box-shadow:none !important;background:none}#main-area #header-main:not(.navbar-expand) #header-content{flex-direction:row}#main-area #header-main:not(.navbar-expand) #navbar-content{flex-direction:column}#main-area #header-main:not(.navbar-expand) #livesearch{order:0;width:100%;padding-left:55px !important;padding-right:15px !important}#main-area #header-main:not(.navbar-expand) #mainmenu{order:1;margin-left:10px !important;margin-top:20px;margin-bottom:20px}#main-area #header-main:not(.navbar-expand) #mainmenu ul>li{display:block !important}#main-area #header-main #navbar-content-wrapper{min-width:0;z-index:1}#main-area #header-main #navbar-content-wrapper #navbar-content{min-width:0}#main-area #header-main #mainmenu>ul{padding-left:8px;white-space:nowrap}#main-area #header-main #mainmenu .nav-item.active .nav-link{color:#4e7bba}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a{height:20px}#main-area #header-main #personaltools #language-dropdown>div.dropdown-toggle>a img{vertical-align:baseline}#main-area #header-main #personaltools #colortoggler #colortoggle-switch{width:2rem;height:1rem}#personaltools-dropdown .dropdown-item a{text-decoration:none;color:var(--bs-secondary-color)}#form-loginform{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%}#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{display:grid;grid-template-columns:1fr 2fr;margin-bottom:.5rem;gap:1rem}@media(max-width: 400px){#form-loginform #field-loginform-user,#form-loginform #field-loginform-password{grid-template-columns:auto;gap:0}}#form-loginform #input-loginform-login{margin-top:1.5rem;width:200px}#layout:has(#sidebar_left.expanded) #header-logo,#layout:has(#sidebar_left.responsive-expanded:not(.collapsed)) #header-logo{color:#fff}.scrollable-x,.scrollable-y{position:relative;overflow:hidden}.scrollable-content{position:relative}.scrollbar{display:none;position:absolute;background:#dee2e6;border-radius:3px;z-index:1000}.scrollbar .scroll-handle{position:relative;border-radius:3px;background:#4e7bba}.scrollbar-top .scrollbar{top:0}.scrollbar-bottom .scrollbar{bottom:0}.scrollbar-left .scrollbar{left:0}.scrollbar-right .scrollbar{right:0}:root{--primary-100: #dde9fb;--primary-100-dark: #2c4265}[data-bs-theme=dark] #content{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #navbar-content-wrapper{color:#f8f9fa;background-color:#212529}[data-bs-theme=dark] #sidebar_left{background-color:#343b45}[data-bs-theme=dark] #footer{color:#f8f9fa;background-color:#000}[data-bs-theme=dark] #contextmenu{color:#f8f9fa;background-color:#343a40}[data-bs-theme=dark] tr.selectable.selected td{background-color:#344555}[data-bs-theme=dark] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#485f76}[data-bs-theme=dark] .bg-primary-100{background-color:#2c4265}[data-bs-theme=light] #content{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #navbar-content-wrapper{color:#212529;background-color:#fff}[data-bs-theme=light] #sidebar_left{background-color:#414c5b}[data-bs-theme=light] #footer{color:#212529;background-color:#f8f9fa}[data-bs-theme=light] #contextmenu{color:#212529;background-color:#fff}[data-bs-theme=light] tr.selectable.selected td{background-color:#dfeefb}[data-bs-theme=light] .table-striped>tbody>tr.selectable.selected:nth-child(2n+1)>td{background-color:#cfdce7}[data-bs-theme=light] .bg-primary-100{background-color:#dde9fb}#sidebar_left{height:100%;max-height:100%;user-select:none}#sidebar_left>.scrollable-y{margin-top:34px}#sidebar_left ul.list-group,#sidebar_left ul.list-group li{background-color:inherit}#sidebar_left #navtree{max-width:100%}#sidebar_left #navtree .nav-link{z-index:2000;white-space:nowrap}#sidebar_left #navtree .nav-link.active{background-color:rgba(0,0,0,0);font-weight:bold}#sidebar_left #navtree .nav-link i.bi-chevron-right{vertical-align:text-bottom}#sidebar_left #navtree .nav-link span{display:inline-block;width:calc(100% - 40px);text-overflow:ellipsis;overflow-x:hidden;vertical-align:text-bottom}#sidebar_left #sidebar_resize{position:relative;left:100%;width:0;height:0}#sidebar_left #sidebar_resize #sidebar_resizer{position:absolute;z-index:3;height:100vh;width:20px;transform:translateX(-50%);cursor:col-resize}#sidebar_left #sidebar_collapse{position:relative;left:100%;top:100%;width:0;height:0}#sidebar_left #sidebar_collapse .collapse_btn{position:absolute;bottom:0px;border-radius:100%;z-index:20001}#sidebar_left.collapsed{width:0px !important;min-width:0 !important}#sidebar_left.collapsed #sidebar_resize{display:none}#sidebar_left.collapsed #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}#sidebar_left.expanded #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}@media(min-width: 1400px){#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn{transform:translateX(-20px)}#sidebar_left:not(.collapsed) #sidebar_collapse .collapse_btn .bi-chevron-right{display:none}}@media(max-width: 1399.98px){#sidebar_left:not(.expanded){width:0 !important;min-width:0 !important}#sidebar_left:not(.expanded) #sidebar_resize{display:none}#sidebar_left:not(.expanded) #sidebar_collapse .collapse_btn .bi-chevron-left{display:none}}@media(min-width: 768px)and (max-width: 1399.98px){#sidebar_left.expanded #sidebar_collapse .collapse_btn{transform:translateX(-20px)}}@media(max-width: 767.98px){#sidebar_left #sidebar_resize{display:none}#sidebar_left.expanded{width:100% !important;z-index:3}#sidebar_left.expanded #sidebar_collapse{left:calc(100% - 50px)}}.table_length,.table_filter{width:unset}#contents>div.card-body div.row>div{flex:1 0 auto;flex-wrap:nowrap}.table-footer{gap:1rem 0}.table-footer .table_info{white-space:nowrap}#main-area.full .table_length{max-width:max-content}#main-area.full .table_filter{max-width:300px}#settings-grid-container .settings-grid a i{font-size:44px}@media(max-width: 450px){#settings-grid-container .settings-grid a i{font-size:30px}}