Rewriting css editor
This commit is contained in:
Jiiks
parent
ef7009f5a1
commit
b7e0de3e41
|
|
@ -10,85 +10,26 @@
|
|||
</head>
|
||||
<body>
|
||||
<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">
|
||||
<span class="icon"></span>
|
||||
<span id="windowtitle" class="title">CSS Editor</span>
|
||||
</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 class="icon">
|
||||
<div class="inner"></div>
|
||||
</div>
|
||||
<div id="cbAutoSave" class="checkbox-container" onClick="toggleOption(this, 'auto-save')">
|
||||
<div class="checkbox"></div>
|
||||
<span>Auto Save</span>
|
||||
<div class="title">CSS Editor</div>
|
||||
<div class="flex-spacer"></div>
|
||||
<div class="controls">
|
||||
<button title="Toggle always on top" id="toggleaot">P</button>
|
||||
<button title="Close CSS Editor" id="closeeditor">X</button>
|
||||
</div>
|
||||
<div id="cbExtEditor" class="checkbox-container" onClick="toggleOption(this, 'external-editor')">
|
||||
<div class="checkbox"></div>
|
||||
<span>Use External Editor</span>
|
||||
</div>
|
||||
<div id="spinner"><div class="valign">Loading Please Wait...</div></div>
|
||||
<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>
|
||||
|
|
|
|||
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