Skip to content
GitLab
Projects
Groups
Snippets
/
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
Menu
Open sidebar
yPhil
Pétrolette
Commits
a01bcc29
Commit
a01bcc29
authored
Dec 11, 2017
by
yPhil
Browse files
UI: New Radial loader: WIP
parent
2e70fb1d
Changes
4
Expand all
Hide whitespace changes
Inline
Side-by-side
public/css/circle.css
0 → 100644
View file @
a01bcc29
This diff is collapsed.
Click to expand it.
public/css/petrolette.css
View file @
a01bcc29
...
...
@@ -281,3 +281,15 @@ div.wiki i:hover {
i
.feedIcon
{
background-image
:
url("/static/images/feed-generic-rss.png")
;
}
#loadRadial
{
position
:
fixed
;
right
:
50%
;
bottom
:
10px
;
opacity
:
0.5
;
}
#loadRadial
.fill
,
#loadRadial
.bar
{
border-color
:
var
(
--color-qua
)
!important
;
}
public/lib/js/utilities.js
View file @
a01bcc29
...
...
@@ -190,6 +190,9 @@ MOB.utilities = {
this
.
progressContainer
=
$
(
'
<div id="progressBar">
'
);
this
.
progressElt
=
$
(
'
<div id="cursor">
'
);
this
.
radialLoader
=
$
(
'
#loadRadial
'
);
this
.
radialLoaderLabel
=
$
(
'
#loadRadial > span
'
);
this
.
progressContainer
.
append
(
this
.
progressElt
);
$
(
'
body
'
).
prepend
(
this
.
progressContainer
);
this
.
steps
=
steps
;
...
...
@@ -197,17 +200,22 @@ MOB.utilities = {
};
progress
.
increment
=
function
()
{
this
.
radialLoader
.
attr
(
'
class
'
,
'
c100 small green dark p
'
+
Math
.
ceil
(
100
*
this
.
step
/
this
.
steps
));
this
.
radialLoaderLabel
.
text
(
Math
.
ceil
(
100
*
this
.
step
/
this
.
steps
)
+
'
%
'
);
this
.
progressElt
.
animate
({
width
:
Math
.
ceil
(
100
*
(
this
.
step
+
1
)
/
this
.
steps
)
+
'
%
'
width
:
Math
.
ceil
(
100
*
this
.
step
/
this
.
steps
)
+
'
%
'
// ,'background-color': randomColor
});
this
.
step
++
;
if
(
this
.
step
+
1
>=
this
.
steps
)
this
.
finish
();
if
(
this
.
step
>=
this
.
steps
)
this
.
finish
();
};
progress
.
finish
=
function
()
{
var
self
=
this
;
self
.
progressContainer
.
hide
(
'
fast
'
);
self
.
radialLoader
.
fadeOut
(
'
fast
'
);
};
progress
.
stop
=
function
()
{
this
.
progressElt
.
removeClass
(
'
progress-bar-striped active
'
);
...
...
views/index.html
View file @
a01bcc29
...
...
@@ -9,9 +9,9 @@
<!-- <link rel="preload" as="style" href="/static/css/themes/day/jquery-ui.css"> -->
<!-- <link rel="preload" as="style" href="/static/css/fontello.css"> -->
<!--
<link rel="preload" as="style" href="/static/css/themes/day.css">
-->
<!--
<link rel="preload" as="style" href="/static/css/themes/night.css">
-->
<link
rel=
"preload"
as=
"style"
href=
"/static/css/themes/day.css"
>
<link
rel=
"preload"
as=
"style"
href=
"/static/css/themes/night.css"
>
<link
rel=
"stylesheet"
href=
"/static/css/themes/day/jquery-ui.min.css"
>
<link
rel=
"stylesheet"
href=
"/static/css/fontello.css"
media=
"none"
onload=
"this.media='all';"
>
...
...
@@ -21,6 +21,7 @@
<link
rel=
"stylesheet"
href=
"/static/css/mob-ui.css"
media=
"none"
onload=
"this.media='all';"
>
<link
rel=
"stylesheet"
href=
"/static/css/petrolette.css"
media=
"none"
onload=
"this.media='all';"
>
<link
rel=
"stylesheet"
href=
"/static/css/circle.css"
>
<link
rel=
"stylesheet"
media=
"screen"
href=
"https://fontlibrary.org/face/grobe-deutschmeister"
type=
"text/css"
/>
<link
rel=
"stylesheet"
href=
"/bower/fancybox/dist/jquery.fancybox.min.css"
/>
...
...
@@ -44,7 +45,8 @@
document
.
fonts
.
ready
.
then
((
fontFaceSet
)
=>
{
console
.
log
(
fontFaceSet
.
name
,
'
FontFace loaded.
'
);
console
.
log
(
fontFaceSet
.
size
,
'
FontFaces loaded.
'
);
document
.
getElementById
(
'
waitScreen
'
).
style
.
display
=
'
none
'
;
// document.getElementById('waitScreen').style.display = 'none';
document
.
getElementById
(
'
loadRadial
'
).
style
.
right
=
'
10px
'
;
});
console
.
log
(
'
Lang: %s (prefs: %s)
'
,
navigator
.
language
,
MOB
.
prefs
.
readConfig
(
'
lang
'
))
...
...
@@ -123,10 +125,6 @@
<body>
<div
id=
"waitScreen"
style=
"position: fixed; top:0; width: 100vw; height: 100vh;"
>
<div
class=
"wspinner"
></div>
<!-- plop -->
</div>
<div
id=
"tabs"
>
<ul
id=
"tabUl"
></ul>
...
...
@@ -140,6 +138,14 @@
<script
src=
"/static/lib/js/dialog.js"
></script>
<script
src=
"/static/lib/js/utilities.js"
></script>
<div
id=
"loadRadial"
class=
"c100 small green dark p0"
>
<span>
0%
</span>
<div
class=
"slice"
>
<div
class=
"bar"
></div>
<div
class=
"fill"
></div>
</div>
</div>
<div
id=
"preloaded-images"
>
<img
src=
"/static/images/feed-toggle-triangle-fff.png"
width=
"1"
height=
"1"
alt=
"Image 01"
/>
<img
src=
"/static/images/feed-toggle-triangle-000.png"
width=
"1"
height=
"1"
alt=
"Image 02"
/>
...
...
Write
Preview
Supports
Markdown
0%
Try again
or
attach a new 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