Skip to content

erp5
erp5
Commit 7805962e authored by Vincent Bechu's avatar Vincent Bechu
Browse files
Options

[erp5_web_renderjs_ui] add possibility to hide panel in desktop view

parent b631f7e1
Show whitespace changes
Inline Side-by-side
Showing with 175 additions and 27 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
View file @ 7805962e
...@@ -168,7 +168,20 @@ ...@@ -168,7 +168,20 @@
} }
return displayErrorContent(gadget, error); return displayErrorContent(gadget, error);
} }
function hideDesktopPanel(gadget, hide) {
gadget.props.hide_panel = hide;
if (hide) {
if (!gadget.element.classList.contains('desktop-panel-hidden')) {
gadget.element.classList.toggle('desktop-panel-hidden');
}
return route(gadget, "panel", "close");
} else {
if (gadget.element.classList.contains('desktop-panel-hidden')) {
gadget.element.classList.remove('desktop-panel-hidden');
}
return route(gadget, "panel", "open");
}
}
////////////////////////////////////////// //////////////////////////////////////////
// Page rendering // Page rendering
////////////////////////////////////////// //////////////////////////////////////////
...@@ -434,6 +447,9 @@ ...@@ -434,6 +447,9 @@
.allowPublicAcquisition('triggerPanel', function () { .allowPublicAcquisition('triggerPanel', function () {
return route(this, "panel", "toggle"); return route(this, "panel", "toggle");
}) })
.allowPublicAcquisition('hidePanel', function (param_list) {
return hideDesktopPanel(this, param_list[0]);
})
.allowPublicAcquisition('renderEditorPanel', function (param_list) { .allowPublicAcquisition('renderEditorPanel', function (param_list) {
return route(this, "editor_panel", 'render', param_list); return route(this, "editor_panel", 'render', param_list);
}) })
...@@ -566,9 +582,13 @@ ...@@ -566,9 +582,13 @@
}) })
.push(function () { .push(function () {
var promise_list = [ var promise_list = [
route(gadget, 'panel', 'close'),
route(gadget, 'editor_panel', 'close') route(gadget, 'editor_panel', 'close')
]; ];
if (gadget.props.desktop && !gadget.props.hide_panel) {
promise_list.push(route(gadget, 'panel', 'open'));
} else {
promise_list.push(route(gadget, 'panel', 'close'));
}
if (keep_message !== true) { if (keep_message !== true) {
promise_list.push(route(gadget, 'notification', 'close')); promise_list.push(route(gadget, 'notification', 'close'));
} }
...@@ -597,7 +617,7 @@ ...@@ -597,7 +617,7 @@
return new RSVP.Queue() return new RSVP.Queue()
.push(function () { .push(function () {
var desktop = window.matchMedia("(min-width: 85em)").matches, var desktop = window.matchMedia("(min-width: 85em)").matches,
method = desktop ? 'open' : 'close'; method = desktop && !gadget.props.hide_panel ? 'open' : 'close';
gadget.props.panel_argument_list.desktop = desktop; gadget.props.panel_argument_list.desktop = desktop;
gadget.props.desktop = desktop; gadget.props.desktop = desktop;
return route(gadget, 'panel', method); return route(gadget, 'panel', method);
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
View file @ 7805962e
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>963.63870.21758.35942</string> </value> <value> <string>963.63896.43591.9710</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1512652755.5</float> <float>1512654651.55</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @ 7805962e
...@@ -433,24 +433,19 @@ div[data-gadget-scope='panel'] { ...@@ -433,24 +433,19 @@ div[data-gadget-scope='panel'] {
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: -186pt;
display: block; display: block;
z-index: 2000; z-index: 2000;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
} }
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { @media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='panel'] { div[data-gadget-scope='panel'] {
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15); box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
} }
} }
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { div[data-gadget-scope='panel'].visible {
div[data-gadget-scope='panel'] {
left: -186pt;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
}
div[data-gadget-scope='panel'].visible {
transform: translate3d(186pt, 0, 0); transform: translate3d(186pt, 0, 0);
}
} }
div[data-gadget-scope='panel'] div[data-role="header"] { div[data-gadget-scope='panel'] div[data-role="header"] {
display: flex; display: flex;
...@@ -686,7 +681,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -686,7 +681,8 @@ div[data-gadget-scope='header'] .ui-header {
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header { div[data-gadget-scope='header'] .ui-header {
margin-left: 180pt; transition: transform 200ms ease-out;
transform: translate3d(180pt, 0, 0);
} }
} }
div[data-gadget-scope='header'] .ui-header button, div[data-gadget-scope='header'] .ui-header button,
...@@ -1511,6 +1507,75 @@ div[data-gadget-scope='notification'] button.error { ...@@ -1511,6 +1507,75 @@ div[data-gadget-scope='notification'] button.error {
} }
} }
/********************************************** /**********************************************
* Desktop Panel Hidden
**********************************************/
@media not screen and (max-width: 85em) {
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header {
margin-left: 0;
transform: translate3d(0, 0, 0);
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls button,
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls a {
background-color: #085078;
width: 8em;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls button[name="panel"],
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-controlgroup-controls a[name="panel"] {
display: block;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header > .ui-btn-right button,
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header > .ui-btn-right a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
padding-left: 0;
padding-right: 0;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 {
flex: 1;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span {
padding-left: 16pt;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 > span::before {
margin-right: 14pt;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 a::before,
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header h1 form button::before {
text-align: center;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header .ui-subheader {
text-align: center;
flex: 1 100%;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li {
flex: 1;
border-left: 1px solid rgba(0, 0, 0, 0.55);
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li:first-child {
border-left: none;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a {
display: block;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a {
padding-top: 3pt;
padding-bottom: 3pt;
line-height: inherit;
white-space: nowrap;
overflow: hidden;
}
.desktop-panel-hidden div[data-gadget-scope="header"] .ui-header ul > li a::before {
font-size: 1.2em;
display: block;
}
.desktop-panel-hidden .gadget-content {
margin-left: 0;
padding-top: 7em;
}
.desktop-panel-hidden div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"] {
display: block;
}
}
/**********************************************
* Class * Class
**********************************************/ **********************************************/
.content-iframe-maximize { .content-iframe-maximize {
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @ 7805962e
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>963.63661.56222.1621</string> </value> <value> <string>963.63901.12081.3089</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1512640534.69</float> <float>1512654762.48</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ 7805962e
...@@ -541,18 +541,15 @@ div[data-gadget-scope='panel'] { ...@@ -541,18 +541,15 @@ div[data-gadget-scope='panel'] {
overflow-y: auto; overflow-y: auto;
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: -@panelwidth - @margin-size;
display: block; display: block;
z-index: 2000; z-index: 2000;
@media @smartphone, @tablet {
left: -@panelwidth - @margin-size;
transition: transform 200ms ease-out; transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);
&.visible { &.visible {
transform: translate3d(@panelwidth + @margin-size, 0, 0); transform: translate3d(@panelwidth + @margin-size, 0, 0);
} }
}
div[data-role="header"] { div[data-role="header"] {
display: flex; display: flex;
...@@ -856,7 +853,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -856,7 +853,8 @@ div[data-gadget-scope='header'] .ui-header {
width: 100%; width: 100%;
@media @desktop { @media @desktop {
margin-left: @panelwidth; transition: transform 200ms ease-out;
transform: translate3d(@panelwidth, 0, 0);
} }
color: @white; color: @white;
...@@ -1728,7 +1726,72 @@ div[data-gadget-scope='notification'] { ...@@ -1728,7 +1726,72 @@ div[data-gadget-scope='notification'] {
from {opacity:0;} from {opacity:0;}
to {opacity:1;} to {opacity:1;}
} }
/**********************************************
* Desktop Panel Hidden
**********************************************/
@media @desktop {
.desktop-panel-hidden {
div[data-gadget-scope="header"] .ui-header {
margin-left: 0;
transform: translate3d(0, 0, 0);
.ui-controlgroup-controls {
button, a {
background-color: @colorheaderbackground;
width: 8em;
&[name="panel"] {
display: block;
}
}
}
& > .ui-btn-right {
button, a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
padding-left: 0;
padding-right: 0;
}
}
h1 {
flex: 1;
& > span {
.renderTabletNotALinkTitle();
}
a, form button {
&::before {
text-align: center;
}
}
}
.ui-subheader {
text-align: center;
flex: 1 100%;
}
ul > li {
.renderTabletSubListElement();
a {
.renderTabletSubLink();
}
}
}
.gadget-content {
margin-left: 0;
padding-top: 7em;
}
div[data-gadget-scope='panel'] {
div[data-role="header"] {
button[data-i18n="Close"] {
display: block;
}
}
}
}
}
/********************************************** /**********************************************
* Class * Class
**********************************************/ **********************************************/
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7