open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
8811e9d441
stylus/edit.html

240 lines
6.0 KiB
HTML
Raw Normal View History

Unix line endings
2015-02-09 03:32:06 +00:00
<html>
<head>
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
<script src="codemirror/lib/codemirror.js"></script>
<link rel="stylesheet" href="codemirror/lib/codemirror.css">
<script src="codemirror/mode/css/css.js"></script>
Add CodeMirror addons - search, code folding, match brackets, lint
2015-02-25 04:05:00 +00:00
<link rel="stylesheet" href="codemirror/addon/dialog/dialog.css">
<link rel="stylesheet" href="codemirror/addon/search/matchesonscrollbar.css">
<script src="codemirror/addon/scroll/annotatescrollbar.js"></script>
<script src="codemirror/addon/search/matchesonscrollbar.js"></script>
<script src="codemirror/addon/dialog/dialog.js"></script>
<script src="codemirror/addon/search/searchcursor.js"></script>
<script src="codemirror/addon/search/search.js"></script>
<link rel="stylesheet" href="codemirror/addon/fold/foldgutter.css" />
<script src="codemirror/addon/fold/foldcode.js"></script>
<script src="codemirror/addon/fold/foldgutter.js"></script>
<script src="codemirror/addon/fold/brace-fold.js"></script>
<script src="codemirror/addon/fold/comment-fold.js"></script>
<script src="codemirror/addon/edit/matchbrackets.js"></script>
<link rel="stylesheet" href="codemirror/addon/lint/lint.css" />
<script src="csslint/csslint.js"></script>
<script src="codemirror/addon/lint/lint.js"></script>
<script src="codemirror/addon/lint/css-lint.js"></script>
Edit style: autocomplete on Ctrl-Space using CodeMirror hint addon
2015-03-02 23:59:36 +00:00
<link rel="stylesheet" href="codemirror/addon/hint/show-hint.css" />
<script src="codemirror/addon/hint/show-hint.js"></script>
<script src="codemirror/addon/hint/css-hint.js"></script>
Edit style: use 'sublime' keymap, add custom keys F3, Shift-F3, Ctrl-H - find/find previous/replace Ctrl-G: go to line dialog Alt-PgDn: next code section Alt-PgUp: previous code section ...and many more.
2015-03-05 06:39:09 +00:00
<script src="codemirror/keymap/sublime.js"></script>
Unix line endings
2015-02-09 03:32:06 +00:00
<style type="text/css">
Add CodeMirror addons - search, code folding, match brackets, lint
2015-02-25 04:05:00 +00:00
Unix line endings
2015-02-09 03:32:06 +00:00
body {
margin: 0px;
font: 12px arial,sans-serif;
}
#header {
height: 100%;
width: 250px;
position: fixed;
top: 0px;
padding: 15px;
border-right: 1px dashed #AAA;
}
.notmac #header {
-webkit-box-shadow: 0px 0px 50px -18px black;
}
#sections {
padding-left: 290px;
}
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
#sections h2 {
Unix line endings
2015-02-09 03:32:06 +00:00
margin-top: 8px;
}
#basic-info {
margin-bottom: 12px;
}
#name {
width: 185px;
}
#sections > div {
margin: 10px;
padding: 0px 15px;
}
#sections > div:not(:first-child) {
border-top: 2px solid black;
}
Fix 'dirty' indicator on 'Code' boxes Toggle a class on the container instead of changing label text.
2015-03-10 15:45:13 +00:00
.dirty > label::before {
content: "*";
font-weight: bold;
}
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
#basic-info label {
Unix line endings
2015-02-09 03:32:06 +00:00
display: inline-block;
width: 10em;
vertical-align: top;
}
#header label {
width: 60px;
}
.code {
height: 10em;
width: 40em;
}
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
.CodeMirror {
border: solid #CCC 1px;
}
Indicate active code box with a darker border
2015-03-07 00:11:41 +00:00
.CodeMirror-focused {
border-color: black;
}
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
.applies-to {
display: flex;
}
.applies-to label {
flex: auto;
margin-top: 0.25em;
}
Unix line endings
2015-02-09 03:32:06 +00:00
.applies-to ul {
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
flex: auto;
flex-grow: 99;
Unix line endings
2015-02-09 03:32:06 +00:00
margin: 0;
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
padding: 0;
Unix line endings
2015-02-09 03:32:06 +00:00
}
.applies-to li {
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
display: flex;
Unix line endings
2015-02-09 03:32:06 +00:00
list-style-type: none;
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
align-items: center;
margin-bottom: 0.4em;
}
.applies-to li > * {
flex: auto;
min-height: 1.7em;
margin-left: 0.4em;
Unix line endings
2015-02-09 03:32:06 +00:00
}
.applies-to li .add-applies-to {
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
visibility: hidden;
text-align: left;
Unix line endings
2015-02-09 03:32:06 +00:00
}
.applies-to li:last-child .add-applies-to {
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
visibility: visible
}
.applies-to li .add-applies-to:first-child {
margin-left: 1em;
}
.applies-to li .applies-value {
flex-grow: 99;
padding-left: 0.5ex;
Unix line endings
2015-02-09 03:32:06 +00:00
}
body > section > *:not(h2) {
padding-left: 15px;
}
#sections > div {
padding-top: 1em;
padding-bottom: 1em;
}
#sections > div:only-of-type .remove-section {
display: none;
}
#sections > div .add-section {
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
margin-left: 0.4em;
Unix line endings
2015-02-09 03:32:06 +00:00
}
.applies-to img {
vertical-align: bottom;
}
Mostly mute CSSLint, re-enable gutter marks, hide squiggles Only these rules are enabled: * Parsing Errors * Disallow empty rules * Require use of known properties * Require properties appropriate for display
2015-03-11 20:28:54 +00:00
.CodeMirror-lint-mark-warning {
background: none;
Add CodeMirror addons - search, code folding, match brackets, lint
2015-02-25 04:05:00 +00:00
}
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me.
2015-02-19 17:29:57 +00:00
@media(max-width:737px) {
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome.
2015-02-18 15:57:33 +00:00
#header {
height: auto;
position: inherit;
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me.
2015-02-19 17:29:57 +00:00
width: auto;
border-right: none;
Made the CodeMirror area wider, more fixes Sorry, forgot some things. Now it should be right.
2015-02-19 17:42:34 +00:00
padding-left: 8px;
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome.
2015-02-18 15:57:33 +00:00
}
Made the CodeMirror area wider, more fixes Sorry, forgot some things. Now it should be right.
2015-02-19 17:42:34 +00:00
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome.
2015-02-18 15:57:33 +00:00
#sections {
padding-left: 0px;
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me.
2015-02-19 17:29:57 +00:00
}
Made the CodeMirror area wider, more fixes Sorry, forgot some things. Now it should be right.
2015-02-19 17:42:34 +00:00
#sections > div {
padding: 0px;
}
Add CodeMirror addons - search, code folding, match brackets, lint
2015-02-25 04:05:00 +00:00
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me.
2015-02-19 17:29:57 +00:00
#sections-heading {
padding-left: 8px;
}
Made the CodeMirror area wider, more fixes Sorry, forgot some things. Now it should be right.
2015-02-19 17:42:34 +00:00
Updated responsive design Fixed everything that wasn't lined up properly and shrinked some paddings to make more space for the editor. It also cuts off earlier now. Not sure what to do with the section borders, they seem alright to me.
2015-02-19 17:29:57 +00:00
body > section > *:not(h2) {
padding-left: 8px;
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome.
2015-02-18 15:57:33 +00:00
}
Add CodeMirror addons - search, code folding, match brackets, lint
2015-02-25 04:05:00 +00:00
Added responsive design for editor Fixes #28 It's not perfect, but it should work well. Suggestions welcome.
2015-02-18 15:57:33 +00:00
}
Add editor options (1) Add UI controls for `keyMap`, `tabSize`, `indentWithTabs`, and `lineWrapping`; `indentUnit` tracks `tabSize`. (2) Dispatch `change` events from `loadPrefs` to initialize CM options from the controls' event listener. (3) Move stock options from the `CM.fromTextArea` call into `CM.defaults`. Add `CM.setOption` method, analogous to the instance method, which updates `CM.defaults` and sets the option in all instances; add `CM.getOption` which simply returns `CM.defaults[option]`. (4) Move the new editor functions into `CM.commands` and replace the functions with commands.
2015-03-08 06:21:43 +00:00
/* editor options */
[type="number"] {
max-width: 2.8em;
text-align: right;
}
table, input, select {
font-size: inherit;
}
table td:first-child {min-width: 60px}
Unix line endings
2015-02-09 03:32:06 +00:00
</style>
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
<script src="storage.js"></script>
<script src="messaging.js"></script>
Unix line endings
2015-02-09 03:32:06 +00:00
<script src="localization.js"></script>
Apply styles to Stylish pages
2015-02-09 04:25:35 +00:00
<script src="apply.js"></script>
Unix line endings
2015-02-09 03:32:06 +00:00
</head>
<body id="stylish-edit">
<div id="header">
<h1 id="heading"></h1>
<section id="basic-info">
<div><label for="name" id="name-label"></label><input id="name"><div>
<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled"></div>
</section>
<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
Edit style: add Ctrl-S hotkey to save the style
2015-03-01 22:36:21 +00:00
<button id="save-button" title="Ctrl-S"></button>
Unix line endings
2015-02-09 03:32:06 +00:00
<a href="manage.html"><button id="cancel-button"></button></a>
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
<div id="options">
<h2 id="options-heading"></h2>
Add editor options (1) Add UI controls for `keyMap`, `tabSize`, `indentWithTabs`, and `lineWrapping`; `indentUnit` tracks `tabSize`. (2) Dispatch `change` events from `loadPrefs` to initialize CM options from the controls' event listener. (3) Move stock options from the `CM.fromTextArea` call into `CM.defaults`. Add `CM.setOption` method, analogous to the instance method, which updates `CM.defaults` and sets the option in all instances; add `CM.getOption` which simply returns `CM.defaults[option]`. (4) Move the new editor functions into `CM.commands` and replace the functions with commands.
2015-03-08 06:21:43 +00:00
<table cols="2">
<tr>
<td colspan="2">
<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
<label id="lineWrapping-label" for="editor.lineWrapping"></label>
</td>
</tr>
<tr>
<td colspan="2">
<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
<label id="smartIndent-label" for="editor.smartIndent"></label>
</td>
</tr>
<tr>
<td colspan="2">
<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
</td>
</tr>
<tr>
<td><label id="tabSize-label" for="editor.tabSize"></label></td>
<td><input data-option="tabSize" id="editor.tabSize" type="number" min="0"></td>
</tr>
<tr>
<td><label id="keyMap-label" for="editor.keyMap"></label></td>
<td><select data-option="keyMap" id="editor.keyMap"></select></td>
</tr>
</table>
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
</div>
Unix line endings
2015-02-09 03:32:06 +00:00
</div>
<section id="sections">
<h2><span id="sections-heading"></span> <img id="sections-help" src="help.png"></h2>
</section>
<script src="edit.js"></script>
</body>
</html>
Reference in New Issue Copy Permalink