diff --git a/apps/welcome.json b/apps/welcome.json index e42bef77..82868551 100644 --- a/apps/welcome.json +++ b/apps/welcome.json @@ -1,5 +1,5 @@ { "type": "tildefriends-app", "emoji": "👋", - "previous": "&wAb7J6E35xEXpiXsQ6t1RaWTGIvlatUnyH8ipF6pVic=.sha256" + "previous": "&1o8MrBHfH42NnO+ruajwCmW/DUCb+IT1qtnAZI/agyo=.sha256" } diff --git a/apps/welcome/index.html b/apps/welcome/index.html index 4bc0e0c9..d0aeea35 100644 --- a/apps/welcome/index.html +++ b/apps/welcome/index.html @@ -45,6 +45,11 @@

+ 🦀 Try It Try It - Development Documentation + Blog

Get it on Google Play (Open Testing) + + + Get it on iOS (TestFlight) +

@@ -222,9 +234,9 @@

Built the Old Fashioned Way

- Tilde Friends strives to use only simple and widely adopted dependencies - in order to keep it easy to build for all sorts of platforms and - maintainable for a very long time. + Tilde Friends strives to use only simple and widely adopted + dependencies in order to keep it easy to build for all sorts of + platforms and maintainable for a very long time.

Though of course for building Tilde Friends apps, you are free to use diff --git a/apps/welcome/ios.svg b/apps/welcome/ios.svg new file mode 100644 index 00000000..82b0cddc --- /dev/null +++ b/apps/welcome/ios.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/apps/welcome/tildefriends.png b/apps/welcome/tildefriends.png index 94e167f7..c20e354b 100644 Binary files a/apps/welcome/tildefriends.png and b/apps/welcome/tildefriends.png differ diff --git a/apps/welcome/w3.css b/apps/welcome/w3.css index 41b35b99..fd89e8dc 100644 --- a/apps/welcome/w3.css +++ b/apps/welcome/w3.css @@ -1,4 +1,4 @@ -/* W3.CSS 5.01 March 14 2025 by Jan Egil and Borge Refsnes */ +/* W3.CSS 4.15 December 2020 by Jan Egil and Borge Refsnes */ html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit} /* Extract from normalize.css by Nicolas Gallagher and Jonathan Neal git.io/normalize */ html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0} @@ -108,10 +108,6 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0} .w3-round-small{border-radius:2px}.w3-round,.w3-round-medium{border-radius:4px}.w3-round-large{border-radius:8px}.w3-round-xlarge{border-radius:16px}.w3-round-xxlarge{border-radius:32px} .w3-row-padding,.w3-row-padding>.w3-half,.w3-row-padding>.w3-third,.w3-row-padding>.w3-twothird,.w3-row-padding>.w3-threequarter,.w3-row-padding>.w3-quarter,.w3-row-padding>.w3-col{padding:0 8px} .w3-container,.w3-panel{padding:0.01em 16px}.w3-panel{margin-top:16px;margin-bottom:16px} - -.w3-grid{display:grid}.w3-grid-padding{display:grid;gap:16px}.w3-flex{display:flex} -.w3-text-center{text-align:center}.w3-text-bold,.w3-bold{font-weight:bold}.w3-text-italic,.w3-italic{font-style:italic} - .w3-code,.w3-codespan{font-family:Consolas,"courier new";font-size:16px} .w3-code{width:auto;background-color:#fff;padding:8px 12px;border-left:4px solid #4CAF50;word-wrap:break-word} .w3-codespan{color:crimson;background-color:#f1f1f1;padding-left:4px;padding-right:4px;font-size:110%} @@ -153,9 +149,9 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0} .w3-transparent,.w3-hover-none:hover{background-color:transparent!important} .w3-hover-none:hover{box-shadow:none!important} /* Colors */ -.w3-amber,.w3-hover-amber:hover,.w3-warning{color:#000!important;background-color:#ffc107!important} +.w3-amber,.w3-hover-amber:hover{color:#000!important;background-color:#ffc107!important} .w3-aqua,.w3-hover-aqua:hover{color:#000!important;background-color:#00ffff!important} -.w3-blue,.w3-hover-blue:hover,.w3-info,.w3-primary{color:#fff!important;background-color:#2196F3!important} +.w3-blue,.w3-hover-blue:hover{color:#fff!important;background-color:#2196F3!important} .w3-light-blue,.w3-hover-light-blue:hover{color:#000!important;background-color:#87CEEB!important} .w3-brown,.w3-hover-brown:hover{color:#fff!important;background-color:#795548!important} .w3-cyan,.w3-hover-cyan:hover{color:#000!important;background-color:#00bcd4!important} @@ -170,24 +166,15 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0} .w3-pink,.w3-hover-pink:hover{color:#fff!important;background-color:#e91e63!important} .w3-purple,.w3-hover-purple:hover{color:#fff!important;background-color:#9c27b0!important} .w3-deep-purple,.w3-hover-deep-purple:hover{color:#fff!important;background-color:#673ab7!important} -.w3-red,.w3-hover-red:hover,.w3-danger{color:#fff!important;background-color:#f44336!important} +.w3-red,.w3-hover-red:hover{color:#fff!important;background-color:#f44336!important} .w3-sand,.w3-hover-sand:hover{color:#000!important;background-color:#fdf5e6!important} .w3-teal,.w3-hover-teal:hover{color:#fff!important;background-color:#009688!important} -.w3-yellow,.w3-hover-yellow:hover,.w3-note{color:#000!important;background-color:#ffeb3b!important} +.w3-yellow,.w3-hover-yellow:hover{color:#000!important;background-color:#ffeb3b!important} .w3-white,.w3-hover-white:hover{color:#000!important;background-color:#fff!important} .w3-black,.w3-hover-black:hover{color:#fff!important;background-color:#000!important} - -.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover,.w3-secondary{color:#000!important;background-color:#9e9e9e!important} +.w3-grey,.w3-hover-grey:hover,.w3-gray,.w3-hover-gray:hover{color:#000!important;background-color:#9e9e9e!important} .w3-light-grey,.w3-hover-light-grey:hover,.w3-light-gray,.w3-hover-light-gray:hover{color:#000!important;background-color:#f1f1f1!important} .w3-dark-grey,.w3-hover-dark-grey:hover,.w3-dark-gray,.w3-hover-dark-gray:hover{color:#fff!important;background-color:#616161!important} - -.w3-asphalt,.w3-hover-asphalt:hover{color:#fff!important;background-color:#343a40!important}.w3-crimson,.w3-hover-crimson:hover{color:#fff!important;background-color:#a20025!important} -.w3-cobalt,w3-hover-cobalt:hover{color:#fff!important;background-color:#0050ef!important} -.w3-emerald,.w3-hover-emerald:hover,.w3-success{color:#fff!important;background-color:#008a00!important} -.w3-olive,.w3-hover-olive:hover{color:#fff!important;background-color:#6d8764!important} -.w3-paper,.w3-hover-paper:hover{color:#000!important;background-color:#f8f9fa!important}.w3-sienna,.w3-hover-sienna:hover{color:#fff!important;background-color:#a0522d!important} -.w3-taupe,.w3-hover-taupe:hover{color:#fff!important;background-color:#87794e!important} - .w3-pale-red,.w3-hover-pale-red:hover{color:#000!important;background-color:#ffdddd!important} .w3-pale-green,.w3-hover-pale-green:hover{color:#000!important;background-color:#ddffdd!important} .w3-pale-yellow,.w3-hover-pale-yellow:hover{color:#000!important;background-color:#ffffcc!important} @@ -245,4 +232,4 @@ hr{border:0;border-top:1px solid #eee;margin:20px 0} .w3-border-light-grey,.w3-hover-border-light-grey:hover,.w3-border-light-gray,.w3-hover-border-light-gray:hover{border-color:#f1f1f1!important} .w3-border-dark-grey,.w3-hover-border-dark-grey:hover,.w3-border-dark-gray,.w3-hover-border-dark-gray:hover{border-color:#616161!important} .w3-border-pale-red,.w3-hover-border-pale-red:hover{border-color:#ffe7e7!important}.w3-border-pale-green,.w3-hover-border-pale-green:hover{border-color:#e7ffe7!important} -.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important} +.w3-border-pale-yellow,.w3-hover-border-pale-yellow:hover{border-color:#ffffcc!important}.w3-border-pale-blue,.w3-hover-border-pale-blue:hover{border-color:#e7ffff!important} \ No newline at end of file diff --git a/core/client.js b/core/client.js index 0ca53684..62acaf76 100644 --- a/core/client.js +++ b/core/client.js @@ -411,6 +411,7 @@ class TfFilesElement extends LitElement { current: {type: String}, files: {type: Object}, dropping: {type: Number}, + drop_target: {type: String}, }; } @@ -449,6 +450,9 @@ class TfFilesElement extends LitElement { if (!this.files[file].clean) { classes.push('dirty'); } + if (this.drop_target == file) { + classes.push('drop'); + } return html`

this.file_click(file)} @@ -465,11 +469,12 @@ class TfFilesElement extends LitElement { event.preventDefault(); event.stopPropagation(); this.dropping = 0; + this.drop_target = undefined; for (let file of event.dataTransfer.files) { let buffer = await file.arrayBuffer(); let text = new TextDecoder('latin1').decode(buffer); gFiles[file.name] = { - doc: new cm6.EditorState.create({ + doc: cm6.EditorState.create({ doc: text, extensions: cm6.extensions, }), @@ -488,6 +493,7 @@ class TfFilesElement extends LitElement { */ drag_enter(event) { this.dropping++; + this.drop_target = event.srcElement.innerText.trim(); event.preventDefault(); } @@ -497,6 +503,13 @@ class TfFilesElement extends LitElement { */ drag_leave(event) { this.dropping--; + if (this.dropping == 0) { + this.drop_target = undefined; + } + } + + drag_over(event) { + event.preventDefault(); } /** @@ -523,6 +536,10 @@ class TfFilesElement extends LitElement { background-color: #2aa198; } + div.file.drop { + border: 4px solid red; + } + div.file.dirty::after { content: '*'; } @@ -531,20 +548,12 @@ class TfFilesElement extends LitElement { @drop=${this.drop} @dragenter=${this.drag_enter} @dragleave=${this.drag_leave} + @dragover=${this.drag_over} > ${Object.keys(this.files) .sort() .map((x) => self.render_file(x))}
-
- Drop File(s) -
`; } }