tauri styling issues, download files

client/src/ui/lib/util.ts

@@ -7,24 +7,32 @@ import type { WebSocketServer } from '../../server/server'
 import type { MapCreation, MapDetail } from '../../server/protocol'
 import * as MapDir from '../../twmap/mapdir'
 import { QuadsLayer } from '../../twmap/quadsLayer'
+import { clearDialog, showInfo } from './dialog'
 
 export type Ctor<T> = new (...args: any[]) => T
 
 export type FormEvent<T> = Event & { currentTarget: EventTarget & T }
 export type FormInputEvent = FormEvent<HTMLInputElement>
 
 export async function download(file: string, name: string) {
-  const resp = await fetch(file)
-  const data = await resp.blob()
-  const url = URL.createObjectURL(data)
-
-  const link = document.createElement('a')
-  link.href = url
-  link.download = name
-
-  document.body.append(link)
-  link.click()
-  link.remove()
+  const id = showInfo(`Downloading '${name}'…`, 'none')
+  try {
+    const resp = await fetch(file)
+    const data = await resp.blob()
+    const url = URL.createObjectURL(data)
+
+    const link = document.createElement('a')
+    link.href = url
+    link.download = name
+
+    document.body.append(link)
+    link.click()
+    link.remove()
+    showInfo(`Downloaded '${name}'.`)
+  }
+  finally {
+    clearDialog(id)
+  }
 }
 
 export async function uploadMap(httpRoot: string, name: string, file: Blob) {

client/src/ui/routes/lobby.svelte

@@ -270,15 +270,15 @@
       <Tile>
         <p>
           Teeworlds Web Editor is a multiplayer map editor for
-          <a href="https://ddnet.org/">DDRaceNetwork</a>
+          <a target="_blank" rel="noreferrer" href="https://ddnet.org/">DDRaceNetwork</a>
           , a flavour of
-          <a href="https://www.teeworlds.com/">Teeworlds</a>
+          <a target="_blank" rel="noreferrer" href="https://www.teeworlds.com/">Teeworlds</a>
           .
         </p>
         <p>
           The project is currently in beta, expect some bugs and missing features! Please report
           your bugs and make suggestions on the
-          <a href="https://github.com/k2d222/twwe/issues">GitHub issues page</a>
+          <a target="_blank" rel="noreferrer" href="https://github.com/k2d222/twwe/issues">GitHub issues page</a>
           . Have fun!
         </p>
       </Tile>

client/styles/style.scss

@@ -75,6 +75,7 @@
     text-overflow: ellipsis;
     overflow: hidden;
     background-color: #f2f2f2;
+    height: 2rem;
 
     outline: 1px solid #aaaaaa;
     outline-offset: -1px;
@@ -760,9 +761,14 @@ nav.hidden .context {
     flex-direction: row;
     gap: 1rem;
 
-    > :nth-child(3) {
+    >.channels {
       flex-grow: 1;
     }
+
+    .buttons {
+      display: flex;
+      gap: 1rem;
+    }
   }
 
   .graph {
@@ -807,14 +813,13 @@ nav.hidden .context {
 
   .channels {
     display: flex;
-    // gap: .5rem;
     align-items: center;
 
     label {
       position: relative;
       display: block;
-      width: 1.5rem;
-      height: 1.5rem;
+      width: 2rem;
+      height: 2rem;
       user-select: none;
 
       &.red span {
@@ -863,7 +868,7 @@ nav.hidden .context {
         position: absolute;
         inset: 0;
         text-align: center;
-        padding: 0.25rem;
+        padding: 0.6rem;
       }
     }
   }

desktop/Cargo.toml

@@ -17,7 +17,7 @@ tauri-build = { version = "1.4.0", features = [] }
 [dependencies]
 serde_json = "1.0"
 serde = { version = "1.0", features = ["derive"] }
-tauri = { version = "1.4.0", features = [] }
+tauri = { version = "1.4.0", features = [ "shell-open", "fs-all"] }
 twwe-server = { path = "../server" }
 tokio = "1.32.0"
 platform-dirs = "0.3.0"

desktop/tauri.conf.json

@@ -11,7 +11,13 @@
   },
   "tauri": {
     "allowlist": {
-      "all": false
+      "all": false,
+      "fs": {
+        "all": true
+      },
+      "shell": {
+        "open": true
+      }
     },
     "bundle": {
       "active": true,
@@ -62,4 +68,4 @@
       }
     ]
   }
-}
+}