From f6f44950e79041e4f7afe441fc4b850e1030f27a Mon Sep 17 00:00:00 2001 From: Melonai Date: Thu, 17 Jun 2021 00:30:58 +0200 Subject: Share page design --- assets/public/css/app.css | 71 +++++---------------------- assets/src/components/Header.svelte | 18 +++++++ assets/src/components/SharePage.svelte | 50 +++++++++++++++---- assets/src/components/icons/CheckIcon.svelte | 16 ++++++ assets/src/components/icons/CloseIcon.svelte | 16 ++++++ assets/src/components/icons/RookIcon.svelte | 24 +++++++++ assets/src/components/share/DataPicker.svelte | 16 ------ assets/src/components/share/Info.svelte | 64 ++++++++++++++++++++++++ assets/src/components/share/Request.svelte | 57 ++++++++++++++++++--- assets/src/components/share/Requests.svelte | 15 ++++-- assets/src/components/share/Selector.svelte | 20 ++++++++ assets/src/network/channel/connection.ts | 20 +++++--- 12 files changed, 285 insertions(+), 102 deletions(-) create mode 100644 assets/src/components/Header.svelte create mode 100644 assets/src/components/icons/CheckIcon.svelte create mode 100644 assets/src/components/icons/CloseIcon.svelte create mode 100644 assets/src/components/icons/RookIcon.svelte delete mode 100644 assets/src/components/share/DataPicker.svelte create mode 100644 assets/src/components/share/Info.svelte create mode 100644 assets/src/components/share/Selector.svelte (limited to 'assets') diff --git a/assets/public/css/app.css b/assets/public/css/app.css index bb28a94..86f45a0 100644 --- a/assets/public/css/app.css +++ b/assets/public/css/app.css @@ -1,63 +1,16 @@ -html, body { - position: relative; - width: 100%; - height: 100%; +html, +body, +#app { + position: relative; + width: 100%; + height: 100%; + box-sizing: border-box; } body { - color: #333; - margin: 0; - padding: 8px; - box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -a { - color: rgb(0,100,200); - text-decoration: none; -} - -a:hover { - text-decoration: underline; -} - -a:visited { - color: rgb(0,80,160); -} - -label { - display: block; -} - -input, button, select, textarea { - font-family: inherit; - font-size: inherit; - -webkit-padding: 0.4em 0; - padding: 0.4em; - margin: 0 0 0.5em 0; - box-sizing: border-box; - border: 1px solid #ccc; - border-radius: 2px; -} - -input:disabled { - color: #ccc; -} - -button { - color: #333; - background-color: #f4f4f4; - outline: none; -} - -button:disabled { - color: #999; -} - -button:not(:disabled):active { - background-color: #ddd; -} - -button:focus { - border-color: #666; + margin: 0; + font-family: "Poppins", sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + text-rendering: optimizeLegibility; } diff --git a/assets/src/components/Header.svelte b/assets/src/components/Header.svelte new file mode 100644 index 0000000..c956ca9 --- /dev/null +++ b/assets/src/components/Header.svelte @@ -0,0 +1,18 @@ + + +
+ +
+ + diff --git a/assets/src/components/SharePage.svelte b/assets/src/components/SharePage.svelte index d951288..b172f8c 100644 --- a/assets/src/components/SharePage.svelte +++ b/assets/src/components/SharePage.svelte @@ -1,20 +1,52 @@ +
+
-

Sharing

- {#if !$data.locked} - - {:else} - - {/if} + +
+ {#if $data.locked} +

Requests

+ + {/if} +
+ + + + diff --git a/assets/src/components/icons/CheckIcon.svelte b/assets/src/components/icons/CheckIcon.svelte new file mode 100644 index 0000000..d395619 --- /dev/null +++ b/assets/src/components/icons/CheckIcon.svelte @@ -0,0 +1,16 @@ + + + + + + \ No newline at end of file diff --git a/assets/src/components/icons/CloseIcon.svelte b/assets/src/components/icons/CloseIcon.svelte new file mode 100644 index 0000000..a6e6569 --- /dev/null +++ b/assets/src/components/icons/CloseIcon.svelte @@ -0,0 +1,16 @@ + + + + + + diff --git a/assets/src/components/icons/RookIcon.svelte b/assets/src/components/icons/RookIcon.svelte new file mode 100644 index 0000000..61f65d3 --- /dev/null +++ b/assets/src/components/icons/RookIcon.svelte @@ -0,0 +1,24 @@ + + + + + + + diff --git a/assets/src/components/share/DataPicker.svelte b/assets/src/components/share/DataPicker.svelte deleted file mode 100644 index 6e8dbd4..0000000 --- a/assets/src/components/share/DataPicker.svelte +++ /dev/null @@ -1,16 +0,0 @@ - - -
- - -
diff --git a/assets/src/components/share/Info.svelte b/assets/src/components/share/Info.svelte new file mode 100644 index 0000000..2d648ce --- /dev/null +++ b/assets/src/components/share/Info.svelte @@ -0,0 +1,64 @@ + + +
+ {#if !$data.locked} +

What do you want to share?

+ + {:else} +

+ You are
+ sharing a text. +

+ {#if $connection === ConnectionState.CONNECTED} +

+ Your share is available under:
+ rook.rnrd.eu/{getOwnToken()} +

+ +
••••••••••••••••••••••••••••••
+ {:else} +

Connecting to signaling server...

+ {/if} + {/if} +
+ + diff --git a/assets/src/components/share/Request.svelte b/assets/src/components/share/Request.svelte index 17e8443..e34f633 100644 --- a/assets/src/components/share/Request.svelte +++ b/assets/src/components/share/Request.svelte @@ -1,5 +1,7 @@ -
- {token} + +
    - - +
    + +
    +
    + +
    -
+
  • Requested at 14:38
    • +
  • {token}
    • +
  • Trusowo, Russia
    • +
  • Firefox 89
    • + diff --git a/assets/src/components/share/Requests.svelte b/assets/src/components/share/Requests.svelte index 98596c6..f9ef237 100644 --- a/assets/src/components/share/Requests.svelte +++ b/assets/src/components/share/Requests.svelte @@ -1,4 +1,9 @@ + + - {#each $requests as request} - - {/each} -{/await} +{#each $requests as request} + +{/each} + diff --git a/assets/src/components/share/Selector.svelte b/assets/src/components/share/Selector.svelte new file mode 100644 index 0000000..e4c7c07 --- /dev/null +++ b/assets/src/components/share/Selector.svelte @@ -0,0 +1,20 @@ + + +
    + + +
    diff --git a/assets/src/network/channel/connection.ts b/assets/src/network/channel/connection.ts index c7e9012..59e07e8 100644 --- a/assets/src/network/channel/connection.ts +++ b/assets/src/network/channel/connection.ts @@ -1,4 +1,5 @@ import { Channel, Push, Socket } from "phoenix"; +import { get, Readable, writable, Writable } from "svelte/store"; import { Handler, Handlers, @@ -20,7 +21,7 @@ export type Connection = { socket: Socket; channel: Channel | null; token: string | null; - state: ConnectionState; + state: Writable; handlers: Handlers; }; @@ -28,7 +29,7 @@ const connection: Connection = { socket: new Socket("/socket", {}), channel: null, token: null, - state: ConnectionState.CONNECTING_SOCKET, + state: writable(ConnectionState.CONNECTING_SOCKET), handlers: {}, }; @@ -42,7 +43,7 @@ export async function start() { } export function send(event: string, data: any): Push { - if (connection.state !== ConnectionState.CONNECTED) { + if (getState() !== ConnectionState.CONNECTED) { throw new Error("There is no connection yet."); } @@ -71,14 +72,21 @@ export function on( } export function getOwnToken(): string { - if (connection.state <= ConnectionState.FETCHING_TOKEN) { + if (getState() <= ConnectionState.FETCHING_TOKEN) { throw new Error("There is no token yet."); } return connection.token; } +export function getState(): ConnectionState { + return get(connection.state); +} + export function updateState(state: ConnectionState) { - // TODO: Notify state listeners - connection.state = state; + connection.state.set(state); +} + +export function getStateStore(): Readable { + return connection.state; } -- cgit 1.4.1