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

283 lines
7.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 {
HTML fixes: close a tag, replace 0px with 0
2015-03-15 03:35:30 +00:00
margin: 0;
Unix line endings
2015-02-09 03:32:06 +00:00
font: 12px arial,sans-serif;
}
#header {
height: 100%;
width: 250px;
position: fixed;
HTML fixes: close a tag, replace 0px with 0
2015-03-15 03:35:30 +00:00
top: 0;
Unix line endings
2015-02-09 03:32:06 +00:00
padding: 15px;
border-right: 1px dashed #AAA;
HTML fixes: close a tag, replace 0px with 0
2015-03-15 03:35:30 +00:00
-webkit-box-shadow: 0 0 50px -18px black;
Unix line endings
2015-02-09 03:32:06 +00:00
}
#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;
HTML fixes: close a tag, replace 0px with 0
2015-03-15 03:35:30 +00:00
padding: 0 15px;
Unix line endings
2015-02-09 03:32:06 +00:00
}
#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;
}
Editor: de-tablify options, support for responsive layout
2015-03-20 09:28:00 +00:00
#options .aligned {
display: table-row;
}
#options .aligned > * {
display: table-cell;
margin: 0.5ex 0 0 0;
}
Unix line endings
2015-02-09 03:32:06 +00:00
.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;
}
'Specify' should not stretch to full page width #82
2015-03-23 19:38:03 +00:00
.applies-to li > *:not(button) {
Edit style: expand applies-to-URL block to page width
2015-02-28 18:40:05 +00:00
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;
Editor: de-tablify options, support for responsive layout
2015-03-20 09:28:00 +00:00
padding-top: 8px;
}
#header section {
display: inline-block;
margin-bottom: 0.5em;
}
#header label {
width: auto;
vertical-align: baseline;
margin-right: .5em;
}
#header input[type="checkbox"] {
vertical-align: middle;
}
#name {
font-weight: bold;
}
h1, h2 {
display: none;
}
#basic-info > div {
display: inline-block;
margin-right: 1em;
}
#actions br {
display: none;
}
#actions img {
position: relative;
top: .2em;
margin-left: .2em;
}
#actions > * + button, #actions a {
margin-left: 1em;
}
#options {
display: flex;
flex-wrap: wrap;
align-items: baseline;
}
#options .option, #options .option > * {
flex: auto;
height: 1.8em;
margin: 0;
display: inline-block;
white-space: nowrap;
}
#options .option {
margin-right: 1em;
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 {
HTML fixes: close a tag, replace 0px with 0
2015-03-15 03:35:30 +00:00
padding-left: 0;
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 {
HTML fixes: close a tag, replace 0px with 0
2015-03-15 03:35:30 +00:00
padding: 0;
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
#sections-heading {
padding-left: 8px;
}
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 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">
Editor: fixes for 0e391f9, refactor, more fixes * recognize changes in applies-to inputs * recognize changes only in specified controls * forget the dirty applies-to ids from a deleted section after the style was saved * toMozillaFormat: use the actual contents of CodeMirror instances * toMozillaFormat: allow empty code section with non-empty applies-to * refactor: simplify, de-kludge, de-duplicate, de-obfuscate, use more descriptive names instead of "items", "a", "b" where appropriate
2015-03-21 13:24:45 +00:00
<div><label for="name" id="name-label"></label><input id="name" class="style-contributor"></div>
<div><label for="enabled" id="enabled-label"></label><input type="checkbox" id="enabled" class="style-contributor"></div>
Unix line endings
2015-02-09 03:32:06 +00:00
</section>
Editor: de-tablify options, support for responsive layout
2015-03-20 09:28:00 +00:00
<section id="actions">
<button id="to-mozilla"></button><img id="to-mozilla-help" src="help.png"><br><br>
<button id="save-button" title="Ctrl-S"></button>
<a href="manage.html"><button id="cancel-button"></button></a>
</section>
<section id="options">
Add option for smart indentation in editor
2015-02-09 04:02:08 +00:00
<h2 id="options-heading"></h2>
Editor: de-tablify options, support for responsive layout
2015-03-20 09:28:00 +00:00
<div class="option">
<input data-option="lineWrapping" id="editor.lineWrapping" type="checkbox">
<label id="lineWrapping-label" for="editor.lineWrapping"></label>
</div>
<div class="option">
<input data-option="smartIndent" id="editor.smartIndent" type="checkbox">
<label id="smartIndent-label" for="editor.smartIndent"></label>
</div>
<div class="option">
<input data-option="indentWithTabs" id="editor.indentWithTabs" type="checkbox">
<label id="indentWithTabs-label" for="editor.indentWithTabs"></label>
</div>
<div class="option aligned">
<label id="tabSize-label" for="editor.tabSize"></label>
<input data-option="tabSize" id="editor.tabSize" type="number" min="0">
</div>
<div class="option aligned">
<label id="keyMap-label" for="editor.keyMap"></label>
<select data-option="keyMap" id="editor.keyMap"></select>
</div>
</section>
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