WIP sync
This commit is contained in:
Magnus Åhall
parent
805f7ae318
commit
227fa2208b
4 changed files with 73 additions and 59 deletions
|
|
@ -307,65 +307,28 @@ button {
|
||||||
}
|
}
|
||||||
|
|
||||||
n2-syncprogress {
|
n2-syncprogress {
|
||||||
--radius: 8px;
|
|
||||||
|
|
||||||
display: grid;
|
|
||||||
grid-area: sync;
|
|
||||||
display: grid;
|
|
||||||
justify-items: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
opacity: 0;
|
|
||||||
transition: height 0s 500ms, opacity 500ms linear, visibility 0s 500ms;
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
opacity: 1;
|
|
||||||
transition: visibility, height 0s, opacity 500ms linear;
|
|
||||||
}
|
|
||||||
|
|
||||||
progress {
|
|
||||||
width: 100%;
|
|
||||||
height: 24px;
|
|
||||||
border-radius: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count {
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
width: 100%;
|
right: 16px;
|
||||||
white-space: nowrap;
|
padding: 8px 16px;
|
||||||
color: #888;
|
z-index: 16384;
|
||||||
text-align: center;
|
border-radius: 6px;
|
||||||
font-size: 12pt;
|
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
background-color: var(--color1);
|
||||||
|
color: #fff;
|
||||||
|
|
||||||
progress[value]::-webkit-progress-bar {
|
display: grid;
|
||||||
background-color: #eee;
|
grid-template-columns: min-content repeat(3, min-content);
|
||||||
box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
|
grid-gap: 8px 8px;
|
||||||
border-radius: var(--radius);
|
white-space: nowrap;
|
||||||
}
|
align-items: center;
|
||||||
|
justify-items: end;
|
||||||
|
|
||||||
progress[value]::-moz-progress-bar {
|
img {
|
||||||
background-color: #eee;
|
grid-row: 1/3;
|
||||||
box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
|
height: 34px;
|
||||||
border-radius: var(--radius);
|
margin-right: 8px;
|
||||||
}
|
}
|
||||||
|
|
||||||
progress[value]::-webkit-progress-value {
|
|
||||||
background: rgb(186, 95, 89);
|
|
||||||
background: linear-gradient(180deg, rgba(186, 95, 89, 1) 0%, rgba(254, 95, 85, 1) 50%, rgba(186, 95, 89, 1) 100%);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
progress[value]::-moz-progress-value {
|
|
||||||
background: rgb(186, 95, 89);
|
|
||||||
background: linear-gradient(180deg, rgba(186, 95, 89, 1) 0%, rgba(254, 95, 85, 1) 50%, rgba(186, 95, 89, 1) 100%);
|
|
||||||
border-radius: var(--radius);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============================================================= */
|
/* ============================================================= */
|
||||||
|
|
|
||||||
49
static/images/icon_transfer.svg
Normal file
49
static/images/icon_transfer.svg
Normal file
|
|
@ -0,0 +1,49 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||||
|
|
||||||
|
<svg
|
||||||
|
width="5.89642mm"
|
||||||
|
height="6.3499999mm"
|
||||||
|
viewBox="0 0 5.89642 6.3499999"
|
||||||
|
version="1.1"
|
||||||
|
id="svg1"
|
||||||
|
inkscape:version="1.4.2 (ebf0e94, 2025-05-08)"
|
||||||
|
sodipodi:docname="icon_transfer.svg"
|
||||||
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg">
|
||||||
|
<sodipodi:namedview
|
||||||
|
id="namedview1"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
bordercolor="#000000"
|
||||||
|
borderopacity="0.25"
|
||||||
|
inkscape:showpageshadow="2"
|
||||||
|
inkscape:pageopacity="0.0"
|
||||||
|
inkscape:pagecheckerboard="0"
|
||||||
|
inkscape:deskcolor="#d1d1d1"
|
||||||
|
inkscape:document-units="mm"
|
||||||
|
inkscape:zoom="1"
|
||||||
|
inkscape:cx="9.5"
|
||||||
|
inkscape:cy="10"
|
||||||
|
inkscape:window-width="1916"
|
||||||
|
inkscape:window-height="1161"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:window-y="0"
|
||||||
|
inkscape:window-maximized="1"
|
||||||
|
inkscape:current-layer="layer1" />
|
||||||
|
<defs
|
||||||
|
id="defs1" />
|
||||||
|
<g
|
||||||
|
inkscape:label="Layer 1"
|
||||||
|
inkscape:groupmode="layer"
|
||||||
|
id="layer1"
|
||||||
|
transform="translate(-102.39375,-145.78542)">
|
||||||
|
<title
|
||||||
|
id="title1">file-arrow-up-down-outline</title>
|
||||||
|
<path
|
||||||
|
d="m 105.14239,151.22828 c 0.0363,0.21771 0.11189,0.42031 0.21771,0.60475 h -2.36158 c -0.33565,0 -0.60477,-0.26912 -0.60477,-0.60475 v -4.83811 c 0,-0.33261 0.26912,-0.60475 0.60477,-0.60475 h 2.41904 l 1.81428,1.81429 v 1.53912 c -0.0998,-0.0151 -0.19956,-0.0272 -0.30238,-0.0272 -0.10285,0 -0.20259,0.0121 -0.30237,0.0272 v -1.23675 h -1.51191 v -1.51191 h -2.11666 v 4.83811 h 2.14387 m 1.18231,-1.51191 -0.75596,0.90714 h 0.45358 v 1.20952 h 0.60477 v -1.20952 h 0.45356 l -0.75595,-0.90714 m 1.51191,1.51191 v -1.20953 h -0.60477 v 1.20953 h -0.45356 l 0.75595,0.90714 0.75594,-0.90714 z"
|
||||||
|
id="path1"
|
||||||
|
style="stroke-width:0.302381;fill:#ffffff" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 2 KiB |
|
|
@ -166,8 +166,9 @@ export class N2SyncProgress extends CustomHTMLElement {
|
||||||
static {// {{{
|
static {// {{{
|
||||||
this.tmpl = document.createElement('template')
|
this.tmpl = document.createElement('template')
|
||||||
this.tmpl.innerHTML = `
|
this.tmpl.innerHTML = `
|
||||||
<progress data-el="progress" min=0 max=137 value=0></progress>
|
<img src="/images/${_VERSION}/icon_transfer.svg">
|
||||||
<div data-el="count" class="count">0 / 0</div>
|
<div data-el="download-transferred" class="count">0</div> <div>/</div> <div data-el="download-total">0</div>
|
||||||
|
<div data-el="upload-transferred" class="count">0</div> <div>/</div> <div data-el="upload-total">0</div>
|
||||||
`
|
`
|
||||||
}// }}}
|
}// }}}
|
||||||
constructor() {//{{{
|
constructor() {//{{{
|
||||||
|
|
@ -211,9 +212,8 @@ export class N2SyncProgress extends CustomHTMLElement {
|
||||||
this.render()
|
this.render()
|
||||||
}//}}}
|
}//}}}
|
||||||
render() {//{{{
|
render() {//{{{
|
||||||
this.elProgress.max = this.state.nodesToSync
|
this.elDownloadTransferred.innerText = this.state.nodesSynced
|
||||||
this.elProgress.value = this.state.nodesSynced
|
this.elDownloadTotal.innerText = this.state.nodesToSync
|
||||||
this.elCount.innerText = `${this.state.nodesSynced} / ${this.state.nodesToSync}`
|
|
||||||
}//}}}
|
}//}}}
|
||||||
setSyncState(state) {// {{{
|
setSyncState(state) {// {{{
|
||||||
if (state)
|
if (state)
|
||||||
|
|
|
||||||
|
|
@ -22,6 +22,8 @@
|
||||||
<n2-pagehistory></n2-pagehistory>
|
<n2-pagehistory></n2-pagehistory>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<n2-syncprogress></n2-syncprogress>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
|
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue