Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
FAST
project
fast-project-list
Commits
d39fceb9
Commit
d39fceb9
authored
Nov 19, 2019
by
Mirko Vucicevich
Browse files
Restyled / upgraded overlay code and styling
parent
5651f644
Pipeline
#35802
canceled with stages
Changes
17
Pipelines
1
Expand all
Hide whitespace changes
Inline
Side-by-side
overlay/package-lock.json
View file @
d39fceb9
This diff is collapsed.
Click to expand it.
overlay/package.json
View file @
d39fceb9
...
...
@@ -13,7 +13,9 @@
"mithril"
:
"^2.0.4"
,
"rollup"
:
"^1.21.4"
,
"rollup-plugin-commonjs"
:
"^10.1.0"
,
"rollup-plugin-embed-css"
:
"^1.0.7"
,
"rollup-plugin-node-resolve"
:
"^5.2.0"
,
"rollup-plugin-postcss"
:
"^2.0.3"
,
"rollup-plugin-terser"
:
"^5.1.2"
},
"dependencies"
:
{
...
...
overlay/rollup.config.js
View file @
d39fceb9
...
...
@@ -2,6 +2,7 @@ import fs from "fs";
import
resolve
from
"
rollup-plugin-node-resolve
"
;
import
commonjs
from
"
rollup-plugin-commonjs
"
;
import
pathmodify
from
"
rollup-plugin-pathmodify
"
;
import
postcss
from
'
rollup-plugin-postcss
'
;
import
{
terser
}
from
"
rollup-plugin-terser
"
export
const
pkg
=
JSON
.
parse
(
fs
.
readFileSync
(
"
./package.json
"
));
...
...
@@ -37,6 +38,11 @@ const plugins = [
commonjs
({
include
:
"
node_modules/**
"
}),
postcss
({
extensions
:
[
'
.css
'
],
minimize
:
env
.
BUILD
?
true
:
false
,
}),
]
// check if mithril is set to be external..
...
...
overlay/src/base.css
0 → 100644
View file @
d39fceb9
/* CLEARANCE STUFF */
.PJOVERLAY-contacts
,
.PJOVERLAY-help-ball
,
.PJOVERLAY-modal
{
all
:
unset
;
font-family
:
Helvetica
,
Arial
,
sans-serif
;
font-size
:
12px
;
}
/* ANIMATIONS */
.PJOVERLAY-animated
{
animation-duration
:
0.25s
;
animation-fill-mode
:
both
;
}
@keyframes
PJOVERLAY-fadeIn
{
from
{
opacity
:
0
;
}
to
{
opacity
:
1
;
}
}
.PJOVERLAY-fadeIn
{
animation-name
:
PJOVERLAY-fadeIn
;
}
@keyframes
PJOVERLAY-fadeOut
{
from
{
opacity
:
1
;
}
to
{
opacity
:
0
;
}
}
.PJOVERLAY-fadeOut
{
animation-name
:
PJOVERLAY-fadeOut
;
}
@keyframes
PJOVERLAY-fadeInUp
{
from
{
opacity
:
0
;
transform
:
translate3d
(
0
,
100%
,
0
);
}
to
{
opacity
:
1
;
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.PJOVERLAY-fadeInUp
{
animation-name
:
PJOVERLAY-fadeInUp
;
}
@keyframes
PJOVERLAY-slideInUp
{
from
{
transform
:
translate3d
(
0
,
100%
,
0
);
visibility
:
visible
;
}
to
{
transform
:
translate3d
(
0
,
0
,
0
);
}
}
.PJOVERLAY-slideInUp
{
animation-name
:
PJOVERLAY-slideInUp
;
}
@keyframes
PJOVERLAY-slideOutDown
{
from
{
transform
:
translate3d
(
0
,
0
,
0
);
}
to
{
visibility
:
hidden
;
transform
:
translate3d
(
0
,
100%
,
0
);
}
}
.PJOVERLAY-slideOutDown
{
animation-name
:
PJOVERLAY-slideOutDown
;
}
/*modal*/
.PJOVERLAY-overlay
{
position
:
fixed
;
left
:
0
;
top
:
0
;
width
:
100vw
;
height
:
100vh
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
overflow-y
:
scroll
;
background-color
:
rgba
(
0
,
0
,
0
,
0.6
);
animation-duration
:
0.45s
!important
;
z-index
:
10000
;
}
.PJOVERLAY-modal
{
position
:
relative
;
width
:
70%
;
max-width
:
600px
;
min-width
:
200px
;
background-color
:
white
;
padding
:
20px
;
border-radius
:
4px
;
animation-delay
:
0.2s
;
}
.PJOVERLAY-modal
input
,
.PJOVERLAY-modal
textarea
{
border
:
1px
solid
#AAA
;
border-radius
:
4px
;
padding
:
4px
;
width
:
100%
;
margin-bottom
:
12px
;
}
.PJOVERLAY-closebutton
{
position
:
absolute
;
top
:
4px
;
right
:
8px
;
cursor
:
pointer
;
font-size
:
18px
;
font-weight
:
800
;
color
:
#AAA
;
}
/*CONTACT POPUP THING*/
.PJOVERLAY-contacts
{
width
:
280px
;
background-color
:
white
;
box-sizing
:
border-box
;
padding-top
:
8px
;
padding-bottom
:
24px
;
position
:
fixed
;
bottom
:
0
;
left
:
8px
;
box-shadow
:
0
0
1px
1px
rgba
(
0
,
0
,
0
,
0.3
);
}
.PJOVERLAY-contacts
>
h4
{
padding
:
0px
12px
;
}
.PJOVERLAY-contact
{
cursor
:
pointer
;
background-color
:
white
;
transition
:
background-color
0.2s
ease-out
;
padding
:
8px
12px
;
}
.PJOVERLAY-contact
:hover
{
background-color
:
#dae6f3
;
}
/* HELP BALL */
.PJOVERLAY-help-ball
{
position
:
fixed
;
bottom
:
10px
;
left
:
10px
;
width
:
40px
;
max-height
:
40px
;
height
:
40px
;
background-color
:
#3F51B5
;
border-color
:
#606fc7
;
border-width
:
0px
;
border-radius
:
4px
;
border-style
:
solid
;
color
:
white
;
display
:
flex
;
justify-content
:
center
;
align-items
:
center
;
font-size
:
150%
;
font-weight
:
600
;
cursor
:
pointer
;
box-shadow
:
0
6px
10px
0
rgba
(
0
,
0
,
0
,
0.3
);
transition
:
all
0.5s
ease-out
;
}
.PJOVERLAY-help-ball
:hover
{
background-color
:
#606fc7
;
box-shadow
:
0
8px
15px
0
rgba
(
0
,
0
,
0
,
0.3
);
}
/*SPINNER*/
.PJOVERLAY-modal-cover
{
display
:
flex
;
position
:
absolute
;
top
:
0
;
right
:
0
;
width
:
100%
;
height
:
100%
;
z-index
:
100001
;
justify-content
:
center
;
align-items
:
center
;
border-radius
:
4px
;
background-color
:
rgba
(
255
,
255
,
255
,
0.8
);
}
.PJOVERLAY-dual-ring
{
display
:
inline-block
;
width
:
80px
;
height
:
80px
;
}
.PJOVERLAY-dual-ring
:after
{
content
:
" "
;
display
:
block
;
width
:
64px
;
height
:
64px
;
margin
:
8px
;
border-radius
:
50%
;
border
:
6px
solid
#606fc7
;
border-color
:
#606fc7
transparent
#606fc7
transparent
;
animation
:
PJOVERLAY-dual-ring
1.2s
linear
infinite
;
}
@keyframes
PJOVERLAY-dual-ring
{
0
%
{
transform
:
rotate
(
0deg
);
}
100
%
{
transform
:
rotate
(
360deg
);
}
}
/*NOTIFICATIONS*/
.PJOVERLAY-notification-list
{
z-index
:
10000
;
position
:
fixed
;
top
:
12px
;
width
:
100%
;
padding
:
0
10%
;
box-sizing
:
border-box
;
}
.PJOVERLAY-notification
{
position
:
relative
;
background-color
:
white
;
margin-bottom
:
10px
;
border-radius
:
4px
;
box-sizing
:
border-box
;
padding
:
8px
16px
;
box-shadow
:
0
0
1px
2px
rgba
(
0
,
0
,
0
,
0.2
);
}
overlay/src/components/contactlist.js
0 → 100644
View file @
d39fceb9
import
m
from
'
mithril
'
import
{
pj
}
from
'
../utils
'
const
Contact
=
{
view
:
vnode
=>
{
const
info
=
vnode
.
attrs
.
info
return
m
(
pj
(
'
.contact
'
),
{
onclick
:
e
=>
{
vnode
.
attrs
.
onclick
(
info
)
}
},
m
(
'
strong
'
,
info
.
fullname
),
'
(
'
+
info
.
email
+
'
)
'
,
m
(
pj
(
'
.muted
'
),
info
.
contact_for
)
)
}
}
export
default
function
ContactPopup
(
init
){
var
dom
=
null
const
removeFn
=
init
.
attrs
.
removeFn
function
clickOutside
(
e
){
if
(
!
dom
.
contains
(
e
.
target
))
removeFn
()
m
.
redraw
()
}
return
{
onbeforeremove
:
vnode
=>
{
dom
.
classList
.
add
(
'
PJOVERLAY-slideOutDown
'
)
return
new
Promise
(
r
=>
{
dom
.
addEventListener
(
'
animationend
'
,
r
)
})
},
view
:
(
vnode
)
=>
m
(
pj
(
'
.contacts.animated.slideInUp
'
),
{
oncreate
:
vnode
=>
{
dom
=
vnode
.
dom
document
.
addEventListener
(
'
click
'
,
clickOutside
)
},
onremove
:
vnode
=>
{
document
.
removeEventListener
(
'
click
'
,
clickOutside
)
}
},
m
(
'
h4
'
,
'
Request Support
'
),
vnode
.
attrs
.
contacts
.
map
(
contact
=>
m
(
Contact
,
{
info
:
contact
,
onclick
:
vnode
.
attrs
.
clickContact
}))
)
}
}
overlay/src/components/modal.js
View file @
d39fceb9
...
...
@@ -13,7 +13,7 @@ const Overlay = function() {
children
=
v
.
children
// Append a container to the end of body
dom
=
document
.
createElement
(
'
div
'
)
dom
.
className
=
'
overlay
'
dom
.
className
=
'
pj-
overlay
'
dom
.
setAttribute
(
'
data-html2canvas-ignore
'
,
true
)
document
.
body
.
appendChild
(
dom
)
m
.
mount
(
dom
,
OverlayContainer
)
...
...
@@ -46,7 +46,6 @@ const Modal = function(v) {
m
.
redraw
()
}
}
return
{
view
({
attrs
:
{
title
,
content
,
buttons
,
onClose
}})
{
if
(
clickedId
!=
null
)
{
...
...
@@ -99,4 +98,4 @@ const Modal = function(v) {
}
}
export
default
Modal
\ No newline at end of file
export
default
Modal
overlay/src/components/newmodal.js
0 → 100644
View file @
d39fceb9
import
m
from
'
mithril
'
export
default
function
Modal
(
init
){
const
modal_class
=
init
.
attrs
.
class
const
fade_out_class
=
init
.
attrs
.
fade_out_class
const
overlay_class
=
init
.
attrs
.
overlay_class
const
overlay_fade_out_class
=
init
.
attrs
.
overlay_fade_out_class
const
removeFn
=
init
.
attrs
.
removeFn
var
dom
=
null
var
overlaydom
=
null
const
clickOutside
=
e
=>
{
console
.
log
(
'
b
'
)
if
(
!
dom
.
contains
(
e
.
target
))
removeFn
()
m
.
redraw
()
}
return
{
onbeforeremove
:
vnode
=>
{
dom
.
classList
.
add
(
fade_out_class
||
'
n-
'
)
overlaydom
.
classList
.
add
(
overlay_fade_out_class
||
'
n-
'
)
return
new
Promise
(
r
=>
{
overlaydom
.
addEventListener
(
'
animationend
'
,
r
)
})
},
view
:
vnode
=>
m
(
'
div
'
,
{
class
:
overlay_class
,
oncreate
:
vnode
=>
{
overlaydom
=
vnode
.
dom
}
},
m
(
'
div
'
,
{
class
:
modal_class
,
oncreate
:
vnode
=>
{
dom
=
vnode
.
dom
document
.
addEventListener
(
'
click
'
,
clickOutside
)
},
onremove
:
vnode
=>
{
document
.
removeEventListener
(
'
click
'
,
clickOutside
)
}
},
vnode
.
children
)
)
}
}
overlay/src/index.js
View file @
d39fceb9
import
m
from
'
mithril
'
;
import
{
getCookie
,
setCookie
}
from
'
./utils.js
'
;
import
{
pj
,
getCookie
,
setCookie
,
getBrowser
}
from
'
./utils.js
'
;
import
Modal
from
'
./components/modal
'
import
nModal
from
'
./components/newmodal
'
import
ContactList
from
'
./components/contactlist
'
import
html2canvas
from
'
html2canvas
'
;
const
baseURL
=
"
http://pygmy.uwat.ca:8004
"
import
'
./base.css
'
const
context
=
JSON
.
parse
(
"
{{js_context|safe|escapejs}}
"
)
const
baseURL
=
context
.
base_url
function
addCss
(
url
){
var
elm
=
document
.
createElement
(
'
link
'
)
elm
.
setAttribute
(
'
rel
'
,
'
stylesheet
'
)
elm
.
setAttribute
(
'
href
'
,
url
)
document
.
head
.
appendChild
(
elm
)
}
function
getBrowser
()
{
var
isOpera
=
(
!!
window
.
opr
&&
!!
opr
.
addons
)
||
!!
window
.
opera
||
navigator
.
userAgent
.
indexOf
(
'
OPR/
'
)
>=
0
;
var
isFirefox
=
typeof
InstallTrigger
!==
'
undefined
'
;
var
isSafari
=
/constructor/i
.
test
(
window
.
HTMLElement
)
||
(
function
(
p
)
{
return
p
.
toString
()
===
"
[object SafariRemoteNotification]
"
;
})(
!
window
[
'
safari
'
]
||
(
typeof
safari
!==
'
undefined
'
&&
safari
.
pushNotification
));
var
isIE
=
/*@cc_on!@*/
false
||
!!
document
.
documentMode
;
var
isEdge
=
!
isIE
&&
!!
window
.
StyleMedia
;
var
isChrome
=
!!
window
.
chrome
;
var
isBlink
=
(
isChrome
||
isOpera
)
&&
!!
window
.
CSS
;
var
output
=
isFirefox
?
'
Firefox
'
:
isChrome
?
'
Chrome
'
:
isSafari
?
'
Safari
'
:
isOpera
?
'
Opera
'
:
isIE
?
'
IE
'
:
isEdge
?
'
Edge
'
:
isBlink
?
'
Blink
'
:
'
Unknown
'
;
return
output
}
const
State
=
{
data
:
null
,
selected_contact
:
null
,
contactlist
:
false
,
// Delete
mail_modal
:
false
,
selected_contact_name
:
null
,
selected_contact_email
:
null
,
...
...
@@ -62,49 +40,23 @@ const Actions = {
State
.
data
.
notices
=
State
.
data
.
notices
.
filter
(
function
(
x
){
return
x
.
id
!=
notice
.
id
})
},
selectContact
:
function
(
info
){
State
.
contactlist
=
false
State
.
selected_contact
=
info
}
}
const
HelpBall
=
function
(
init
){
var
is_open
=
false
return
{
view
:
function
(
vnode
){
return
m
(
'
.pjoverlay-help-ball
'
,
{
class
:
is_open
&&
'
is_open
'
,
onclick
:
function
(){
if
(
!
is_open
){
is_open
=
true
}
},
onmouseleave
:
function
(){
if
(
is_open
){
is_open
=
false
}
}
},
!
is_open
?
'
?
'
:
m
(
'
.pjoverlay-contents
'
,
[
m
(
'
.pjoverlay-hbhead
'
,
'
CONTACTS
'
),
State
.
data
.
contacts
.
map
(
function
(
info
){
return
m
(
'
.pjoverlay-hbcard
'
,
{
onclick
:
()
=>
{
State
.
mail_modal
=
true
,
State
.
selected_contact_name
=
info
.
fullname
State
.
selected_contact_email
=
info
.
email
}
},[
m
(
'
.pjoverlay-hbcontact_for
'
,
info
.
contact_for
+
'
:
'
),
m
(
'
.pjoverlay-hbfullname
'
,
info
.
fullname
),
m
(
'
.pjoverlay-hbemail
'
,
info
.
email
),
])
})
]))
}
}
const
HelpBall
=
{
view
:
vnode
=>
m
(
pj
(
'
.help-ball
'
),
{
onclick
:
e
=>
{
State
.
contactlist
=
true
}
},
'
?
'
)
}
const
Notification
=
function
(
init
){
var
info
=
init
.
attrs
.
info
var
timeout
=
null
var
time
=
1000
*
(
5
+
(
5
*
init
.
attrs
.
index
))
var
time
=
1000
*
(
1
5
+
(
5
*
init
.
attrs
.
index
))
return
{
oncreate
:
function
(
vnode
){
...
...
@@ -115,14 +67,14 @@ const Notification = function(init){
},
time
)
},
view
:
function
(
vnode
){
return
m
(
'
.pjoverlay-notifcontainer
'
,
[
m
(
'
button
'
,
{
return
m
(
pj
(
'
.notification
'
)
,
[
m
(
pj
(
'
.close
button
'
)
,
{
onclick
:
()
=>
{
Actions
.
deleteNotification
(
info
)
}
},
'
x
'
),
m
(
'
.pjoverlay-notiftitle
'
,
info
.
title
),
m
(
'
.pjoverlay-notifcontent
'
,
info
.
content
)
m
(
'
p
'
,
m
(
'
b[style="font-size:120%;"]
'
,
info
.
title
)
)
,
info
.
content
.
split
(
'
\n
'
).
map
(
x
=>
m
(
'
p
'
,
x
)
)
])
}
}
...
...
@@ -131,7 +83,7 @@ const Notification = function(init){
const
Notifications
=
function
(
init
){
return
{
view
:
function
(
vnode
){
return
m
(
'
.pjoverlay-
notification
_
list
'
,
[
return
m
(
pj
(
'
.
notification
-
list
'
)
,
[
State
.
data
.
notices
.
map
(
function
(
info
,
i
){
return
m
(
Notification
,
{
info
:
info
,
key
:
info
.
id
,
index
:
i
})
...
...
@@ -144,38 +96,71 @@ const Notifications = function(init){
const
Form
=
function
(){
var
form
=
null
var
screenshot
=
null
var
sending
=
false
return
{
view
:
function
(
vnode
){
return
m
(
'
form
'
,
{
return
[
sending
&&
m
(
pj
(
'
.modal-cover
'
),
m
(
'
div
'
,
m
(
'
h4
'
,
'
Sending...
'
),
m
(
pj
(
'
.dual-ring
'
)))),
m
(
pj
(
'
span.closebutton
'
),
{
onclick
:
()
=>
{
State
.
selected_contact
=
null
}},
m
.
trust
(
'
×
'
)),
m
(
pj
(
'
form.form
'
),
{
oncreate
:
function
(
vnode
){
form
=
vnode
.
dom
console
.
log
(
form
)
}
},
[
m
(
'
div.name
'
,
[
m
(
'
span
'
,
'
Name:
'
),
m
(
'
h4
'
,
'
Request Support from
'
,
State
.
selected_contact
.
fullname
),
m
(
'
p
'
,
m
(
'
em
'
,
'
(You may also contact this person manually via
'
,
m
(
'
a
'
,
{
href
:
'
mailto:
'
+
State
.
selected_contact
.
email
},
State
.
selected_contact
.
email
),
'
)
'
)),
m
(
'
p
'
,
'
This process will send an email to
'
,
State
.
selected_contact
.
fullname
,
'
. Please provide accurate information below to help resolve your issue quicker.
'
),
m
(
'
div
'
,
[
m
(
'
span
'
,
'
Your Name:
'
),
m
(
'
br
'
),
m
(
'
input[type="text"][name="name"]
'
),
m
(
'
br
'
),
]),
m
(
'
div
.email
'
,
[
m
(
'
span
'
,
'
Email
:
'
),
m
(
'
div
'
,
[
m
(
'
span
'
,
'
Your Email Address
:
'
),
m
(
'
br
'
),
m
(
'
input[type="text"][name="email"]
'
),
m
(
'
br
'
),
]),
m
(
'
div
.comment
'
,
[
m
(
'
span
'
,
'
Comment
:
'
),
m
(
'
div
'
,
[
m
(
'
span
'
,
'
Describe your Issue
:
'
),
m
(
'
br
'
),
m
(
'
textarea#comment[rows="8"][name="comment"]
'
,),
m
(
'
br
'
),
]),
m
(
'
hr
'
),
m
(
'
p
'
,
'
To assist in resolving your issue, the following information will
'
,
m
(
'
strong
'
,
'
automatically
'
),
'
be added to the message:
'
),
m
(
'
ul
'
,
m
(
'
li
'
,
'
Your IP address
'
),
m
(
'
li
'
,
'
You web browser + version
'
),
m
(
'
li
'
,
'
the current URL
'
),
m
(
'
li
'
,
'
A screen-capture of this page (only within your browser)
'
),
),
m
(
'
input[type="button"][value="Send"]
'
,
{
onclick
:
function
(){
html2canvas
(
document
.
body
).
then
(
function
(
canvas
)
{
sending
=
true