|
1 | 1 | <script lang="ts"> |
2 | | - const handleTopButtonsClick = (evt: MouseEvent) => { |
| 2 | + const externalLinkClickHandler = (root: HTMLButtonElement, url: string): void => { |
| 3 | + root.classList.add('is-loading') |
| 4 | + root.classList.add('is-primary') |
| 5 | + setTimeout(() => { |
| 6 | + root.classList.remove('is-loading') |
| 7 | + root.classList.remove('is-primary') |
| 8 | + }, 3000) |
| 9 | + window.open(url) |
| 10 | + } |
| 11 | +
|
| 12 | + const handleTopButtonsClick = (evt: MouseEvent): void => { |
3 | 13 | evt.preventDefault() |
4 | 14 | const target = evt.target as HTMLButtonElement |
5 | 15 | const root = target.closest('button') |
6 | 16 | switch (root.dataset.action) { |
7 | | - case 'reportABug': |
8 | | - root.classList.add('is-loading') |
9 | | - setTimeout(() => { |
10 | | - root.classList.remove('is-loading') |
11 | | - }, 3000) |
12 | | - window.open('https://github.com/mistweaverco/bananas/issues/new') |
| 17 | + case 'join': |
| 18 | + break |
| 19 | + case 'host': |
13 | 20 | break |
14 | | - case 'seeTheCode': |
15 | | - root.classList.add('is-loading') |
16 | | - setTimeout(() => { |
17 | | - root.classList.remove('is-loading') |
18 | | - }, 3000) |
19 | | - window.open('https://github.com/mistweaverco/bananas') |
| 21 | + case 'report-a-bug': |
| 22 | + externalLinkClickHandler(root, 'https://github.com/mistweaverco/bananas/issues/new') |
| 23 | + break |
| 24 | + case 'see-the-code': |
| 25 | + externalLinkClickHandler(root, 'https://github.com/mistweaverco/bananas') |
20 | 26 | break |
21 | 27 | default: |
22 | 28 | break |
|
28 | 34 | <div class="navbar-menu p-2"> |
29 | 35 | <div class="navbar-start"> |
30 | 36 | <div class="navbar-item"> |
31 | | - <div class="buttons"></div> |
| 37 | + <div class="buttons"> |
| 38 | + <button |
| 39 | + class="button is-primary is-active" |
| 40 | + data-action="join" |
| 41 | + on:click={handleTopButtonsClick} |
| 42 | + > |
| 43 | + <span class="icon"> |
| 44 | + <i class="fa-solid fa-right-to-bracket"></i> |
| 45 | + </span> |
| 46 | + <strong>Join a session</strong> |
| 47 | + </button> |
| 48 | + <button class="button is-secondary" data-action="host" on:click={handleTopButtonsClick}> |
| 49 | + <span class="icon"> |
| 50 | + <i class="fa-solid fa-earth-africa"></i> |
| 51 | + </span> |
| 52 | + <strong>Host a session</strong> |
| 53 | + </button> |
| 54 | + <button |
| 55 | + class="button is-secondary" |
| 56 | + data-action="settings" |
| 57 | + on:click={handleTopButtonsClick} |
| 58 | + > |
| 59 | + <span class="icon"> |
| 60 | + <i class="fa-solid fa-gear"></i> |
| 61 | + </span> |
| 62 | + <strong>Settings</strong> |
| 63 | + </button> |
| 64 | + </div> |
32 | 65 | </div> |
33 | 66 | </div> |
34 | 67 |
|
|
37 | 70 | <div class="buttons"> |
38 | 71 | <button |
39 | 72 | class="button is-secondary" |
40 | | - data-action="reportABug" |
| 73 | + data-action="report-a-bug" |
41 | 74 | on:click={handleTopButtonsClick} |
42 | 75 | > |
43 | 76 | <span class="icon"> |
|
46 | 79 | <strong>Report a bug</strong> |
47 | 80 | </button> |
48 | 81 | <button |
49 | | - class="button is-primary" |
50 | | - data-action="seeTheCode" |
| 82 | + class="button is-secondary" |
| 83 | + data-action="see-the-code" |
51 | 84 | on:click={handleTopButtonsClick} |
52 | 85 | > |
53 | 86 | <span class="icon"> |
|
60 | 93 | </div> |
61 | 94 | </div> |
62 | 95 | </nav> |
63 | | -<nav class="panel"> |
64 | | - <p class="panel-heading">Dashboard</p> |
65 | | - <p class="panel-tabs"> |
66 | | - <a data-action="Overview"> |
67 | | - <span class="icon"> |
68 | | - <i class="fa-solid fa-chart-bar"></i> |
69 | | - </span> |
70 | | - Start new session |
71 | | - </a> |
72 | | - </p> |
73 | | -</nav> |
|
0 commit comments