Skip to content

Commit 3f658ff

Browse files
kadiryazicikadiryazici
authored
Add checkboxes and bottom bar (#10)
* Add checkboxes and bottom bar * Format code
1 parent 7e5de8e commit 3f658ff

File tree

15 files changed

+591
-80
lines changed

15 files changed

+591
-80
lines changed

‎package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
"@vueuse/core": "^9.12.0",
1717
"compare-versions": "6.0.0-rc.1",
1818
"dayjs": "^1.11.7",
19+
"p-all": "^4.0.0",
1920
"pinia": "^2.0.29",
2021
"redaxios": "^0.5.1",
2122
"tauri-plugin-autostart-api": "github:tauri-apps/tauri-plugin-autostart",
@@ -31,6 +32,7 @@
3132
"@actions/github": "^5.1.1",
3233
"@antfu/eslint-config": "^0.34.1",
3334
"@iconify-json/octicon": "^1.1.30",
35+
"@iconify-json/ph": "^1.1.4",
3436
"@tauri-apps/cli": "^1.2.2",
3537
"@types/node": "^18.7.10",
3638
"@vitejs/plugin-vue": "^4.0.0",

‎pnpm-lock.yaml

Lines changed: 49 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src-tauri/Cargo.lock

Lines changed: 12 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src-tauri/Cargo.toml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
1616
[dependencies]
1717
serde_json = "1.0"
1818
serde = { version = "1.0", features = ["derive"] }
19-
tauri = { version = "1.2.4", features = ["dialog-confirm", "http-request", "icon-ico", "icon-png", "macos-private-api", "notification-all", "process-exit", "shell-open", "system-tray"] }
19+
tauri = { version = "1.2.4", features = ["dialog-confirm", "http-request", "icon-ico", "icon-png", "macos-private-api", "notification-all", "os-all", "process-exit", "shell-open", "system-tray"] }
2020
window-vibrancy = "0.3.2"
2121
tiny_http = "0.12.0"
2222
ascii = "1.1.0"

‎src-tauri/tauri.conf.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
"menuOnLeftClick": false
1818
},
1919
"allowlist": {
20+
"os": {
21+
"all": true
22+
},
2023
"http": {
2124
"request": true,
2225
"scope": ["https://github.com/*", "https://api.github.com/*"]

‎src/api/notifications.ts

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import redaxios from 'redaxios'
22
import type { NotificationReason, NotificationSubject } from '../constants'
3+
import type { AppStorageContext } from '../types'
34
import { createBaseGithubApiHeaders } from '../utils/api'
45
import type { User } from './user'
56

@@ -162,3 +163,9 @@ export function getNotifications({
162163
},
163164
})
164165
}
166+
167+
export function markNotificationAsRead(id: Thread['id'], accessToken: NonNullable<AppStorageContext['accessToken']>) {
168+
return redaxios.patch(`https://api.github.com/notifications/threads/${id}`, null, {
169+
headers: createBaseGithubApiHeaders(accessToken),
170+
})
171+
}

‎src/assets/main.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010
--white-faded: rgb(190, 190, 190);
1111
--white: rgb(255, 255, 255);
1212
--content-bg: rgba(30, 30, 30, .8);
13+
--bottom-bar-bg: rgba(21, 21, 21, 0.2);
1314
--sidebar-bg: rgba(50, 50, 50, .75);
1415
--app-border: rgb(90, 90, 90);
1516
--item-bg: rgba(80, 80, 80, .3);

‎src/components/BottomBar.vue

Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<script setup lang="ts">
2+
import BottomBarItem from './BottomBarItem.vue'
3+
4+
export interface IBottomBarItem {
5+
onSelect: () => void
6+
hotkey: string
7+
text: string
8+
withCommand: boolean
9+
}
10+
11+
interface Props {
12+
selectedCount: number
13+
items?: IBottomBarItem[]
14+
}
15+
16+
withDefaults(defineProps<Props>(), {
17+
items: () => [],
18+
})
19+
</script>
20+
21+
<template>
22+
<div class="bottom-bar">
23+
<span class="bottom-bar-count">{{ selectedCount }}</span>
24+
<BottomBarItem
25+
v-for="(item, index) of items"
26+
:key="index"
27+
v-bind="item"
28+
@select="item.onSelect()"
29+
/>
30+
</div>
31+
</template>
32+
33+
<style lang="scss" scoped>
34+
.bottom-bar {
35+
height: 40px;
36+
border-top: 1px solid #2c2c2c;
37+
padding: 5px 10px;
38+
width: 100%;
39+
display: flex;
40+
background-color: var(--bottom-bar-bg);
41+
flex-flow: row nowrap;
42+
justify-content: flex-end;
43+
44+
&-count {
45+
margin-right: auto;
46+
display: inline-flex;
47+
align-items: center;
48+
color: var(--white);
49+
font-weight: bold;
50+
font-size: 12px;
51+
52+
&::before {
53+
content: '';
54+
width: 8px;
55+
height: 8px;
56+
margin-right: 5px;
57+
box-sizing: border-box;
58+
border-radius: 50%;
59+
border: 3px solid transparent;
60+
background-clip: padding-box;
61+
background-color: var(--white);
62+
box-shadow: 0px 0px 0px 1px var(--white);
63+
}
64+
}
65+
66+
> * + * {
67+
margin-left: 5px;
68+
}
69+
70+
}
71+
</style>

‎src/components/BottomBarItem.vue

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,97 @@
1+
<script lang="ts" setup>
2+
import { platform } from '@tauri-apps/api/os'
3+
import { useKey } from '../composables/useKey'
4+
import { Icons } from './Icons'
5+
6+
interface Props {
7+
hotkey: string
8+
text: string
9+
withCommand: boolean
10+
}
11+
12+
interface Emits {
13+
(e: 'select'): void
14+
}
15+
16+
const props = defineProps<Props>()
17+
const emit = defineEmits<Emits>()
18+
19+
const os = await platform()
20+
21+
const shortcut = props.withCommand
22+
? `${os === 'darwin' ? 'command' : 'ctrl'}+${props.hotkey}`
23+
: props.hotkey
24+
25+
const CommandKey = os === 'win32'
26+
? Icons.Command
27+
: () => 'CTRL'
28+
29+
useKey(shortcut, () => {
30+
emit('select')
31+
}, { prevent: true, repeat: false })
32+
</script>
33+
34+
<template>
35+
<div
36+
class="bottom-bar-item"
37+
role="button"
38+
@click="emit('select')"
39+
>
40+
<div class="bottom-bar-item-content">
41+
{{ text }}
42+
</div>
43+
<span
44+
v-if="withCommand"
45+
class="bottom-bar-item-shortcut"
46+
>
47+
<CommandKey />
48+
</span>
49+
<span class="bottom-bar-item-shortcut">
50+
{{ hotkey.toUpperCase() }}
51+
</span>
52+
</div>
53+
</template>
54+
55+
<style lang="scss" scoped>
56+
.bottom-bar-item {
57+
height: 30px;
58+
padding: 5px;
59+
border-radius: 8px;
60+
color: var(--white);
61+
display: inline-flex;
62+
align-items: center;
63+
justify-content: center;
64+
65+
&:hover {
66+
background-color: var(--item-hover-bg);
67+
}
68+
69+
&-content {
70+
margin-right: 5px;
71+
font-size: 12px;
72+
73+
:deep(.icon) {
74+
vertical-align: middle;
75+
font-size: 18px;
76+
}
77+
}
78+
79+
&-shortcut {
80+
+ .bottom-bar-item-shortcut {
81+
margin-left: 2px;
82+
}
83+
font-size: 10px;
84+
min-width: 20px;
85+
display: inline-flex;
86+
height: 100%;
87+
align-items: center;
88+
justify-content: center;
89+
text-align: center;
90+
padding: 0px 3px;
91+
vertical-align: middle;
92+
background-color: var(--item-bg);
93+
border-radius: 6px;
94+
color: var(--white);
95+
}
96+
}
97+
</style>

‎src/components/Icons.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ import MailIcon from 'virtual:icons/octicon/mail-24'
2525
import SignOutIcon16 from 'virtual:icons/octicon/sign-out-16'
2626
import ChevronLeftIcon from 'virtual:icons/octicon/chevron-left'
2727
import DownloadIcon16 from 'virtual:icons/octicon/download-16'
28+
import BellSlashIcon from 'virtual:icons/octicon/bell-slash-24'
29+
30+
import CommandIcon from 'virtual:icons/ph/command'
2831

2932
export type IconComponent = typeof Icons[keyof typeof Icons]
3033

@@ -54,4 +57,6 @@ export const Icons = {
5457
Sync16: markRaw(SyncIcon16),
5558
ChevronLeft: markRaw(ChevronLeftIcon),
5659
Download16: markRaw(DownloadIcon16),
60+
Command: markRaw(CommandIcon),
61+
BellSlash: markRaw(BellSlashIcon),
5762
}

0 commit comments

Comments
 (0)