diff --git a/bottomfloat.js b/bottomfloat.js index 1361981934..d5b35471b9 100644 --- a/bottomfloat.js +++ b/bottomfloat.js @@ -121,10 +121,20 @@ if (isMobile) { bottomWrapper.style.setProperty('--window-height', window.innerHeight + 'px'); - const landscape = window.matchMedia('(orientation: landscape)'); - - landscape.addEventListener('change', () => { + window.addEventListener('resize', () => { + + // if the window's height changed + if (window.innerHeight != bottomWrapper.prevWindowHeight) { + + bottomWrapper.prevWindowHeight = window.innerHeight; + + } else { + + return; + + } + // update bottom float bottomWrapper.style.setProperty('--window-height', window.innerHeight + 'px'); window.setTimeout(() => { diff --git a/dark-theme.css b/dark-theme.css index 03e85395fa..c86b3d23c3 100644 --- a/dark-theme.css +++ b/dark-theme.css @@ -1,365 +1,369 @@ -/* - * Syntax highlighting - * Colors based on Base16 Ocean Dark - */ - -body:not(.mobile) ::-webkit-scrollbar { - width: 16px; - height: 16px; -} - -body:not(.mobile) ::-webkit-scrollbar-track { - background-color: #2B303B; - box-shadow: inset 1px 0 0 0 rgba(0,0,0,0.2); -} - -body:not(.mobile) ::-webkit-scrollbar-track:horizontal { - box-shadow: inset 0 1px 0 0 rgba(0,0,0,0.2); -} - -body:not(.mobile) ::-webkit-scrollbar-corner { - background-color: #2B303B; - box-shadow: inset -15px -15px 0 0 #2B303B, - inset 1px 1px 0 0 rgba(0,0,0,0.2); -} - -body:not(.mobile) ::-webkit-scrollbar-thumb { - border: 10px solid transparent; - border-radius: 50px; - background-clip: padding-box; - border: 4px solid transparent; - border-radius: 8px; - box-shadow: none; - min-height: 50px; - min-width: 50px; - background-color: #5f6368; -} - -body:not(.mobile) ::-webkit-scrollbar-thumb:hover { - background-color: #777c83; -} - -body:not(.mobile) ::-webkit-scrollbar-thumb:active { - background-color: #5f6368; -} - - -.cd-wrapper .autocomplete { - background: hsl(218deg 23% 35%); - color: #a6c3d4; - margin-top: 21px; - margin-left: -3px; - font-family: 'Mono Sans', 'Roboto Mono', consolas, lucida console, courier new, monospace; - line-height: 1.5; - padding: 0; - box-shadow: none; - position: fixed; - z-index: 1000; - border-radius: 8px; - border-radius: 7.5px; - border: 1px solid hsl(219deg 22% 38%); - border: 2.5px solid transparent; - pointer-events: none; - overflow-y: overlay; - min-width: 62px; - /* max-width: 190px; - max-height: 224px; - max-height: 129px; */ - max-height: 140px; - /* box-shadow: 0px 3px 6px 1px hsl(221deg 16% 20%); */ - box-shadow: 0px 3px 6px 1px hsl(221deg 16% 21%); - display: none; -} - -.cd-wrapper .autocomplete.visible { - display: block; -} - -.cd-wrapper .autocomplete .icon { - padding: 2px; - border-radius: 5px; - white-space: nowrap; - overflow-x: overlay; -} - -.cd-wrapper .autocomplete .icon.active { - color: #f9f9f9; - background: hsl(218deg 27% 50%); -} - -body:not(.mobile) .autocomplete::-webkit-scrollbar { - width: 10px; -} - -body:not(.mobile) .autocomplete::-webkit-scrollbar-corner, -body:not(.mobile) .autocomplete::-webkit-scrollbar-track { - background: transparent; - box-shadow: none; - border-radius: 0; -} - -body:not(.mobile) .autocomplete::-webkit-scrollbar-thumb { - background-color: rgb(249 249 249 / 15%); - border-top-width: 5px; - border-bottom-width: 5px; - border-left-width: 5px; - border-right-width: 3px; -} - -.cd-wrapper .top-hit { - position: fixed; - color: #a6c3d4; - font-family: 'Mono Sans', 'Roboto Mono', consolas, lucida console, courier new, monospace; - pointer-events: none; - opacity: .5; -} - -.cd-wrapper .top-hit b { - opacity: 0; -} - - -cd-el { - background: #313744; - color: #a6c3d4; - caret-color: #fff; - - font-family: 'Mono Sans', 'Roboto Mono', consolas, lucida console, courier new, monospace; - - font-size: 14px; - line-height: 1.5; - - -webkit-font-smoothing: antialiased; - border-radius: 0; - display: block; -} - -.token.punctuation, -.token.interpolation, -.token.important, -.token.atrule, -.token.url .token.content, -.token.url-reference .token.variable { - color: #a6c3d4; -} - -.token.doctype .token.punctuation { - color: inherit; -} - -.token.namespace { - opacity: 1; -} - -.token.property, -.language-css .token.variable { - color: #35d4c7; -} - -.token.boolean, -.token.number, -.token.unit, -.token.constant, -.token.symbol, -.token.deleted, -.language-css .token.string { - color: #e5b09f; -} - -.token.char, -.token.url, -.token.builtin, -.token.inserted, -.token.template-string, -.token.regex, -.token.string-property, -.token.variable { - color: #c1ffd5cc; -} - -.token.operator, -.token.entity, -.token.atrule .token.rule, -.language-css .token.function, -.token.interpolation .token.punctuation { - color: hsl(286deg 60% 72% / 93%); - color: #ce8de2; -} - -.token.attr-name, -.token.keyword { - color: #e49199; -} - -.token.function, -.token.class-name, -.token.tag, -.token.selector { - color: #75bfff; -} - -.token.comment, -.token.comment * { - color: hsl(218deg 7% 64% / 72%) !important; -} - -.token.prolog, -.token.doctype, -.token.cdata { - color: hsl(218deg 7% 64% / 72%); -} - -.token.string, -.token.string *, -.token.attr-value, -.token.attr-value *:not(.attr-equals), -.style .token.string { - color: #c1ffd5cc !important; -} - -.token.doctype .token.string, -.token.doctype .token.string * { - color: inherit !important; -} - -.token.italic { - font-style: normal; -} - -.token.entity { - cursor: unset; -} - -.token.url-link, -.token.email-link, -.token.md-link { - color: inherit; - caret-color: #fff; - text-decoration: underline; -} - - -.token.brace.brace-active { - position: relative; - background: rgb(166 195 212 / 12%); - border-radius: 2.5px 2.5px 0 0; - box-shadow: 0 1px 0 0 rgb(166 195 212 / 12%); -} - -.token.brace.brace-active::before, -.token.brace.brace-active::after { - content: ''; - bottom: -2.5px; - left: 0; - width: 50%; - height: 2px; - background: #a6c3d4; - position: absolute; - transform: rotateZ(25deg); - transform-origin: bottom; - pointer-events: none; -} - -.token.brace.brace-active::after { - left: 50%; - transform: rotateZ(-25deg); -} - - -.line-numbers { - position: relative; - padding-left: calc(var(--gutter-length) + env(safe-area-inset-left)); - --gutter-length: calc(1.2em + 30px + env(safe-area-inset-left)); -} - -.line-numbers .line-numbers-rows { - position: sticky; - cursor: default; - left: 0; - user-select: none; - -webkit-user-select: none; - pointer-events: none; - line-height: inherit; - font-size: inherit; - color: #636d83; - background: #313744; - display: block; - text-align: right; - min-width: 1.2em; - white-space: pre; - float: left; - z-index: 1; - margin-right: -100%; - transform: translateX(-100%); - padding-left: calc(13.5px + 0.2px + env(safe-area-inset-left)); - padding-right: 13.5px; -} - -.line-numbers .line-numbers-rows::before { - content: attr(line-numbers); -} - - -span.inline-color-wrapper { - /* - * The background image is the following SVG inline in base 64: - * - * - * - * - * - * - * SVG-inlining explained: - * https://stackoverflow.com/a/21626701/7595472 - */ - background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0iI2NjYyIgZD0iTTAgMGgxdjFIMHpNMSAxaDF2MUgxeiIvPjwvc3ZnPg==); - - height: 12px; - width: 12px; - margin-left: 2px; - margin-right: 4px; - display: inline-block; - user-select: none; - -webkit-user-select: none; - line-height: 10px; - border-radius: 50%; - cursor: pointer; - - transition: 0.3s cubic-bezier(0, 0.88, 0.46, 1.36); - transition: 0.6s cubic-bezier(.165,.84,.44,1); - transition: .4s cubic-bezier(.68,-.55,.265,1.55); - transition: .4s cubic-bezier(0.19,1,0.22,1); - transition: .5s cubic-bezier(0.23, 1, 0.32, 1); - transition: .3s cubic-bezier(.175,.885,.32,1.275); - transition: .3s cubic-bezier(.075,.82,.165,1); - transition: 167ms cubic-bezier(0,0,.2,1); - transition: 0.3s cubic-bezier(0.4, 0, 0.25, 1); -} - -body.platform-mac span.inline-color-wrapper { - cursor: default; -} - -span.inline-color { - width: 100%; - height: 100%; - display: inline-block; - box-sizing: border-box; - border-radius: 50%; - position: relative; -} - -span.inline-color::after { - content: ''; - width: 100%; - height: 100%; - position: absolute; - box-shadow: 0 0 0 1px hsl(221deg 9% 50%), inset 0 0 0 1px #313744; - left: 0; - top: 0; - border-radius: 50%; -} - -span.inline-color-wrapper:hover span.inline-color::after { - box-shadow: 0 0 0 1px hsl(221deg 12% 67%), inset 0 0 0 1px #313744; -} +/* + * Syntax highlighting + * Colors based on Base16 Ocean Dark + */ + +body:not(.mobile) ::-webkit-scrollbar { + width: 16px; + height: 16px; +} + +body:not(.mobile) ::-webkit-scrollbar-track { + background-color: #2B303B; +} + +body:not(.mobile) ::-webkit-scrollbar-corner { + background-color: #2B303B; +} + +body:not(.mobile) ::-webkit-scrollbar-thumb { + border: 10px solid transparent; + border-radius: 50px; + background-clip: padding-box; + border: 4px solid transparent; + border-radius: 8px; + box-shadow: none; + min-height: 50px; + min-width: 50px; + background-color: #5f6368; +} + +body:not(.mobile) ::-webkit-scrollbar-thumb:hover { + background-color: #777c83; +} + +body:not(.mobile) ::-webkit-scrollbar-thumb:active { + background-color: #5f6368; +} + + +.cd-wrapper .autocomplete { + background: hsl(218deg 23% 35%); + color: #a6c3d4; + margin-top: 21px; + margin-left: -3px; + font-family: 'Mono Sans', 'Roboto Mono', consolas, lucida console, courier new, monospace; + line-height: 1.5; + padding: 0; + box-shadow: none; + position: fixed; + z-index: 1000; + border-radius: 8px; + border-radius: 7.5px; + border: 1px solid hsl(219deg 22% 38%); + border: 2.5px solid transparent; + pointer-events: none; + overflow-y: overlay; + min-width: 62px; + /* max-width: 190px; + max-height: 224px; + max-height: 129px; */ + max-height: 140px; + /* box-shadow: 0px 3px 6px 1px hsl(221deg 16% 20%); */ + box-shadow: 0px 3px 6px 1px hsl(221deg 16% 21%); + display: none; +} + +.cd-wrapper .autocomplete.visible { + display: block; +} + +.cd-wrapper .autocomplete .icon { + padding: 2px; + border-radius: 5px; + white-space: nowrap; + overflow-x: overlay; +} + +.cd-wrapper .autocomplete .icon.active { + color: #f9f9f9; + background: hsl(218deg 27% 50%); +} + +body:not(.mobile) .autocomplete::-webkit-scrollbar { + width: 10px; +} + +body:not(.mobile) .autocomplete::-webkit-scrollbar-corner, +body:not(.mobile) .autocomplete::-webkit-scrollbar-track { + background: transparent; + box-shadow: none; + border-radius: 0; +} + +body:not(.mobile) .autocomplete::-webkit-scrollbar-thumb { + background-color: rgb(249 249 249 / 15%); + border-top-width: 5px; + border-bottom-width: 5px; + border-left-width: 5px; + border-right-width: 3px; +} + +.cd-wrapper .top-hit { + position: fixed; + color: #a6c3d4; + font-family: 'Mono Sans', 'Roboto Mono', consolas, lucida console, courier new, monospace; + pointer-events: none; + opacity: .5; +} + +.cd-wrapper .top-hit b { + opacity: 0; +} + + +cd-el { + background: #313744; + color: #a6c3d4; + caret-color: #fff; + + font-family: 'Mono Sans', 'Roboto Mono', consolas, lucida console, courier new, monospace; + + font-size: 14px; + line-height: 1.5; + + -webkit-font-smoothing: antialiased; + border-radius: 0; + display: block; +} + +.token.punctuation, +.token.interpolation, +.token.important, +.token.atrule, +.token.url .token.content, +.token.url-reference .token.variable, +.language-markdown .token.code-block .token.punctuation { + color: #a6c3d4; +} + +.token.doctype .token.punctuation { + color: inherit; +} + +.token.namespace { + opacity: 1; +} + +.token.property, +.language-css .token.variable { + color: #35d4c7; +} + +.token.boolean, +.token.number, +.token.unit, +.token.constant, +.token.symbol, +.token.deleted, +.language-css .token.string { + color: #e5b09f; +} + +.token.char, +.token.url, +.token.builtin, +.token.inserted, +.token.template-string, +.token.regex, +.token.string-property, +.token.variable, +.language-markdown .token.url .token.url { + color: #c1ffd5cc; +} + +.token.operator, +.token.entity, +.token.atrule .token.rule, +.language-css .token.function, +.token.interpolation .token.punctuation { + color: hsl(286deg 60% 72% / 93%); + color: #ce8de2; +} + +.token.attr-name, +.token.keyword { + color: #e49199; +} + +.token.function, +.token.class-name, +.token.tag, +.token.selector { + color: #75bfff; +} + +.token.comment, +.token.comment *, +.token.prolog, +.token.doctype, +.token.cdata { + color: hsl(218deg 7% 64% / 72%) !important; +} + +.language-markdown .token.list, +.language-markdown .token.url:not(.url-reference), +.language-markdown .token.punctuation { + color: hsl(218deg 7% 64% / 72%); +} + +.language-markdown .token.italic .token.punctuation { + font-style: normal; +} + +.language-markdown :is(.token.bold, .token.title) .token.punctuation { + font-weight: normal; +} + +.token.string, +.token.string *, +.token.attr-value, +.token.attr-value *:not(.attr-equals), +.style .token.string { + color: #c1ffd5cc !important; +} + +.token.doctype .token.string, +.token.doctype .token.string * { + color: inherit !important; +} + +.token.entity { + cursor: unset; +} + +.token.url-link, +.token.email-link, +.token.md-link { + color: inherit; + caret-color: #fff; + text-decoration: underline; +} + + +.token.brace.brace-active { + position: relative; + background: rgb(166 195 212 / 12%); + border-radius: 2.5px 2.5px 0 0; + box-shadow: 0 1px 0 0 rgb(166 195 212 / 12%); +} + +.token.brace.brace-active::before, +.token.brace.brace-active::after { + content: ''; + bottom: -2.5px; + left: 0; + width: 50%; + height: 2px; + background: #a6c3d4; + position: absolute; + transform: rotateZ(25deg); + transform-origin: bottom; + pointer-events: none; +} + +.token.brace.brace-active::after { + left: 50%; + transform: rotateZ(-25deg); +} + + +.line-numbers { + position: relative; + padding-left: calc(var(--gutter-length) + env(safe-area-inset-left)); + scroll-padding-left: calc(var(--gutter-length) + env(safe-area-inset-left)); + --gutter-length: calc(1.2em + 30px + env(safe-area-inset-left)); +} + +.line-numbers .line-numbers-rows { + position: sticky; + cursor: default; + left: 0; + user-select: none; + -webkit-user-select: none; + pointer-events: none; + line-height: inherit; + font-size: inherit; + color: #636d83; + background: #313744; + display: block; + text-align: right; + min-width: 1.2em; + white-space: pre; + float: left; + z-index: 1; + margin-right: -100%; + transform: translateX(-100%); + padding-left: calc(13.5px + 0.2px + env(safe-area-inset-left)); + padding-right: 13.5px; +} + +.line-numbers .line-numbers-rows::before { + content: attr(line-numbers); +} + + +span.inline-color-wrapper { + /* + * The background image is the following SVG inline in base 64: + * + * + * + * + * + * + * SVG-inlining explained: + * https://stackoverflow.com/a/21626701/7595472 + */ + background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyIDIiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0wIDBoMnYySDB6Ii8+PHBhdGggZmlsbD0iI2NjYyIgZD0iTTAgMGgxdjFIMHpNMSAxaDF2MUgxeiIvPjwvc3ZnPg==); + + height: 12px; + width: 12px; + margin-left: 2px; + margin-right: 4px; + display: inline-block; + user-select: none; + -webkit-user-select: none; + line-height: 10px; + border-radius: 50%; + cursor: pointer; + + transition: 0.3s cubic-bezier(0, 0.88, 0.46, 1.36); + transition: 0.6s cubic-bezier(.165,.84,.44,1); + transition: .4s cubic-bezier(.68,-.55,.265,1.55); + transition: .4s cubic-bezier(0.19,1,0.22,1); + transition: .5s cubic-bezier(0.23, 1, 0.32, 1); + transition: .3s cubic-bezier(.175,.885,.32,1.275); + transition: .3s cubic-bezier(.075,.82,.165,1); + transition: 167ms cubic-bezier(0,0,.2,1); + transition: 0.3s cubic-bezier(0.4, 0, 0.25, 1); +} + +body.platform-mac span.inline-color-wrapper { + cursor: default; +} + +span.inline-color { + width: 100%; + height: 100%; + display: inline-block; + box-sizing: border-box; + border-radius: 50%; + position: relative; +} + +span.inline-color::after { + content: ''; + width: 100%; + height: 100%; + position: absolute; + box-shadow: 0 0 0 1px hsl(221deg 9% 50%), inset 0 0 0 1px #313744; + left: 0; + top: 0; + border-radius: 50%; +} + +span.inline-color-wrapper:hover span.inline-color::after { + box-shadow: 0 0 0 1px hsl(221deg 12% 67%), inset 0 0 0 1px #313744; +} + diff --git a/filebrowser.js b/filebrowser.js index 4e65ff62e0..f2f64d79de 100644 --- a/filebrowser.js +++ b/filebrowser.js @@ -252,7 +252,14 @@ async function renderSidebarHTML() { // if not logged in if (gitToken == '') { - const dialogResp = await showDialog(openGitHubLogin, 'Hmm... the repo you\'re\nlooking for can\'t be found.\nTry logging in.', 'Login', true); + const dialogResp = await showDialog(async () => { + + await openGitHubLogin(); + + // hide dialog + hideDialog(); + + }, 'Hmm... the repo you\'re\nlooking for can\'t be found.\nTry logging in.', 'Login', true); // if chosen to log in, return if (dialogResp == true) return; @@ -383,7 +390,7 @@ async function renderSidebarHTML() { // stop loading stopLoading(); - showMessage('Whoops, your Git login expired.', 5000); + showMessage('Your Git login expired.', 4000); sidebar.classList.add('intro'); @@ -541,6 +548,7 @@ async function renderSidebarHTML() { if (fileType === 'image') fileIconHTML = imageIcon; if (fileType === 'video') fileIconHTML = videoIcon; if (fileType === 'audio') fileIconHTML = audioIcon; + if (file.name.includes('README')) fileIconHTML = readmeIcon; out += `
@@ -598,6 +606,7 @@ async function renderSidebarHTML() { if (fileType === 'image') fileIconHTML = imageIcon; if (fileType === 'video') fileIconHTML = videoIcon; if (fileType === 'audio') fileIconHTML = audioIcon; + if (file.name.includes('README')) fileIconHTML = readmeIcon; out = `
@@ -998,45 +1007,19 @@ function pushFileWithCommitMessageHTML(fileEl) { } -function openGitHubLogin() { - - const authURL = 'https://github.com/login/oauth/authorize?client_id=7ede3eed3185e59c042d&scope=repo,user,write:org'; - - if (isMobile) { - - window.location.href = authURL; - - } else { - - window.addEventListener('message', (event) => { - - // if received a git code - if (event.origin === window.location.origin && - event.data.startsWith('gitCode=')) { - - // hide dialog - hideDialog(); - - showMessage('Logging in...', -1); - - } - - }); - - // open login window - window.open(authURL, 'Login with GitHub', 'height=575,width=575'); - - } - -} - - async function checkPushDialogs() { // if not logged in to git if (gitToken == '') { - showDialog(openGitHubLogin, 'Login to save this file.', 'Login'); + showDialog(async () => { + + await openGitHubLogin(); + + // hide dialog + hideDialog(); + + }, 'Login to save this file.', 'Login'); return 'return'; @@ -1190,6 +1173,26 @@ async function checkPushDialogs() { if (dialogResult === false) return 'return'; + } else { // if user has push access in repo + + // if pushing a git workflow file, + // request legacy additional permissions + if (getStorage('hasWorkflowPermission') === null && + treeLoc[2] === '/.github/workflows') { + + showDialog(async () => { + + await openGitHubLogin(); + + // hide dialog + hideDialog(); + + }, 'To push this file, request\nGit workflow access.', 'Open'); + + return 'return'; + + } + } } @@ -1995,7 +1998,7 @@ function scrolledSidebarTitle() { } - if (Math.round(sidebarLogo.offsetWidth + sidebarLogo.scrollLeft) + if ((sidebarLogo.offsetWidth + sidebarLogo.scrollLeft + 1) >= sidebarLogo.scrollWidth) { sidebarLogo.classList.add('scrolled-end'); @@ -2200,8 +2203,12 @@ function createNewRepoInHTML() { // toggle lock repoPrivate = lockButton.classList.toggle('locked'); - // focus repo name - repoEl.querySelector('.name').focus(); + // focus repo name and move cursor to end + + const repoName = repoEl.querySelector('.name'); + + const s = window.getSelection(); + s.setBaseAndExtent(repoName.childNodes[0], repoName.childNodes[0].length, repoName.childNodes[0], repoName.childNodes[0].length); }); @@ -2363,7 +2370,12 @@ function createNewRepoInHTML() { } else { // if already adding a new repo, focus it - fileWrapper.querySelector('.item.focused .name').focus(); + + const newRepoName = fileWrapper.querySelector('.item.focused .name'); + + // move cursor to end + const s = window.getSelection(); + s.setBaseAndExtent(newRepoName.childNodes[0], newRepoName.childNodes[0].length, newRepoName.childNodes[0], newRepoName.childNodes[0].length); } @@ -2726,7 +2738,12 @@ function createNewFileInHTML() { } else { // if already adding a new file, focus it - fileWrapper.querySelector('.item.focused .name').focus(); + + const newFileName = fileWrapper.querySelector('.item.focused .name'); + + // move cursor to end + const s = window.getSelection(); + s.setBaseAndExtent(newFileName.childNodes[0], newFileName.childNodes[0].length, newFileName.childNodes[0], newFileName.childNodes[0].length); } @@ -3287,7 +3304,10 @@ function setupEditor() { if (shownMessages.save < 2) { // show message - showMessage('We autosave :D'); + showMessage({ + icon: '', + message: 'There\'s autosave' + }); // bump counter shownMessages.save++; @@ -3299,7 +3319,7 @@ function setupEditor() { } - let beautifierOptions = { + let formatterOptions = { "indent_size": "2", "indent_char": " ", "max_preserve_newlines": "5", @@ -3319,7 +3339,7 @@ function setupEditor() { "indent_empty_lines": false }; - // beautify on Ctrl/Cmd + D + // format on Ctrl/Cmd + D if ((e.key === 'd' || e.keyCode === 68) && isKeyEventMeta(e)) { @@ -3343,36 +3363,36 @@ function setupEditor() { if (selLang == 'markup') selLang = 'html'; // find syntax for language - const beautifyLang = beautifier[selLang]; + const formatSyntax = beautifier[selLang]; // if syntax exists - if (beautifyLang) { + if (formatSyntax) { - // beautify - beautifierOptions.indent_char = cd.options.tab[0]; - let beautifiedText = beautifyLang(selText, beautifierOptions); + // format + formatterOptions.indent_char = cd.options.tab[0]; + let formattedText = formatSyntax(selText, formatterOptions); - // prevent deleting ending newline when beautifying - if (selText.endsWith('\n') && !beautifiedText.endsWith('\n')) { + // prevent deleting ending newline when formatting + if (selText.endsWith('\n') && !formattedText.endsWith('\n')) { - beautifiedText += '\n'; + formattedText += '\n'; } - // compare current code with new code + // compare current code with formatted code // if the code is different, swap it - if (hashCode(selText) !== hashCode(beautifiedText)) { + if (hashCode(selText) !== hashCode(formattedText)) { // replace selection contents - // with beautified text + // with formatted text cd.deleteCurrentSelection(); - cd.insert(beautifiedText, { moveToEnd: false }); + cd.insert(formattedText, { moveToEnd: false }); // get caret pos in text const pos = cd.getSelection(); // select beautified text - cd.setSelection(pos.start, (pos.start + beautifiedText.length)); + cd.setSelection(pos.start, (pos.start + formattedText.length)); // dispatch type event (simulate typing) cd.dispatchTypeEvent(); @@ -3383,16 +3403,16 @@ function setupEditor() { } else { - if (!shownMessages.beautifySelect) shownMessages.beautifySelect = 0; + if (!shownMessages.formatSelect) shownMessages.formatSelect = 0; // if shown message less than two times - if (shownMessages.beautifySelect < 2) { + if (shownMessages.formatSelect < 2) { - // show beautify select message + // show format select message showMessage('Try selecting some text first.', 4100); // bump counter - shownMessages.beautifySelect++; + shownMessages.formatSelect++; saveShownMessagesLS(); @@ -3421,8 +3441,8 @@ function setupEditor() { // if codeit is active if (document.activeElement === cd) { - if (!isMac) showMessage('Try beautifying with Ctrl + D', 5000); - else showMessage('Try beautifying with ⌘ + D', 5000); + if (!isMac) showMessage('Try formatting with Ctrl + D', 5000); + else showMessage('Try formatting with ⌘ + D', 5000); } diff --git a/full.css b/full.css index efa393df4b..a19afffb3d 100644 --- a/full.css +++ b/full.css @@ -44,7 +44,6 @@ body.notransition .cd-wrapper { body cd-el { width: 100%; height: 100%; - padding: 10px; padding: 10.5px 13.5px; left: 0; font-size: 14px; @@ -168,10 +167,10 @@ body.notransition .bottom-wrapper { .bottom-float .badge { position: absolute; - bottom: 16px; - left: 35px; - width: 8px; - height: 8px; + bottom: 17px; + left: 36px; + width: 7px; + height: 7px; background: var(--rosemary-lighter); border-radius: 50%; box-shadow: 0 0 0 2px #191d25; @@ -298,26 +297,11 @@ body.notransition .bottom-wrapper { margin: -7px; } -.live-buttons .live-button:active { +.live-buttons .live-button:not(.active):active, +.live-buttons .live-button.active { opacity: .5; } -.live-buttons .live-button path { - pointer-events: none; -} - -.live-buttons .live-button.share path.ios { - opacity: 0; -} - -body.safari .live-buttons .live-button.share path { - opacity: 0; -} - -body.safari .live-buttons .live-button.share path.ios { - opacity: 1; -} - .bottom-wrapper.expanded .live-buttons { opacity: 1; pointer-events: auto; @@ -331,15 +315,13 @@ body.safari .live-buttons .live-button.share path.ios { top: 0; right: 0; bottom: 0; - left: -1px; + left: 0; top: 44px; transform: translateY(calc(100% - 28px - 45px - env(safe-area-inset-bottom, 0px))); padding-bottom: env(safe-area-inset-bottom); background: #1a1c24; background: #0e0e0e; color: #d4d5d7; - box-shadow: inset 1px 0 0 0 #ffffff3d; - padding-left: 1px; pointer-events: none; box-sizing: border-box; will-change: transform; @@ -426,8 +408,6 @@ body.loaded:not(.mobile) .live-view { transform: none !important; pointer-events: auto; left: auto; - box-shadow: none; - padding-left: 0; } body.mobile .live-view.file-open { @@ -512,7 +492,6 @@ body.notransition .live-view.file-open { border-radius: 0 500px 500px 0; padding: 7px 10px; border: 3px solid transparent; - border-left-width: 1px; transition: .18s var(--ease-function); transition-property: left, box-shadow; z-index: 999; @@ -567,7 +546,7 @@ body.scroll-enabled .bookmark { } .sidebar-toggle.visible { - left: -1px; + left: -2px; } .sidebar-toggle.visible::after { @@ -587,7 +566,7 @@ body.embed .sidebar-toggle { } body.expanded .sidebar-toggle { - transform: translateX(calc(var(--sidebar-width) - 1px)); + transform: translateX(var(--sidebar-width)); } body.notransition :is(.sidebar-toggle, .sidebar-toggle *) { @@ -713,20 +692,18 @@ body.expanded .sidebar-toggle svg .left { .sidebar { position: fixed; top: 0; - left: calc((var(--sidebar-width) + 1px) * -1); + left: calc(var(--sidebar-width) * -1); height: 100%; background: #1a1c24; color: #d4d5d7; transition: .4s var(--cubic-function) transform; - width: calc(var(--sidebar-width) + 1px); + width: var(--sidebar-width); transform: none; overflow-x: hidden; overflow-y: overlay; overscroll-behavior-y: contain; pointer-events: none; - box-shadow: inset -1px 0 0 0 #ffffff3d; padding-left: env(safe-area-inset-left); - padding-right: 1px; box-sizing: border-box; z-index: 998; } @@ -750,7 +727,7 @@ body.expanded .sidebar-toggle svg .left { } body.expanded .sidebar { - transform: translateX(calc(100% - 1px)); + transform: translateX(100%); pointer-events: auto; } @@ -899,7 +876,7 @@ body:not(.mobile) .sidebar .header .title-screen .title:not(.scrolling, :has(> . padding: 7px 0; font-weight: 600; color: rgba(241,241,242,0.92); - max-width: calc(var(--sidebar-width) - 140px - 16px - 7px - 7px); + max-width: calc(var(--sidebar-width) - 139px - 16px - 7px - 7px); overflow-x: overlay; white-space: nowrap; transition: .18s var(--ease-function); @@ -914,7 +891,7 @@ body:not(.mobile) .sidebar .header .title-screen .title:not(.scrolling, :has(> . width: 28px; height: 20px; background: linear-gradient(270deg, #1a1c24, #1a1c2400); - transition: .18s var(--ease-function) opacity; + transition: .1s var(--ease-function) opacity; pointer-events: none; opacity: 0; z-index: 1; @@ -1128,7 +1105,7 @@ body.mobile .sidebar .header .title .branch-icon.active { } .sidebar .header .search-screen .search-input { - width: calc(var(--sidebar-width) - 103px); + width: calc(var(--sidebar-width) - 102px); white-space: nowrap; line-height: 20px; color: #d4d5d7; @@ -1240,8 +1217,8 @@ body.mobile .sidebar .header .title .branch-icon.active { position: absolute; bottom: 0; left: 15px; - width: 8px; - height: 8px; + width: 7px; + height: 7px; background: var(--rosemary-lighter); border-radius: 50%; box-shadow: 0 0 0 2px #191d24; @@ -1437,7 +1414,7 @@ body.mobile .sidebar .header .title .branch-icon.active { .sidebar .intro { position: absolute; - width: calc(100% - 1px); + width: 100%; height: 100%; display: flex; align-items: center; @@ -1635,10 +1612,11 @@ body.mobile .sidebar .button { line-height: 1.5; margin-top: 4.5px; transform: translateY(-7px); + transform: translate(-1px, -1px); top: 20px; left: 20px; /* right: 20px; */ - padding: 2px; + padding: 3px; min-width: 136px; max-width: 375px; max-height: calc(100vh - 80px - 6px - env(safe-area-inset-bottom, 0px)); @@ -1660,6 +1638,7 @@ body.mobile .sidebar .button { opacity: 1; transition: .18s var(--bounce-function); transition-property: transform, padding, opacity; + transition-property: transform, padding; } body.mobile .menu { @@ -1765,6 +1744,12 @@ body.mobile .menu .icon a { transform: scale(1.35) translateX(-0.1px); } +.menu hr { + border: 0; + border-bottom: 1px solid #f1f1f21c; + margin: 7px 14px; +} + .context-menu { margin-top: -7px; margin-left: -6px; @@ -1783,28 +1768,92 @@ body.mobile .context-menu { display: none; } -.context-menu .icon:not(.push, .discard-changes, .share) { +.context-menu .icon:not(.push, .discard-changes, .share), +.context-menu hr { display: none; } .live-view-menu { - left: 11px; - top: 41px; - z-index: 1001; - margin-top: 7px; - padding: 0; + left: 7px; + top: 44px; + box-shadow: 0 8px 16px rgb(0 0 0 / 24%), inset 0 0 0 1px hsl(228deg 13% 19%); } body:not(.mobile) .live-view-menu { display: none; } -.live-view-menu:not(.visible) { - padding: 2px 2px 2px 0px; +.live-view-menu .icon:active { + background: hsl(228deg 6% 16%); +} + +.live-view-menu .icon.share path.ios { + opacity: 0; +} + +body.safari .live-view-menu .icon.share path { + opacity: 0; } -.live-view-menu:not(.visible) .icon { - padding: 9.5px 13px; +body.safari .live-view-menu .icon.share path.ios { + opacity: 1; +} + + +.sheet { + position: fixed; + bottom: env(safe-area-inset-bottom, 0px); + left: 0; + right: 0; + height: calc(100vh / 2 - 20px + 40px); + bottom: -40px; + background: var(--deep-midnight-blue); + border-radius: 11.5px 11.5px 0 0; + transform: translateY(calc(100% + 40px)); + pointer-events: none; + will-change: transform; + transition: .18s var(--ease-function), + .18s .09s var(--bounce-function) bottom, + .1s var(--ease-function) box-shadow; + z-index: 1001; +} + +.sheet.visible { + transform: translateY(40px); + bottom: 0; + box-shadow: 0 -8px 16px rgb(0 0 0 / 24%); + pointer-events: auto; + transition: .18s var(--ease-function), + .18s .09s var(--bounce-function) bottom, + .1s .17s var(--ease-function) box-shadow; +} + +body:not(.mobile) .sheet { + display: none; +} + +.sheet .header { + display: flex; + align-items: center; + justify-content: space-between; + padding: 15px 20px; + height: 59px; + box-sizing: border-box; +} + +.sheet .header .close { + color: #828689; + background: rgb(255 255 255 / 8%) !important; + /* box-sizing: border-box; */ + padding: 4px; + width: 20px; + height: 20px; + margin: -4px; +} + +.sheet .header .title { + font-weight: 600; + color: #dcddde; } @@ -1821,7 +1870,7 @@ body:not(.mobile) .live-view-menu { .dialog-anim-wrapper { position: fixed; inset: 0; - width: calc(var(--sidebar-width) - 1px); + width: var(--sidebar-width); display: flex; align-items: center; justify-content: center; @@ -1958,7 +2007,7 @@ body:not(.mobile) .dialog .button:not(:active):hover { position: fixed; inset: 0; background: hsl(227deg 11% 16% / 40%); - width: calc(var(--sidebar-width) - 1px); + width: var(--sidebar-width); opacity: 0; transition: .18s var(--bounce-function); z-index: -1; @@ -1992,7 +2041,7 @@ body:not(.mobile) .dialog .button:not(:active):hover { color: #dcddde; font-weight: 500; line-height: 1.5; - padding: 0; + padding: 6px 12px; border-radius: 8px; box-shadow: 0 8px 16px rgb(0 0 0 / 24%); /* left: calc(((100vw - var( --sidebar-width)) / 2) + var(--sidebar-width)); */ @@ -2013,7 +2062,7 @@ body:not(.mobile) .dialog .button:not(:active):hover { .message.animating { color: transparent; border-radius: 8px; - padding: 0; + padding: 6px 12px; transition: none; } diff --git a/full.html b/full.html index 694d494059..c3a2d79c4d 100644 --- a/full.html +++ b/full.html @@ -81,7 +81,7 @@
- +
@@ -229,39 +229,40 @@ - Push + Push with message... -
+
- - - - - + - Rename + Share
-
+
- + - Share + Discard changes
+
- + - New folder with selection + New folder with file
-
+
- + + + + + - Discard changes + Rename
@@ -270,15 +271,17 @@ Delete
-
- - - - Import CodePen -
+
@@ -286,12 +289,12 @@ Console
- + +
+
+
Console
+
diff --git a/git/gitauth.js b/git/gitauth.js index 5651af0a80..d354477ddd 100644 --- a/git/gitauth.js +++ b/git/gitauth.js @@ -58,23 +58,7 @@ window.addEventListener('load', async () => { } - - const authURL = 'https://github.com/login/oauth/authorize?client_id=7ede3eed3185e59c042d&scope=repo,user,write:org'; - - loginButton.addEventListener('click', () => { - - if (isMobile) { - - window.location.href = authURL; - - } else { - - window.open(authURL, 'Login with GitHub', 'height=575,width=575'); - - } - - }) - + loginButton.addEventListener('click', openGitHubLogin); window.addEventListener('message', async (event) => { @@ -91,6 +75,19 @@ window.addEventListener('load', async () => { // show sidebar title sidebarLogo.innerText = 'Repositories'; + // hide branch button + sidebarBranch.classList.remove('visible'); + + sidebarLogo.classList.add('notransition'); + + // scroll to start of title + sidebarLogo.scrollTo(0, 0); + scrolledSidebarTitle(); + + onNextFrame(() => { + sidebarLogo.classList.remove('notransition'); + }); + } // if on safari, refresh header color @@ -108,16 +105,27 @@ window.addEventListener('load', async () => { // start loading startLoading(); - + + // show message + showMessage('Logging in...', -1); + + + // update legacy workflow permission + setStorage('hasWorkflowPermission', 'true'); + + const gitCode = event.data.split('gitCode=')[1]; // get git token from Github await getGithubToken(gitCode); + // clear modified repos modifiedRepos = {}; updateModReposLS(); + + // hide message if (messageEl.textContent === 'Logging in...') { hideMessage(); } @@ -213,6 +221,53 @@ window.addEventListener('load', async () => { }); + +let openGitHubLoginWindow; +let openGitHubLoginListener; + +function openGitHubLogin() { + + return new Promise(resolve => { + + const authURL = 'https://github.com/login/oauth/authorize?client_id=7ede3eed3185e59c042d&scope=repo,user,write:org,workflow'; + + if (isMobile) { + + window.location.href = authURL; + + } else { + + if (openGitHubLoginWindow) { + + openGitHubLoginWindow.close(); + window.removeEventListener('message', openGitHubLoginListener); + + } + + openGitHubLoginListener = window.addEventListener('message', (event) => { + + // if received a git code + if (event.origin === window.location.origin && + event.data.startsWith('gitCode=')) { + + window.removeEventListener('message', openGitHubLoginListener); + + resolve(); + + } + + }); + + // open login window + openGitHubLoginWindow = window.open(authURL, 'Login with GitHub', 'height=575,width=575'); + + } + + }); + +} + + async function getGithubToken(gitCode) { // post through CORS proxy to git with clientId, clientSecret and code diff --git a/live-view/extensions/markdown-dark.css b/live-view/extensions/markdown-dark.css index ccd428f107..8f5d910c3a 100644 --- a/live-view/extensions/markdown-dark.css +++ b/live-view/extensions/markdown-dark.css @@ -179,6 +179,7 @@ body hr { margin: 24px 0; background-color: var(--color-border-default); border: 0; + border-radius: 10px; } body img { @@ -240,7 +241,38 @@ body table tr:nth-child(2n) { body blockquote { padding: 0 1em; color: var(--color-fg-muted); - border-left: 0.25em solid var(--color-border-default); + margin-left: 0; + margin-right: 0; + position: relative; + padding-left: calc(1em + 0.25em); +} + +body blockquote::before { + content: ''; + height: 100%; + width: 0.25em; + background: var(--color-border-default); + position: absolute; + left: 0; + top: 0; + border-radius: 10px; +} + +body dl { + padding: 0; +} + +body dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +body dl dd { + padding: 0 16px; + margin-bottom: 16px; } body cd-el { diff --git a/live-view/extensions/markdown-light-alt.css b/live-view/extensions/markdown-light-alt.css index 1fe723cb00..fa402e9899 100644 --- a/live-view/extensions/markdown-light-alt.css +++ b/live-view/extensions/markdown-light-alt.css @@ -176,6 +176,25 @@ body blockquote { padding: 0 1em; color: var(--color-fg-muted); border-left: 0.25em solid var(--color-border-default); + margin-left: 0; + margin-right: 0; +} + +body dl { + padding: 0; +} + +body dl dt { + padding: 0; + margin-top: 16px; + font-size: 1em; + font-style: italic; + font-weight: 600; +} + +body dl dd { + padding: 0 16px; + margin-bottom: 16px; } body cd-el { diff --git a/live-view/live-view.js b/live-view/live-view.js index b108cad611..65ba6d95d8 100644 --- a/live-view/live-view.js +++ b/live-view/live-view.js @@ -396,14 +396,13 @@ function addBottomSwipeListener() { initialY = currentY; - const clickedOnShare = (e.target === - bottomWrapper.querySelector('.live-button.share')); + const clickedOnOptions = (e.target === liveButtonOptions); // if clicked and bottom float is expanded if (click && bottomWrapper.classList.contains('expanded')) { - // if did not click on share button - if (!clickedOnShare) { + // if did not click on options button + if (!clickedOnOptions) { e.preventDefault(); e.stopPropagation(); @@ -413,22 +412,6 @@ function addBottomSwipeListener() { toggleLiveView(selectedFile); - } else if (active) { - - // if clicked on share button, - // share live view link - - // create a link - const link = createLink({ - dir: treeLoc, - file: selectedFile - }); - - navigator.share({ - title: 'Run ' + treeLoc[0] + '/' + treeLoc[1].split(':')[0] + ' with Codeit', - url: link, - }); - } } else if (click) { // if clicked and bottom float not expanded @@ -558,6 +541,88 @@ function updateLiveViewArrow() { if (isMobile) { addBottomSwipeListener(); + + + // live view mobile menu + + liveButtonOptions.addEventListener('click', () => { + + // share live view link + + // create a link + const link = createLink({ + dir: treeLoc, + file: selectedFile + }); + + navigator.share({ + title: 'Run ' + treeLoc[0] + '/' + treeLoc[1].split(':')[0] + ' with Codeit', + url: link, + }); + + + /* + // if clicked on options button, toggle menu + liveViewMenu.classList.toggle('visible'); + liveButtonOptions.classList.toggle('active'); + */ + + }); + + liveMenuShare.addEventListener('click', () => { + + // share live view link + + // create a link + const link = createLink({ + dir: treeLoc, + file: selectedFile + }); + + navigator.share({ + title: 'Run ' + treeLoc[0] + '/' + treeLoc[1].split(':')[0] + ' with Codeit', + url: link, + }); + + }); + + liveMenuConsole.addEventListener('click', () => { + + // show live view console + consoleSheet.classList.add('visible'); + + }); + + document.addEventListener('touchstart', (e) => { + + // if live view menu is visible + if (liveViewMenu.classList.contains('visible')) { + + if (e.target.parentElement !== liveViewMenu && + e.target.parentElement.parentElement !== liveViewMenu) { + + liveViewMenu.classList.remove('visible'); + liveButtonOptions.classList.remove('active'); + + } + + } + + }); + + liveViewMenu.addEventListener('click', () => { + + liveViewMenu.classList.remove('visible'); + liveButtonOptions.classList.remove('active'); + + }); + + consoleSheetClose.addEventListener('click', () => { + + // hide live view console + consoleSheet.classList.remove('visible'); + + }); } else { diff --git a/utils.js b/utils.js index ab909b9d94..fca056cdee 100644 --- a/utils.js +++ b/utils.js @@ -14,6 +14,8 @@ const body = document.body, floatLogo = sidebarOpen.querySelector('.logo'), pushWrapper = bottomFloat.querySelector('.push-wrapper'), floatDownload = bottomFloat.querySelector('.download'), + + liveButtonOptions = bottomWrapper.querySelector('.live-button.options'), sidebarToggle = document.querySelector('.sidebar-toggle'), liveToggle = document.querySelector('.live-toggle'), @@ -54,6 +56,13 @@ const body = document.body, learnClose = learnWrapper.querySelector('.close'), branchMenu = document.querySelector('.branch-menu'), + + liveViewMenu = document.querySelector('.live-view-menu'), + liveMenuShare = liveViewMenu.querySelector('.share'), + liveMenuConsole = liveViewMenu.querySelector('.console'), + + consoleSheet = document.querySelector('.console-sheet'), + consoleSheetClose = consoleSheet.querySelector('.header .close'), dialogWrapper = document.querySelector('.dialog-wrapper'), dialogTitle = dialogWrapper.querySelector('.title'), @@ -418,8 +427,6 @@ let getFileType = (fileName) => { let fileType = 'other'; - if (fileName === 'README') return 'markdown'; - Object.entries(fileTypes).forEach(type => { if (type[1].includes(extension)) { @@ -927,12 +934,13 @@ axios = { // HTML Icons const repoIcon = ''; -const fileIcon = ' '; -const folderIcon = ' '; +const fileIcon = ' '; +const folderIcon = ' '; const imageIcon = ' '; const videoIcon = ' '; const audioIcon = ' '; +const readmeIcon = ' '; const branchIcon = ''; const moreIcon = ''; diff --git a/worker/client-channel.js b/worker/client-channel.js index bd2b059b25..ca64eda387 100644 --- a/worker/client-channel.js +++ b/worker/client-channel.js @@ -4,7 +4,7 @@ // update worker name when updating worker -const WORKER_NAME = 'codeit-worker-v624'; +const WORKER_NAME = 'codeit-worker-v625'; // internal paths