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

WIP: refactor editor CSS

Browse Source
This commit is contained in:
eight04 2021-12-10 04:44:44 +08:00
parent 3ea7e45624
commit 6e1bc133f0
4 changed files with 152 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
edit.html
View File

@ -418,7 +418,7 @@
<summary><h2 i18n-text="sections"></h2></summary> <summary><h2 i18n-text="sections"></h2></summary>
<ol id="toc"></ol> <ol id="toc"></ol>
</details> </details>
<details id="lint" data-pref="editor.lint.expanded" class="hidden-unless-compact ignore-pref-if-compact"> <details id="lint" data-pref="editor.lint.expanded" class="ignore-pref-if-compact">
<summary> <summary>
<h2 i18n-text="linterIssues">: <span id="issue-count"></span> <h2 i18n-text="linterIssues">: <span id="issue-count"></span>
<a id="lint-help" class="svg-inline-wrapper intercepts-click" tabindex="0"> <a id="lint-help" class="svg-inline-wrapper intercepts-click" tabindex="0">
@ -431,7 +431,7 @@
</div> </div>
</details> </details>
</div> </div>
<div id="footer" class="hidden"> <div id="footer">
<a href="https://github.com/openstyles/stylus/wiki/Usercss" <a href="https://github.com/openstyles/stylus/wiki/Usercss"
i18n-text="externalUsercssDocument" i18n-text="externalUsercssDocument"
target="_blank"></a> target="_blank"></a>

66
edit/base.js
View File

@ -121,41 +121,41 @@ const baseInit = (() => {
//#endregion //#endregion
//#region init layout/resize //#region init layout/resize
baseInit.domReady.then(() => { // baseInit.domReady.then(() => {
let headerHeight; // let headerHeight;
detectLayout(true); // detectLayout(true);
window.on('resize', () => detectLayout()); // window.on('resize', () => detectLayout());
function detectLayout(now) { // function detectLayout(now) {
const compact = window.innerWidth <= 850; // const compact = window.innerWidth <= 850;
if (compact) { // if (compact) {
document.body.classList.add('compact-layout'); // document.body.classList.add('compact-layout');
if (!editor.isUsercss) { // if (!editor.isUsercss) {
if (now) fixedHeader(); // if (now) fixedHeader();
else debounce(fixedHeader, 250); // else debounce(fixedHeader, 250);
window.on('scroll', fixedHeader, {passive: true}); // window.on('scroll', fixedHeader, {passive: true});
} // }
} else { // } else {
document.body.classList.remove('compact-layout', 'fixed-header'); // document.body.classList.remove('compact-layout', 'fixed-header');
window.off('scroll', fixedHeader); // window.off('scroll', fixedHeader);
} // }
for (const el of $$('details[data-pref]')) { // for (const el of $$('details[data-pref]')) {
el.open = compact ? false : prefs.get(el.dataset.pref); // el.open = compact ? false : prefs.get(el.dataset.pref);
} // }
} // }
function fixedHeader() { // function fixedHeader() {
const headerFixed = $('.fixed-header'); // const headerFixed = $('.fixed-header');
if (!headerFixed) headerHeight = $('#header').clientHeight; // if (!headerFixed) headerHeight = $('#header').clientHeight;
const scrollPoint = headerHeight - 43; // const scrollPoint = headerHeight - 43;
if (window.scrollY >= scrollPoint && !headerFixed) { // if (window.scrollY >= scrollPoint && !headerFixed) {
$('body').style.setProperty('--fixed-padding', ` ${headerHeight}px`); // $('body').style.setProperty('--fixed-padding', ` ${headerHeight}px`);
$('body').classList.add('fixed-header'); // $('body').classList.add('fixed-header');
} else if (window.scrollY < scrollPoint && headerFixed) { // } else if (window.scrollY < scrollPoint && headerFixed) {
$('body').classList.remove('fixed-header'); // $('body').classList.remove('fixed-header');
} // }
} // }
}); // });
//#endregion //#endregion
//#region init header //#region init header

206
edit/edit.css
View File

@ -77,16 +77,16 @@ html:not(.is-new-style) #heading::after {
.options-column > div[class="option"] { .options-column > div[class="option"] {
margin-bottom: 4px; margin-bottom: 4px;
} }
.options-column > .usercss-only { .options-column > .usercss-only {
margin-bottom: .75rem; margin-bottom: .75rem;
} }
label { label {
padding-left: 16px; padding-left: 16px;
position: relative; position: relative;
} }
input[type="checkbox"] {
vertical-align: middle;
}
/************ header ************/ /************ header ************/
#header { #header {
width: 280px; width: 280px;
@ -380,6 +380,9 @@ input:invalid {
vertical-align: middle; vertical-align: middle;
} }
/* footer */ /* footer */
#footer {
display: none;
}
.usercss #footer { .usercss #footer {
display: block; display: block;
margin-top: 1em; margin-top: 1em;
@ -1037,97 +1040,103 @@ body.linter-disabled .hidden-unless-compact {
/************ reponsive layouts ************/ /************ reponsive layouts ************/
@media(max-width: 850px) { @media(max-width: 850px) {
body { body {
display: flex; height: auto;
flex-direction: column;
} }
#header { #header {
flex: 0 1 auto; display: contents;
height: unset; position: static;
width: unset;
position: inherit;
border-right: none;
border-bottom: 1px dashed #AAA;
padding: .5rem 1rem .5rem .5rem;
}
.fixed-header {
--fixed-height: 40px;
padding-top: var(--fixed-padding);
}
.fixed-header #header {
min-height: var(--fixed-height);
position: fixed;
top: 0;
left: 0;
right: 0;
padding: 0;
background-color: #fff;
}
.fixed-header #header > *:not(#details-wrapper),
.fixed-header #options {
display: none !important;
}
.fixed-header #details-wrapper {
padding-top: calc((var(--fixed-height) - 1.2rem) / 2); /* 1.2 is the normal line height */
}
#header summary + *,
#lint > .lint-scroll-container {
margin-left: 1rem;
padding: .25rem 0 .5rem;
}
#actions {
display: flex;
flex-wrap: wrap;
white-space: nowrap;
margin: 0;
box-sizing: border-box;
}
#header input[type="checkbox"] {
vertical-align: middle;
}
#header details {
margin: 0;
} }
#heading, #heading,
h2 { h2 {
display: none; display: none;
} }
#basic-info { #basic-info {
margin-bottom: .5rem; margin: .5rem;
box-sizing: border-box; box-sizing: border-box;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
} }
#basic-info > *:first-child { #basic-info > :first-child {
flex-grow: 1; flex-grow: 1;
} }
#basic-info > *:not(:last-child) { #basic-info > :not(:last-child) {
margin-right: 0.8rem; margin-right: 0.8rem;
} }
#basic-info #name { #basic-info #name {
flex-grow: 1; flex-grow: 1;
} }
#actions {
margin: .5rem;
display: flex;
gap: .5rem;
align-items: center;
}
#actions a,
#actions div a, /* FIXME: remove a>button */
#actions button {
margin: 0;
}
#actions > div {
display: contents;
}
#details-wrapper {
display: flex;
flex-wrap: wrap;
margin: -0.5rem 0 0;
padding: .5rem .5rem 0;
gap: .5rem;
position: sticky;
top: 0;
background: white;
z-index: 5;
border-bottom: 1px dashed rgb(170, 170, 170);
flex-direction: row;
}
#details-wrapper > details {
margin-bottom: .5rem;
}
#details-wrapper::after {
content: "";
display: block;
height: 48px;
position: absolute;
bottom: -48px;
left: 0;
width: 100%;
box-shadow: 0 3rem 3rem -4.2rem inset;
pointer-events: none;
}
#header details[open] + details[open] {
margin-top: 0;
}
#header details:not(#options) {
max-width: 50%;
}
#header summary {
margin-left: 0;
padding-left: 4px;
}
#header summary h2 {
margin: 0;
padding: 0;
}
#header summary + * {
margin-left: 1rem;
padding: .25rem 0 0;
}
#options-wrapper { #options-wrapper {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
box-sizing: border-box; box-sizing: border-box;
} }
#details-wrapper {
flex-direction: row;
flex-wrap: wrap;
}
#options[open] { #options[open] {
width: 100%; width: 100%;
} }
#sections-list[open] {
max-height: 102px;
}
#sections-list[open] #toc {
max-height: 60px;
overflow-y: auto;
}
#header details:not(#options) {
max-width: 50%;
}
.options-column { .options-column {
flex-grow: 1; flex-grow: 1;
padding-right: .5rem; padding-right: .5rem;
@ -1146,18 +1155,6 @@ body.linter-disabled .hidden-unless-compact {
#options:not([open]) + #lint:not([open]) { #options:not([open]) + #lint:not([open]) {
margin-top: 0; margin-top: 0;
} }
#lint summary {
position: static;
margin-bottom: 0;
}
#header summary {
margin-left: 0;
padding-left: 4px;
}
#header summary h2 {
margin: 0;
padding: 0;
}
.option label { .option label {
margin: 0; margin: 0;
} }
@ -1169,27 +1166,41 @@ body.linter-disabled .hidden-unless-compact {
position: relative; position: relative;
top: 0.2rem; top: 0.2rem;
} }
#sections-list[open] {
max-height: 102px;
}
#sections-list[open] #toc {
max-height: 60px;
overflow-y: auto;
}
#header #lint.hidden {
display: block!important;
}
#header #lint {
margin: 0;
min-height: 0;
}
#header #lint[open] > :not(summary) {
display: none;
}
#lint > .lint-scroll-container { #lint > .lint-scroll-container {
padding-top: 0; padding-top: 0;
margin-right: 0; margin-right: 0;
} }
#lint {
padding: 0;
margin: .5rem 0 0;
}
#lint:not([open]) + #footer { #lint:not([open]) + #footer {
margin: .25em 0 -1em .25em; margin: .25em 0 -1em .25em;
} }
.main { .main {
height: unset !important; height: auto;
padding-left: 0; padding-left: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1; flex: 1;
} }
.tab-bar {
margin-top: var(--fixed-height);
}
#sections > :not(.single-editor) { #sections > :not(.single-editor) {
margin: 0 .5rem; margin: 0 .5rem;
padding: .5rem 0; padding: .5rem 0;
@ -1198,10 +1209,25 @@ body.linter-disabled .hidden-unless-compact {
overflow: hidden; overflow: hidden;
flex: 1; flex: 1;
} }
.usercss #options:not([open]) ~ #lint.hidden ~ #footer,
.usercss #lint:not([open]) + #footer { .usercss body {
margin-top: -.25em; display: flex;
height: 100vh;
flex-direction: column;
} }
.usercss #header {
display: block;
width: auto;
height: auto;
padding: 0;
}
.usercss #details-wrapper::after {
display: none;
}
.usercss #footer {
display: none;
}
#help-popup.big[style="display: block;"], #help-popup.big[style="display: block;"],
#help-popup[style="display: block;"] { #help-popup[style="display: block;"] {
width: max-content; width: max-content;

2
edit/linter-manager.js
View File

@ -315,7 +315,7 @@ linterMan.DEFAULTS = {
function updateCount() { function updateCount() {
const issueCount = Array.from(tables.values()) const issueCount = Array.from(tables.values())
.reduce((sum, table) => sum + table.trs.length, 0); .reduce((sum, table) => sum + table.trs.length, 0);
$('#lint').classList.toggle('hidden-unless-compact', issueCount === 0); $('#lint').classList.toggle('hidden', issueCount === 0);
$('#issue-count').textContent = issueCount; $('#issue-count').textContent = issueCount;
} }