Skip to content

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

[erp5_web_renderjs_ui] Add possibility to hide panel in desktop view

parent 634fac2e
Hide whitespace changes
Inline Side-by-side
Showing with 188 additions and 45 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
View file @ ae2c27cd
...@@ -169,6 +169,19 @@ ...@@ -169,6 +169,19 @@
return displayErrorContent(gadget, error); return displayErrorContent(gadget, error);
} }
function hideDesktopPanel(gadget, hide) {
var element = gadget.element.querySelector('div[data-role="page"]');
if (hide) {
if (!element.classList.contains('desktop-panel-hidden')) {
element.classList.toggle('desktop-panel-hidden');
}
} else {
if (element.classList.contains('desktop-panel-hidden')) {
element.classList.remove('desktop-panel-hidden');
}
}
}
////////////////////////////////////////// //////////////////////////////////////////
// Page rendering // Page rendering
////////////////////////////////////////// //////////////////////////////////////////
...@@ -426,6 +439,9 @@ ...@@ -426,6 +439,9 @@
gadget.props.panel_argument_list = param_list[0]; gadget.props.panel_argument_list = param_list[0];
}) })
.allowPublicAcquisition('hidePanel', function (param_list) {
return hideDesktopPanel(this, param_list[0]);
})
.allowPublicAcquisition('triggerPanel', function () { .allowPublicAcquisition('triggerPanel', function () {
return route(this, "panel", "toggle"); return route(this, "panel", "toggle");
}) })
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
View file @ ae2c27cd
...@@ -216,7 +216,7 @@ ...@@ -216,7 +216,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <string>vincent</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -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.29105.23200.50073</string> </value> <value> <string>964.8140.54108.1245</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>1511971674.78</float> <float>1513245928.9</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 @ ae2c27cd
...@@ -436,6 +436,8 @@ div[data-gadget-scope='panel'] { ...@@ -436,6 +436,8 @@ div[data-gadget-scope='panel'] {
left: 0; left: 0;
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'] {
...@@ -445,8 +447,6 @@ div[data-gadget-scope='panel'] { ...@@ -445,8 +447,6 @@ div[data-gadget-scope='panel'] {
@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'] {
left: -186pt; left: -186pt;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
} }
div[data-gadget-scope='panel'].visible { div[data-gadget-scope='panel'].visible {
transform: translate3d(186pt, 0, 0); transform: translate3d(186pt, 0, 0);
...@@ -479,8 +479,8 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before { ...@@ -479,8 +479,8 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
margin-left: 12pt; margin-left: 12pt;
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"], div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] button[data-i18n="Close"],
div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] { div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='panel'] div[data-role="header"] a[data-i18n="Close"] {
display: none; display: none;
} }
} }
...@@ -686,7 +686,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -686,7 +686,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,
...@@ -712,10 +713,14 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a { ...@@ -712,10 +713,14 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color: #0E81C2; background-color: #0E81C2;
} }
} }
@media not screen and (min-width: 45em), only screen and (min-width: 45em) and (max-width: 85em) { @media not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color: #085078; background-color: #085078;
width: 3em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
} }
} }
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button:hover, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button:hover,
...@@ -727,18 +732,10 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active { ...@@ -727,18 +732,10 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
@media only screen and (min-width: 45em) and (max-width: 85em) { @media only screen and (min-width: 45em) and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
background-color: #085078;
width: 8em; width: 8em;
} }
} }
@media not screen and (min-width: 45em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
width: 3em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
}
@media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) { @media only screen and (min-width: 45em) and (max-width: 85em), not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before, div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button::before,
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before { div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a::before {
...@@ -756,8 +753,8 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active { ...@@ -756,8 +753,8 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a:active {
} }
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"], div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls button[name="panel"],
div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] { div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a[name="panel"] {
display: none; display: none;
} }
} }
...@@ -772,8 +769,8 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-left a { ...@@ -772,8 +769,8 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
} }
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header > .ui-btn-right button, div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header > .ui-btn-right button,
div[data-gadget-scope='header'] .ui-header > .ui-btn-right a { div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header > .ui-btn-right a {
padding-left: 24pt; padding-left: 24pt;
padding-right: 24pt; padding-right: 24pt;
min-width: 5em; min-width: 5em;
...@@ -789,7 +786,7 @@ div[data-gadget-scope='header'] .ui-header h1 { ...@@ -789,7 +786,7 @@ div[data-gadget-scope='header'] .ui-header h1 {
text-overflow: ellipsis; text-overflow: ellipsis;
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header h1 { div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 {
flex: 1 100%; flex: 1 100%;
} }
} }
...@@ -832,7 +829,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before { ...@@ -832,7 +829,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
} }
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header h1 a::before { div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header h1 a::before {
width: 12pt; width: 12pt;
margin-left: 24pt; margin-left: 24pt;
margin-right: 6pt; margin-right: 6pt;
...@@ -873,6 +870,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -873,6 +870,7 @@ div[data-gadget-scope='header'] .ui-header ul {
div[data-gadget-scope='header'] .ui-header ul li a { div[data-gadget-scope='header'] .ui-header ul li a {
padding-top: 3pt; padding-top: 3pt;
padding-bottom: 3pt; padding-bottom: 3pt;
line-height: inherit;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
...@@ -901,13 +899,15 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -901,13 +899,15 @@ div[data-gadget-scope='header'] .ui-header ul {
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
div[data-gadget-scope='header'] .ui-header ul li a { div[data-gadget-scope='header'] .ui-header ul li a {
display: block; display: block;
padding-left: 24pt;
padding-right: 24pt;
min-width: 5em;
line-height: 30pt; line-height: 30pt;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
} }
div[data-role='page']:not(.desktop-panel-hidden) div[data-gadget-scope='header'] .ui-header ul li a {
padding-left: 24pt;
padding-right: 24pt;
min-width: 5em;
}
div[data-gadget-scope='header'] .ui-header ul li a::before { div[data-gadget-scope='header'] .ui-header ul li a::before {
display: none; display: none;
} }
...@@ -955,7 +955,7 @@ div[data-gadget-scope='header'] .ui-header ul { ...@@ -955,7 +955,7 @@ div[data-gadget-scope='header'] .ui-header ul {
background-color: #ffa366; background-color: #ffa366;
} }
@media not screen and (max-width: 85em) { @media not screen and (max-width: 85em) {
.gadget-content { div[data-role='page']:not(.desktop-panel-hidden) .gadget-content {
margin-left: 180pt; margin-left: 180pt;
} }
} }
...@@ -1497,6 +1497,67 @@ div[data-gadget-scope='notification'] button.error { ...@@ -1497,6 +1497,67 @@ 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 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 {
text-align: center;
}
.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);
}
.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-subheader {
flex: 1 100%;
text-align: center;
}
.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 {
padding-top: 7em;
}
.desktop-panel-hidden div[data-gadget-scope='panel'] {
transform: translate3d(-186pt, 0, 0);
}
.desktop-panel-hidden div[data-gadget-scope='panel'].visible {
transform: translate3d(0, 0, 0);
}
}
/**********************************************
* 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 @ ae2c27cd
...@@ -228,7 +228,7 @@ ...@@ -228,7 +228,7 @@
</item> </item>
<item> <item>
<key> <string>actor</string> </key> <key> <string>actor</string> </key>
<value> <string>zope</string> </value> <value> <string>vincent</string> </value>
</item> </item>
<item> <item>
<key> <string>comment</string> </key> <key> <string>comment</string> </key>
...@@ -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.49524.2871.19182</string> </value> <value> <string>964.8294.44761.42632</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>1512052879.86</float> <float>1513250374.08</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 @ ae2c27cd
...@@ -545,10 +545,11 @@ div[data-gadget-scope='panel'] { ...@@ -545,10 +545,11 @@ div[data-gadget-scope='panel'] {
display: block; display: block;
z-index: 2000; z-index: 2000;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
@media @smartphone, @tablet { @media @smartphone, @tablet {
left: -@panelwidth - @margin-size; left: -@panelwidth - @margin-size;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
&.visible { &.visible {
transform: translate3d(@panelwidth + @margin-size, 0, 0); transform: translate3d(@panelwidth + @margin-size, 0, 0);
} }
...@@ -575,7 +576,7 @@ div[data-gadget-scope='panel'] { ...@@ -575,7 +576,7 @@ div[data-gadget-scope='panel'] {
} }
@media @desktop { @media @desktop {
&[data-i18n="Close"] { div[data-role='page']:not(.desktop-panel-hidden) &[data-i18n="Close"] {
display: none; display: none;
} }
} }
...@@ -808,14 +809,17 @@ div[data-gadget-scope='editor_panel'] { ...@@ -808,14 +809,17 @@ div[data-gadget-scope='editor_panel'] {
* Gadget: header * Gadget: header
**********************************************/ **********************************************/
.renderDesktopSubLink() { .renderDesktopSubLink() {
padding-left: @sub-line-margin-size-desktop; div[data-role='page']:not(.desktop-panel-hidden) & {
padding-right: @sub-line-margin-size-desktop; padding-left: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop; padding-right: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop;
}
} }
.renderTabletSubLink() { .renderTabletSubLink() {
padding-top: @half-margin-size; padding-top: @half-margin-size;
padding-bottom: @half-margin-size; padding-bottom: @half-margin-size;
line-height: inherit;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
&::before { &::before {
...@@ -862,7 +866,8 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -862,7 +866,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;
...@@ -915,7 +920,7 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -915,7 +920,7 @@ div[data-gadget-scope='header'] .ui-header {
} }
} }
&[name="panel"] { div[data-role='page']:not(.desktop-panel-hidden) &[name="panel"] {
@media @desktop { @media @desktop {
display: none; display: none;
} }
...@@ -948,7 +953,9 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -948,7 +953,9 @@ div[data-gadget-scope='header'] .ui-header {
line-height: @headerheight; line-height: @headerheight;
flex: 1; flex: 1;
@media @desktop { @media @desktop {
flex: 1 100%; div[data-role='page']:not(.desktop-panel-hidden) & {
flex: 1 100%;
}
} }
background-color: @colorheaderbackground; background-color: @colorheaderbackground;
...@@ -997,9 +1004,11 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -997,9 +1004,11 @@ div[data-gadget-scope='header'] .ui-header {
} }
@media @desktop { @media @desktop {
width: @headertitlemiddlewidth; div[data-role='page']:not(.desktop-panel-hidden) & {
margin-left: @headertitleleftmiddlemargin; width: @headertitlemiddlewidth;
margin-right: @headertitlerightsmallmargin; margin-left: @headertitleleftmiddlemargin;
margin-right: @headertitlerightsmallmargin;
}
} }
width: @headertitleleftlargemargin; width: @headertitleleftlargemargin;
@media @smartphone { @media @smartphone {
...@@ -1102,8 +1111,10 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -1102,8 +1111,10 @@ div[data-gadget-scope='header'] .ui-header {
@media @desktop { @media @desktop {
// Keep the panel always visible div[data-role='page']:not(.desktop-panel-hidden) & {
margin-left: @panelwidth; // Keep the panel always visible
margin-left: @panelwidth;
}
} }
// Top padding // Top padding
...@@ -1722,7 +1733,62 @@ div[data-gadget-scope='notification'] { ...@@ -1722,7 +1733,62 @@ 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);
h1 {
& > span {
.renderTabletNotALinkTitle();
}
a {
&::before {
text-align: center;
}
}
}
& > .ui-btn-right {
button, a {
border-left: 1px solid rgba(255, 255, 255, 0.55);
}
}
.ui-controlgroup-controls {
button, a {
.renderTabletHeaderButton();
}
}
.ui-subheader {
flex: 1 100%;
text-align: center;
}
ul > li {
.renderTabletSubListElement();
a {
.renderTabletSubLink();
}
}
}
.gadget-content {
padding-top: 7em;
}
div[data-gadget-scope='panel'] {
transform: translate3d(-@panelwidth - @margin-size, 0, 0);
&.visible {
transform: translate3d(0, 0, 0);
}
}
}
}
/********************************************** /**********************************************
* 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