Rewriting css editor

This commit is contained in:
Jiiks 2018-01-17 15:46:27 +02:00
parent ef7009f5a1
commit b7e0de3e41
4 changed files with 706 additions and 425 deletions

View File

@ -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

105
tests/csseditor/main.js Normal file
View File

@ -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'
}

448
tests/csseditor/mainold.css Normal file

File diff suppressed because one or more lines are too long