Rewriting css editor
This commit is contained in:
parent
ef7009f5a1
commit
b7e0de3e41
|
@ -10,85 +10,26 @@
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<button titlge="Close CSS Editor" class="close" onClick="closeWindow()">X</button>
|
|
||||||
<button title="Toggle always on top" class="aot" onClick="toggleAot(this)">P</button>
|
|
||||||
<div class="titlebg"></div>
|
|
||||||
<div class="titlebar">
|
<div class="titlebar">
|
||||||
<span class="icon"></span>
|
<div class="icon">
|
||||||
<span id="windowtitle" class="title">CSS Editor</span>
|
<div class="inner"></div>
|
||||||
</div>
|
|
||||||
<div id="eehint"><span>Your external editor is proxied to this window</span></div>
|
|
||||||
<div id="cm-container"></div>
|
|
||||||
<div id="alert">
|
|
||||||
Saved!
|
|
||||||
</div>
|
|
||||||
<div id="spinner">
|
|
||||||
<div class="valign">Loading Please Wait</div>
|
|
||||||
</div>
|
|
||||||
<div id="hints">
|
|
||||||
<h3>Keybinds</h3>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>Exit:</td>
|
|
||||||
<td>ESC</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Save:</td>
|
|
||||||
<td>Ctrl/Cmd + S</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Update:</td>
|
|
||||||
<td>Ctrl/Cmd + H</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div id="cmhints">
|
|
||||||
<h3>CM Keybinds</h3>
|
|
||||||
<table>
|
|
||||||
<tr>
|
|
||||||
<td>Search:</td>
|
|
||||||
<td>Ctrl/Cmd + F</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Find Next:</td>
|
|
||||||
<td>Ctrl/Cmd + G</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Find Previous</td>
|
|
||||||
<td>Ctrl-Shift/Cmd-Option + G</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Replace</td>
|
|
||||||
<td>Ctrl-Shift/Cmd-Option + F</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Replace All</td>
|
|
||||||
<td>Ctrl-Shift/Cmd-Option-Shift + R</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Persistent Search:</td>
|
|
||||||
<td>Alt + F</td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td>Jump To Line:</td>
|
|
||||||
<td>Alt + G</td>
|
|
||||||
</tr>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
<div class="controls">
|
|
||||||
<button id="btnSave" onClick="save()">Save</button>
|
|
||||||
<button id="btnUpdate" onClick="update()">Update</button>
|
|
||||||
<div id="cbLiveUpdate" class="checkbox-container" onClick="toggleOption(this, 'live-update')">
|
|
||||||
<div class="checkbox"></div>
|
|
||||||
<span>Live Update</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="cbAutoSave" class="checkbox-container" onClick="toggleOption(this, 'auto-save')">
|
<div class="title">CSS Editor</div>
|
||||||
<div class="checkbox"></div>
|
<div class="flex-spacer"></div>
|
||||||
<span>Auto Save</span>
|
<div class="controls">
|
||||||
|
<button title="Toggle always on top" id="toggleaot">P</button>
|
||||||
|
<button title="Close CSS Editor" id="closeeditor">X</button>
|
||||||
</div>
|
</div>
|
||||||
<div id="cbExtEditor" class="checkbox-container" onClick="toggleOption(this, 'external-editor')">
|
</div>
|
||||||
<div class="checkbox"></div>
|
<div id="spinner"><div class="valign">Loading Please Wait...</div></div>
|
||||||
<span>Use External Editor</span>
|
<div class="editor" id="editor">
|
||||||
|
</div>
|
||||||
|
<div class="tools">
|
||||||
|
<div class="flex-row">
|
||||||
|
<button id="btnSave">Save</button>
|
||||||
|
<button id="btnUpdate">Update</button>
|
||||||
|
</div>
|
||||||
|
<div class="flex-row">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,105 @@
|
||||||
|
const { remote, ipcRenderer } = require('electron');
|
||||||
|
|
||||||
|
//Options
|
||||||
|
const options = {
|
||||||
|
alwaysOnTop: false
|
||||||
|
};
|
||||||
|
|
||||||
|
//Elements
|
||||||
|
const
|
||||||
|
$spinner = $('#spinner'),
|
||||||
|
$toggleaot = $('#toggleaot'),
|
||||||
|
$closeeditor = $('#closeeditor'),
|
||||||
|
$editor = $('#editor'),
|
||||||
|
$btnSave = $('#btnSave'),
|
||||||
|
$btnUpdate = $('#btnUpdate');
|
||||||
|
|
||||||
|
ipcRenderer.on('set-css', (_, data) => {
|
||||||
|
if (data.error) {
|
||||||
|
alert(data.error);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
setCss(data);
|
||||||
|
$spinner.hide();
|
||||||
|
});
|
||||||
|
|
||||||
|
function setCss(css) {}
|
||||||
|
|
||||||
|
function alert(message) {}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const codeMirror = CodeMirror($editor[0], {
|
||||||
|
lineNumbers: true,
|
||||||
|
mode: 'css',
|
||||||
|
indentUnit: 4,
|
||||||
|
theme: 'material',
|
||||||
|
scrollbarStyle: 'overlay',
|
||||||
|
extraKeys: { 'Ctrl-Space': 'autocomplete' },
|
||||||
|
dialog: { 'position': 'bottom' }
|
||||||
|
});
|
||||||
|
|
||||||
|
codeMirror.on('keyup', function (editor, event) {
|
||||||
|
if (window.controlDown) return;
|
||||||
|
if (ExcludedIntelliSenseTriggerKeys[event.keyCode]) return;
|
||||||
|
CodeMirror.commands.autocomplete(editor, null, { completeSingle: false });
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
const ExcludedIntelliSenseTriggerKeys = {
|
||||||
|
'8': 'backspace',
|
||||||
|
'9': 'tab',
|
||||||
|
'13': 'enter',
|
||||||
|
'16': 'shift',
|
||||||
|
'17': 'ctrl',
|
||||||
|
'18': 'alt',
|
||||||
|
'19': 'pause',
|
||||||
|
'20': 'capslock',
|
||||||
|
'27': 'escape',
|
||||||
|
'33': 'pageup',
|
||||||
|
'34': 'pagedown',
|
||||||
|
'35': 'end',
|
||||||
|
'36': 'home',
|
||||||
|
'37': 'left',
|
||||||
|
'38': 'up',
|
||||||
|
'39': 'right',
|
||||||
|
'40': 'down',
|
||||||
|
'45': 'insert',
|
||||||
|
'46': 'delete',
|
||||||
|
'91': 'left window key',
|
||||||
|
'92': 'right window key',
|
||||||
|
'93': 'select',
|
||||||
|
'107': 'add',
|
||||||
|
'109': 'subtract',
|
||||||
|
'110': 'decimal point',
|
||||||
|
'111': 'divide',
|
||||||
|
'112': 'f1',
|
||||||
|
'113': 'f2',
|
||||||
|
'114': 'f3',
|
||||||
|
'115': 'f4',
|
||||||
|
'116': 'f5',
|
||||||
|
'117': 'f6',
|
||||||
|
'118': 'f7',
|
||||||
|
'119': 'f8',
|
||||||
|
'120': 'f9',
|
||||||
|
'121': 'f10',
|
||||||
|
'122': 'f11',
|
||||||
|
'123': 'f12',
|
||||||
|
'144': 'numlock',
|
||||||
|
'145': 'scrolllock',
|
||||||
|
'186': 'semicolon',
|
||||||
|
'187': 'equalsign',
|
||||||
|
'188': 'comma',
|
||||||
|
'189': 'dash',
|
||||||
|
'190': 'period',
|
||||||
|
'191': 'slash',
|
||||||
|
'192': 'graveaccent',
|
||||||
|
'220': 'backslash',
|
||||||
|
'222': 'quote'
|
||||||
|
}
|
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue