pull/36/head
Evan Chen 2021-10-21 19:00:25 +08:00
parent 442aad83ec
commit a2c16da520
10 changed files with 6068 additions and 15 deletions

3
.gitignore vendored
View File

@ -1,4 +1,5 @@
dist
node_modules
.parcel-cache
public/css/main.css*
public/css/main.css*
public/js/main.js*

View File

@ -4,6 +4,8 @@
* download files #26
* add goto last line toolbar #21
* use parcel to load main.js
* use icons
## Fix

5956
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -5,6 +5,7 @@
"scripts": {
"build": "sass --style compressed src/main.scss public/css/main.css",
"start": "sass src/main.scss public/css/main.css",
"js-dev": "parcel build src/main.js --dist-dir public/js --no-content-hash",
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
@ -18,5 +19,8 @@
"bulma": "^0.9.3",
"prismjs": "^1.25.0",
"sass": "^1.43.2"
},
"devDependencies": {
"parcel": "^2.0.0"
}
}

BIN
public/assets/mat.ttf Normal file

Binary file not shown.

View File

@ -2,5 +2,5 @@ package public
import "embed"
//go:embed js css ace
//go:embed js css ace assets
var FS embed.FS

View File

@ -1,4 +1,5 @@
window.ToolIsFollow = false;
async function FileGet(follower=false){

View File

@ -7,6 +7,7 @@ $modal-content-width: 90vw;
@import "../node_modules/@creativebulma/bulma-tooltip/src/sass/index.sass";
@import "./ace.scss";
@import "./material-icon.scss";
#error_view {
position: fixed; /* Sit on top of the page content */
@ -18,4 +19,18 @@ $modal-content-width: 90vw;
#title {
padding: 0.5rem;
}
}
.icn-spinner {
animation: spin-animation 0.5s infinite;
display: inline-block;
}
@keyframes spin-animation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}

21
src/material-icon.scss Normal file
View File

@ -0,0 +1,21 @@
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url(/public/assets/mat.ttf) format('truetype');
}
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px;
line-height: 1;
letter-spacing: normal;
text-transform: none;
display: inline-block;
white-space: nowrap;
word-wrap: normal;
direction: ltr;
}

View File

@ -3,7 +3,13 @@
<div class="level-left">
<div class="field has-addons">
<p class="control">
<button class="button is-small" onclick="editor.gotoLine(editor.session.getLength())">Bottom</button>
<button class="button is-small has-tooltip-arrow"
data-tooltip="Go to last line"
onclick="editor.gotoLine(editor.session.getLength())">
<span class="icon is-small"><span class="material-icons">
vertical_align_bottom
</span></span>
</button>
</p>
<p class="control">
<div class="select is-small">
@ -16,13 +22,30 @@
</div>
</p>
<p class="control">
<button class="button is-small" id="toolFollow" onclick="toolFollow()">Follow</button>
<button class="button is-small has-tooltip-arrow" id="toolFollow"
data-tooltip="Follow file change (1s)" onclick="toolFollow()">
<span class="icon is-small"><span class="material-icons" id="toolFollowIcon">
pause
</span></span>
</button>
</p>
<p class="control">
<button class="button is-small" onclick="toolFormat()">Format</button>
<button class="button is-small has-tooltip-arrow"
data-tooltip="Format Code"
onclick="toolFormat()">
<span class="icon is-small"><span class="material-icons">
code
</span></span>
</button>
</p>
<p class="control">
<button class="button is-small is-light is-danger" id="toolWrap" onclick="toggleWrap()">NoWrap</button>
<button class="button is-small is-light is-danger has-tooltip-arrow"
data-tooltip="Line Wrap"
id="toolWrap" onclick="toggleWrap()">
<span class="icon is-small"><span class="material-icons" id="toolWrapIcon">
view_headline
</span></span>
</button>
</p>
</div>
</div>
@ -30,14 +53,29 @@
<div class="level-right">
<div class="field has-addons">
<p class="control">
<button class="button is-small" id="toolRefresh" onclick="toolRefresh()">Refresh</button>
<button class="button is-small has-tooltip-arrow" id="toolRefresh"
data-tooltip="Refresh" onclick="toolRefresh()">
<span class="icon is-small"><span class="material-icons">
refresh
</span></span>
</button>
</p>
{{if not .File.RO}}
<p class="control">
{{if eq .File.Alias "ConfigUI"}}
<button class="button is-small" id="toolSave" onclick="toolSave()">Apply</button>
<button class="button is-small has-tooltip-arrow" id="toolSave"
data-tooltip="Apply" onclick="toolSave()">
<span class="icon is-small"><span class="material-icons">
play_arrow
</span></span>
</button>
{{else}}
<button class="button is-small" id="toolSave" onclick="toolSave()">Save</button>
<button class="button is-small has-tooltip-arrow" id="toolSave"
data-tooltip="Save" onclick="toolSave()">
<span class="icon is-small"><span class="material-icons">
save
</span></span>
</button>
{{end}}
</p>
{{end}}
@ -45,14 +83,22 @@
<p class="control">
<button class="button is-small has-tooltip-arrow"
data-tooltip="{{.File.Action}}"
id="toolApply" onclick="toolApply()"
>Apply</button>
id="toolApply" onclick="toolApply()">
<span class="icon is-small"><span class="material-icons">
play_arrow
</span></span>
</button>
</p>
{{end}}
{{/* TEST */}}
<p class="control">
<a class="button is-small" href="/api/export?name={{.File.Alias}}">Download</a>
<a class="button is-small has-tooltip-arrow" data-tooltip="Download"
href="/api/export?name={{.File.Alias}}">
<span class="icon is-small"><span class="material-icons">
download
</span></span>
</a>
</p>
</div>
</div>
@ -83,14 +129,15 @@ function toggleWrap(){
let mode = editor.session.getUseWrapMode();
editor.session.setUseWrapMode(!mode)
let el = document.getElementById('toolWrap');
let icon =document.getElementById('toolWrapIcon');
if (mode){
el.classList.remove('is-success');
el.classList.add('is-danger');
el.innerHTML = 'NoWrap'
icon.innerText = 'view_headline'
} else {
el.classList.remove('is-danger');
el.classList.add('is-success');
el.innerHTML = 'Wrap'
icon.innerText = 'wrap_text';
}
}
@ -102,11 +149,17 @@ function toolFollow(){
if (ToolIsFollow){
ToolIsFollow = false
let el = document.getElementById('toolFollow');
let icon = document.getElementById('toolFollowIcon');
el.classList.remove('is-primary');
icon.classList.remove('icn-spinner');
icon.innerText='pause';
} else {
ToolIsFollow = true
let el = document.getElementById('toolFollow');
let icon = document.getElementById('toolFollowIcon');
el.classList.add('is-primary');
icon.innerText='sync';
icon.classList.add('icn-spinner');
editor.gotoLine(editor.session.getLength());
}
}