Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Support
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
erp5
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
Laurent S
erp5
Commits
ae2c27cd
Commit
ae2c27cd
authored
Dec 14, 2017
by
Vincent Bechu
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
[erp5_web_renderjs_ui] Add possibility to hide panel in desktop view
parent
634fac2e
Changes
5
Hide whitespace changes
Inline
Side-by-side
Showing
5 changed files
with
188 additions
and
45 deletions
+188
-45
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
...mplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
+16
-0
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
...plateItem/web_page_module/rjs_gadget_erp5_launcher_js.xml
+3
-3
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
...emplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
+86
-25
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
...emplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
+3
-3
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
...teItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
+80
-14
No files found.
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_launcher_js.js
View file @
ae2c27cd
...
...
@@ -169,6 +169,19 @@
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
//////////////////////////////////////////
...
...
@@ -426,6 +439,9 @@
gadget
.
props
.
panel_argument_list
=
param_list
[
0
];
})
.
allowPublicAcquisition
(
'
hidePanel
'
,
function
(
param_list
)
{
return
hideDesktopPanel
(
this
,
param_list
[
0
]);
})
.
allowPublicAcquisition
(
'
triggerPanel
'
,
function
()
{
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 @@
</item>
<item>
<key>
<string>
actor
</string>
</key>
<value>
<string>
zope
</string>
</value>
<value>
<string>
vincent
</string>
</value>
</item>
<item>
<key>
<string>
comment
</string>
</key>
...
...
@@ -230,7 +230,7 @@
</item>
<item>
<key>
<string>
serial
</string>
</key>
<value>
<string>
96
3.29105.23200.50073
</string>
</value>
<value>
<string>
96
4.8140.54108.1245
</string>
</value>
</item>
<item>
<key>
<string>
state
</string>
</key>
...
...
@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>
151
1971674.78
</float>
<float>
151
3245928.9
</float>
<string>
UTC
</string>
</tuple>
</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'] {
left
:
0
;
display
:
block
;
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
)
{
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
)
{
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
);
...
...
@@ -479,8 +479,8 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
margin-left
:
12pt
;
}
@media
not
screen
and
(
max-width
:
85em
)
{
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"
]
button
[
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
;
}
}
...
...
@@ -686,7 +686,8 @@ div[data-gadget-scope='header'] .ui-header {
}
@media
not
screen
and
(
max-width
:
85em
)
{
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
,
...
...
@@ -712,10 +713,14 @@ div[data-gadget-scope='header'] .ui-header .ui-controlgroup-controls a {
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
a
{
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
,
...
...
@@ -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
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
,
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
a
{
background-color
:
#085078
;
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
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
.ui-controlgroup-controls
button
::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 {
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
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
button
[
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
;
}
}
...
...
@@ -772,8 +769,8 @@ div[data-gadget-scope='header'] .ui-header > .ui-btn-left a {
}
}
@media
not
screen
and
(
max-width
:
85em
)
{
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
button
,
div
[
data-
role
=
'page'
]
:not
(
.desktop-panel-hidden
)
div
[
data-
gadget-scope
=
'header'
]
.ui-header
>
.ui-btn-right
a
{
padding-left
:
24pt
;
padding-right
:
24pt
;
min-width
:
5em
;
...
...
@@ -789,7 +786,7 @@ div[data-gadget-scope='header'] .ui-header h1 {
text-overflow
:
ellipsis
;
}
@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%
;
}
}
...
...
@@ -832,7 +829,7 @@ div[data-gadget-scope='header'] .ui-header h1 a::before {
}
}
@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
;
margin-left
:
24pt
;
margin-right
:
6pt
;
...
...
@@ -873,6 +870,7 @@ div[data-gadget-scope='header'] .ui-header ul {
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
padding-top
:
3pt
;
padding-bottom
:
3pt
;
line-height
:
inherit
;
white-space
:
nowrap
;
overflow
:
hidden
;
}
...
...
@@ -901,13 +899,15 @@ div[data-gadget-scope='header'] .ui-header ul {
@media
not
screen
and
(
max-width
:
85em
)
{
div
[
data-gadget-scope
=
'header'
]
.ui-header
ul
li
a
{
display
:
block
;
padding-left
:
24pt
;
padding-right
:
24pt
;
min-width
:
5em
;
line-height
:
30pt
;
white-space
:
nowrap
;
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
{
display
:
none
;
}
...
...
@@ -955,7 +955,7 @@ div[data-gadget-scope='header'] .ui-header ul {
background-color
:
#ffa366
;
}
@media
not
screen
and
(
max-width
:
85em
)
{
.gadget-content
{
div
[
data-role
=
'page'
]
:not
(
.desktop-panel-hidden
)
.gadget-content
{
margin-left
:
180pt
;
}
}
...
...
@@ -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
**********************************************/
.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 @@
</item>
<item>
<key>
<string>
actor
</string>
</key>
<value>
<string>
zope
</string>
</value>
<value>
<string>
vincent
</string>
</value>
</item>
<item>
<key>
<string>
comment
</string>
</key>
...
...
@@ -242,7 +242,7 @@
</item>
<item>
<key>
<string>
serial
</string>
</key>
<value>
<string>
96
3.49524.2871.1918
2
</string>
</value>
<value>
<string>
96
4.8294.44761.4263
2
</string>
</value>
</item>
<item>
<key>
<string>
state
</string>
</key>
...
...
@@ -260,7 +260,7 @@
</tuple>
<state>
<tuple>
<float>
151
2052879.86
</float>
<float>
151
3250374.08
</float>
<string>
UTC
</string>
</tuple>
</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'] {
display: block;
z-index: 2000;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
@media @smartphone, @tablet {
left: -@panelwidth - @margin-size;
transition: transform 200ms ease-out;
transform: translate3d(0, 0, 0);
&.visible {
transform: translate3d(@panelwidth + @margin-size, 0, 0);
}
...
...
@@ -575,7 +576,7 @@ div[data-gadget-scope='panel'] {
}
@media @desktop {
&[data-i18n="Close"] {
div[data-role='page']:not(.desktop-panel-hidden)
&[data-i18n="Close"] {
display: none;
}
}
...
...
@@ -808,14 +809,17 @@ div[data-gadget-scope='editor_panel'] {
* Gadget: header
**********************************************/
.renderDesktopSubLink() {
padding-left: @sub-line-margin-size-desktop;
padding-right: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop;
div[data-role='page']:not(.desktop-panel-hidden) & {
padding-left: @sub-line-margin-size-desktop;
padding-right: @sub-line-margin-size-desktop;
min-width: @sub-line-min-width-desktop;
}
}
.renderTabletSubLink() {
padding-top: @half-margin-size;
padding-bottom: @half-margin-size;
line-height: inherit;
white-space: nowrap;
overflow: hidden;
&::before {
...
...
@@ -862,7 +866,8 @@ div[data-gadget-scope='header'] .ui-header {
width: 100%;
@media @desktop {
margin-left: @panelwidth;
transition: transform 200ms ease-out;
transform: translate3d(@panelwidth, 0, 0);
}
color: @white;
...
...
@@ -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 {
display: none;
}
...
...
@@ -948,7 +953,9 @@ div[data-gadget-scope='header'] .ui-header {
line-height: @headerheight;
flex: 1;
@media @desktop {
flex: 1 100%;
div[data-role='page']:not(.desktop-panel-hidden) & {
flex: 1 100%;
}
}
background-color: @colorheaderbackground;
...
...
@@ -997,9 +1004,11 @@ div[data-gadget-scope='header'] .ui-header {
}
@media @desktop {
width: @headertitlemiddlewidth;
margin-left: @headertitleleftmiddlemargin;
margin-right: @headertitlerightsmallmargin;
div[data-role='page']:not(.desktop-panel-hidden) & {
width: @headertitlemiddlewidth;
margin-left: @headertitleleftmiddlemargin;
margin-right: @headertitlerightsmallmargin;
}
}
width: @headertitleleftlargemargin;
@media @smartphone {
...
...
@@ -1102,8 +1111,10 @@ div[data-gadget-scope='header'] .ui-header {
@media @desktop {
// Keep the panel always visible
margin-left: @panelwidth;
div[data-role='page']:not(.desktop-panel-hidden) & {
// Keep the panel always visible
margin-left: @panelwidth;
}
}
// Top padding
...
...
@@ -1722,7 +1733,62 @@ div[data-gadget-scope='notification'] {
from {opacity:0;}
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
**********************************************/
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment