Change playground options layout (#3374)
This commit is contained in:
Lucas Duailibe authored and GitHub committed
1 parent
829616dd6c
commit
8bb6e169e2
2 files changed
+123
-95
No files matched your search
@@ -112,6 +112,7 @@
|
||||
.editors-container {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.editors {
|
||||
@@ -163,17 +164,14 @@
|
||||
}
|
||||
|
||||
.bottom-bar-buttons {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
padding: 8px;
|
||||
display: flex;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.bottom-bar-buttons-right {
|
||||
left: auto;
|
||||
right: 0;
|
||||
float: right;
|
||||
}
|
||||
|
||||
.bottom-bar-buttons > * + * {
|
||||
@@ -192,47 +190,51 @@
|
||||
}
|
||||
}
|
||||
|
||||
.options-details {
|
||||
padding: 8px 0;
|
||||
}
|
||||
|
||||
.options-summary {
|
||||
font-size: 1.4em;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.options-container {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: space-around;
|
||||
display: none;
|
||||
box-sizing: border-box;
|
||||
width: 225px;
|
||||
height: 100%;
|
||||
border-bottom: 1px solid #ddd;
|
||||
flex: 0 1 auto;
|
||||
}
|
||||
|
||||
.options-container.open {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.options {
|
||||
flex-flow: column wrap;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 100%;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.sub-options {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
padding: 0 10px;
|
||||
margin: 5px;
|
||||
margin-bottom: 0;
|
||||
min-width: 150px;
|
||||
padding: 15px 0 10px;
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.sub-options:last-child {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.sub-options > summary {
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
|
||||
.sub-options > * {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
label {
|
||||
font-family: "Consolas", "Courier New", Courier, monospace;
|
||||
margin: 0 10px;
|
||||
}
|
||||
|
||||
@media (max-width: 408px) {
|
||||
label {
|
||||
padding: 8px;
|
||||
}
|
||||
.options-container {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
.options.last {
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
margin: 10px 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
input[type="number"] {
|
||||
@@ -318,6 +320,76 @@
|
||||
</header>
|
||||
|
||||
<div class="editors-container">
|
||||
<div id="options-details" class="options-container">
|
||||
<div class="options">
|
||||
<details class="sub-options" open>
|
||||
<summary>Global</summary>
|
||||
|
||||
<label>--parser
|
||||
<select id="parser">
|
||||
<option value="babylon">babylon</option>
|
||||
<option value="flow">flow</option>
|
||||
<option value="typescript">typescript</option>
|
||||
<option value="css">css</option>
|
||||
<option value="less">less</option>
|
||||
<option value="scss">scss</option>
|
||||
<option value="json">json</option>
|
||||
<option value="graphql">graphql</option>
|
||||
<option value="markdown">markdown</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>--print-width <input type="number" value="80" min="0" id="printWidth"></label>
|
||||
<label>--tab-width <input type="number" min="0" value="2" id="tabWidth"></label>
|
||||
<label><input type="checkbox" id="useTabs"> --use-tabs</label>
|
||||
</details>
|
||||
<details class="sub-options" open>
|
||||
<summary>JavaScript</summary>
|
||||
|
||||
<label><input type="checkbox" data-inverted id="semi"> --no-semi</label>
|
||||
<label><input type="checkbox" id="singleQuote"> --single-quote</label>
|
||||
<label><input type="checkbox" data-inverted id="bracketSpacing"> --no-bracket-spacing</label>
|
||||
<label><input type="checkbox" id="jsxBracketSameLine"> --jsx-bracket-same-line</label>
|
||||
<label>--arrow-parens
|
||||
<select id="arrowParens">
|
||||
<option value="avoid">avoid</option>
|
||||
<option value="always">always</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>--trailing-comma
|
||||
<select id="trailingComma">
|
||||
<option value="none">none</option>
|
||||
<option value="es5">es5</option>
|
||||
<option value="all">all</option>
|
||||
</select>
|
||||
</label>
|
||||
</details>
|
||||
<details class="sub-options">
|
||||
<summary>Markdown</summary>
|
||||
|
||||
<label>--prose-wrap
|
||||
<select id="proseWrap">
|
||||
<option value="preserve">preserve</option>
|
||||
<option value="always">always</option>
|
||||
<option value="never">never</option>
|
||||
</select>
|
||||
</label>
|
||||
</details>
|
||||
<details class="sub-options">
|
||||
<summary>Special</summary>
|
||||
|
||||
<label><input type="checkbox" id="insertPragma"> --insert-pragma</label>
|
||||
<label><input type="checkbox" id="requirePragma"> --require-pragma</label>
|
||||
</details>
|
||||
<details class="sub-options">
|
||||
<summary>Debug</summary>
|
||||
|
||||
<label><input type="checkbox" id="ast"> show AST</label>
|
||||
<label><input type="checkbox" id="doc"> show doc</label>
|
||||
<label><input type="checkbox" id="output2"> show second format</label>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="editors">
|
||||
<div class="editor loading input">
|
||||
<textarea id="input-editor"></textarea>
|
||||
@@ -339,70 +411,14 @@
|
||||
|
||||
<div class="bottom-bar">
|
||||
<div class="bottom-bar-buttons">
|
||||
<button type="button" class="btn" id="button-options">
|
||||
Show options
|
||||
</button>
|
||||
<button type="button" class="btn" id="button-clear">
|
||||
Clear
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<details class="options-details">
|
||||
<summary class="options-summary">Options</summary>
|
||||
|
||||
<div class="options-container">
|
||||
<div class="options">
|
||||
<label>--print-width <input type="number" value="80" min="0" id="printWidth"></label>
|
||||
<label>--tab-width <input type="number" min="0" value="2" id="tabWidth"></label>
|
||||
<label>--prose-wrap
|
||||
<select id="proseWrap">
|
||||
<option value="preserve">preserve</option>
|
||||
<option value="always">always</option>
|
||||
<option value="never">never</option>
|
||||
</select>
|
||||
</label>
|
||||
<label><input type="checkbox" id="insertPragma"> --insert-pragma</label>
|
||||
<label><input type="checkbox" id="requirePragma"> --require-pragma</label>
|
||||
</div>
|
||||
<div class="options">
|
||||
<label><input type="checkbox" id="useTabs"> --use-tabs</label>
|
||||
<label><input type="checkbox" data-inverted id="semi"> --no-semi</label>
|
||||
<label><input type="checkbox" id="singleQuote"> --single-quote</label>
|
||||
<label><input type="checkbox" data-inverted id="bracketSpacing"> --no-bracket-spacing</label>
|
||||
<label><input type="checkbox" id="jsxBracketSameLine"> --jsx-bracket-same-line</label>
|
||||
</div>
|
||||
<div class="options last">
|
||||
<label>--arrow-parens
|
||||
<select id="arrowParens">
|
||||
<option value="avoid">avoid</option>
|
||||
<option value="always">always</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>--trailing-comma
|
||||
<select id="trailingComma">
|
||||
<option value="none">none</option>
|
||||
<option value="es5">es5</option>
|
||||
<option value="all">all</option>
|
||||
</select>
|
||||
</label>
|
||||
<label>--parser
|
||||
<select id="parser">
|
||||
<option value="babylon">babylon</option>
|
||||
<option value="flow">flow</option>
|
||||
<option value="typescript">typescript</option>
|
||||
<option value="css">css</option>
|
||||
<option value="less">less</option>
|
||||
<option value="scss">scss</option>
|
||||
<option value="json">json</option>
|
||||
<option value="graphql">graphql</option>
|
||||
<option value="markdown">markdown</option>
|
||||
</select>
|
||||
</label>
|
||||
<span style="flex: 0.3"></span>
|
||||
<label><input type="checkbox" id="ast"> show AST (debug)</label>
|
||||
<label><input type="checkbox" id="doc"> show doc (debug)</label>
|
||||
<label><input type="checkbox" id="output2"> show second format (debug)</label>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
<div class="bottom-bar-buttons bottom-bar-buttons-right">
|
||||
<button type="button" class="btn" id="button-copy-link">
|
||||
Copy link
|
||||
|
||||
@@ -161,6 +161,18 @@ window.onload = function() {
|
||||
inputEditor.setValue("");
|
||||
};
|
||||
|
||||
var optionsElement = document.getElementById("options-details");
|
||||
document.getElementById("button-options").onclick = function() {
|
||||
var classes = optionsElement.classList;
|
||||
if (classes.contains("open")) {
|
||||
classes.remove("open");
|
||||
this.innerHTML = "Show options";
|
||||
} else {
|
||||
classes.add("open");
|
||||
this.innerHTML = "Hide options";
|
||||
}
|
||||
};
|
||||
|
||||
var clipboard = new Clipboard("#button-copy-link, #button-copy-markdown", {
|
||||
text: function(trigger) {
|
||||
switch (trigger.id) {
|
||||
|
||||
Reference in new issue
Block a user