tmp
parent
442aad83ec
commit
a2c16da520
|
@ -1,4 +1,5 @@
|
|||
dist
|
||||
node_modules
|
||||
.parcel-cache
|
||||
public/css/main.css*
|
||||
public/css/main.css*
|
||||
public/js/main.js*
|
|
@ -4,6 +4,8 @@
|
|||
|
||||
* download files #26
|
||||
* add goto last line toolbar #21
|
||||
* use parcel to load main.js
|
||||
* use icons
|
||||
|
||||
## Fix
|
||||
|
||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
Binary file not shown.
|
@ -2,5 +2,5 @@ package public
|
|||
|
||||
import "embed"
|
||||
|
||||
//go:embed js css ace
|
||||
//go:embed js css ace assets
|
||||
var FS embed.FS
|
||||
|
|
|
@ -1,4 +1,5 @@
|
|||
|
||||
|
||||
window.ToolIsFollow = false;
|
||||
|
||||
async function FileGet(follower=false){
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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());
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue