magnus/Notes2
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

WIP sync

Browse source
This commit is contained in:
Magnus Åhall 2026-06-09 06:43:07 +02:00
parent 805f7ae318
commit 227fa2208b
4 changed files with 73 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

71
static/css/notes2.css
View file

@ -307,65 +307,28 @@ button {
}
n2-syncprogress {
--radius: 8px;
position: absolute;
top: 16px;
right: 16px;
padding: 8px 16px;
z-index: 16384;
border-radius: 6px;
font-weight: bold;
background-color: var(--color1);
color: #fff;
display: grid;
grid-area: sync;
display: grid;
justify-items: center;
grid-template-columns: min-content repeat(3, min-content);
grid-gap: 8px 8px;
white-space: nowrap;
align-items: center;
justify-items: end;
position: relative;
opacity: 0;
transition: height 0s 500ms, opacity 500ms linear, visibility 0s 500ms;
&.show {
opacity: 1;
transition: visibility, height 0s, opacity 500ms linear;
img {
grid-row: 1/3;
height: 34px;
margin-right: 8px;
}
progress {
width: 100%;
height: 24px;
border-radius: 8px;
}
.count {
position: absolute;
top: 16px;
width: 100%;
white-space: nowrap;
color: #888;
text-align: center;
font-size: 12pt;
font-weight: bold;
}
progress[value]::-webkit-progress-bar {
background-color: #eee;
box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
border-radius: var(--radius);
}
progress[value]::-moz-progress-bar {
background-color: #eee;
box-shadow: 0 2px var(--radius) rgba(0, 0, 0, 0.25) inset;
border-radius: var(--radius);
}
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
View 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>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

10
static/js/sync.mjs
View file

@ -166,8 +166,9 @@ export class N2SyncProgress extends CustomHTMLElement {
static {// {{{
this.tmpl = document.createElement('template')
this.tmpl.innerHTML = `
<progress data-el="progress" min=0 max=137 value=0></progress>
<div data-el="count" class="count">0 / 0</div>
<img src="/images/${_VERSION}/icon_transfer.svg">
<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() {//{{{
@ -211,9 +212,8 @@ export class N2SyncProgress extends CustomHTMLElement {
this.render()
}//}}}
render() {//{{{
this.elProgress.max = this.state.nodesToSync
this.elProgress.value = this.state.nodesSynced
this.elCount.innerText = `${this.state.nodesSynced} / ${this.state.nodesToSync}`
this.elDownloadTransferred.innerText = this.state.nodesSynced
this.elDownloadTotal.innerText = this.state.nodesToSync
}//}}}
setSyncState(state) {// {{{
if (state)

2
views/pages/notes2.gotmpl
View file

@ -22,6 +22,8 @@
<n2-pagehistory></n2-pagehistory>
</div>
</div>
<n2-syncprogress></n2-syncprogress>
</div>
<link rel="stylesheet" type="text/css" href="/css/{{ .VERSION }}/notes2.css">