UI for file stuff.

2019-09-15 16:34:40 +02:00
parent bb2ccf6f4b
commit 5fe56eaae8
35 changed files with 875 additions and 68 deletions
@@ -0,0 +1,19 @@
+module.exports = class {
+  onCreate(input) {
+    this.state = {
+      isImage: (input.file && input.file.mimeType.startsWith("image/"))
+    }
+  }
+
+  onInput(input) {
+    this.state.isImage = (input.file && input.file.mimeType.startsWith("image/"))
+  }
+
+  open() {
+
+  }
+
+  close() {
+    this.emit("close")
+  }
+}
@@ -0,0 +1,36 @@
+<modal class="modal color-text nolabel link-file-modal" key="modal" enabled=(input.enabled) closable on-close("close") on-open("open") >
+  <h1>Links for ${input.file.name}</h1>
+
+  <p>
+    Below are links and copy-pastable syntax for sharing the file. They can be used for linking to it
+    in your stories and wiki pages.
+  </p>
+
+  <p class="color-danger">
+    This is the link to the actual file on the CDN, not a share of it. You must delete the file if you want
+    to un-share it.
+  </p>
+
+  <if(state.isImage)>
+    <p class="color-danger">
+      Images uploaded here cannot be inlined on the wiki. For that you have to upload it there.
+    </p>
+  </if>
+  
+  <label>URL</label>
+  <input key="url" disabled placeholder="(None)" on-change("change", "eventName") value=input.file.url />
+  
+  <label>Markdown link</label>
+  <input key="mdLink" disabled placeholder="(None)" on-change("change", "locationName") value=`[Link text](${input.file.url})` />
+  
+  <label>Wiki link</label>
+  <input key="wikiLink" disabled placeholder="(None)" on-change("change", "locationName") value=`[${input.file.url} Link text]` />
+
+  <if(state.isImage)>
+    <label>Markdown image</label>
+    <input key="mdImage" disabled placeholder="(None)" on-change("change", "locationName") value=`![Alt. text](${input.file.url})` />
+
+    <label>Image Preview</label>
+    <img src=input.file.url alt="File preview"/>
+  </if>
+</modal>
@@ -0,0 +1,19 @@
+div.link-file-modal {
+  user-select: text;
+
+  p {
+    user-select: text;
+    cursor: text;
+  }
+
+  img {
+    margin: 0;
+    padding: 0;
+    margin-top: 0.25em;
+    width: 100%;
+  }
+
+  input {
+    user-select: all !important;
+  }
+}