-
-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: filter organizations and color updates (#27)
- Loading branch information
1 parent
306541e
commit 5762126
Showing
64 changed files
with
2,380 additions
and
1,195 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| registry=https://registry.npmjs.org/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| { | ||
| "$schema": "https://shadcn-svelte.com/schema.json", | ||
| "style": "default", | ||
| "tailwind": { | ||
| "config": "tailwind.config.js", | ||
| "css": "src/app.css", | ||
| "baseColor": "gray" | ||
| }, | ||
| "aliases": { | ||
| "components": "$lib/components", | ||
| "utils": "$lib/utils" | ||
| }, | ||
| "typescript": true | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,35 +1,58 @@ | ||
| /* Write your global styles here, in PostCSS syntax */ | ||
| @tailwind base; | ||
| [multiple], | ||
| [type='date'], | ||
| [type='datetime-local'], | ||
| [type='email'], | ||
| [type='month'], | ||
| [type='number'], | ||
| [type='password'], | ||
| [type='search'], | ||
| [type='tel'], | ||
| [type='text'], | ||
| [type='time'], | ||
| [type='url'], | ||
| [type='week'], | ||
| select, | ||
| textarea { | ||
| -webkit-appearance: none; | ||
| -moz-appearance: none; | ||
| appearance: none; | ||
| background-color: #fff; | ||
| border-color: #6b7280; | ||
| border-width: 1px; | ||
| border-radius: 0; | ||
| padding-top: 0.5rem; | ||
| padding-right: 0.75rem; | ||
| padding-bottom: 0.5rem; | ||
| padding-left: 0.75rem; | ||
| font-size: 1rem; | ||
| line-height: 1.5rem; | ||
| --tw-shadow: 0 0 #0000; | ||
| outline: none; | ||
| } | ||
| @tailwind components; | ||
| @tailwind utilities; | ||
|
|
||
| @layer base { | ||
| :root { | ||
| --background: 0 0% 100%; | ||
| --foreground: 240 10% 3.9%; | ||
| --card: 0 0% 100%; | ||
| --card-foreground: 240 10% 3.9%; | ||
| --popover: 0 0% 100%; | ||
| --popover-foreground: 240 10% 3.9%; | ||
| --primary: 137.14 62.87% 32.75%; | ||
| --primary-foreground: 0 0% 98%; | ||
| --secondary: 240 4.8% 95.9%; | ||
| --secondary-foreground: 240 5.9% 10%; | ||
| --muted: 240 4.8% 95.9%; | ||
| --muted-foreground: 240 3.8% 46.1%; | ||
| --accent: 240 4.8% 95.9%; | ||
| --accent-foreground: 240 5.9% 10%; | ||
| --destructive: 0 72.22% 50.59%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 240 5.9% 90%; | ||
| --input: 240 5.9% 90%; | ||
| --ring: 240 5.9% 10%; | ||
| --radius: 0.5rem; | ||
| } | ||
| .dark { | ||
| --background: 240 10% 3.9%; | ||
| --foreground: 0 0% 98%; | ||
| --card: 240 10% 3.9%; | ||
| --card-foreground: 0 0% 98%; | ||
| --popover: 240 10% 3.9%; | ||
| --popover-foreground: 0 0% 98%; | ||
| --primary: 131.52 58.58% 33.14%; | ||
| --primary-foreground: 0 0% 98%; | ||
| --secondary: 240 3.7% 15.9%; | ||
| --secondary-foreground: 0 0% 98%; | ||
| --muted: 240 3.7% 15.9%; | ||
| --muted-foreground: 240 5% 64.9%; | ||
| --accent: 240 3.7% 15.9%; | ||
| --accent-foreground: 0 0% 98%; | ||
| --destructive: 0 62.8% 30.6%; | ||
| --destructive-foreground: 0 0% 98%; | ||
| --border: 240 3.7% 15.9%; | ||
| --input: 240 3.7% 15.9%; | ||
| --ring: 240 4.9% 83.9%; | ||
| } | ||
| } | ||
|
|
||
| @layer base { | ||
| * { | ||
| @apply border-border; | ||
| } | ||
| body { | ||
| @apply bg-background text-foreground; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,79 +1,108 @@ | ||
| <script lang="ts"> | ||
| import Toggle from './Toggle.svelte'; | ||
| import { onMount } from 'svelte'; | ||
| import { auth } from '../lib/auth'; | ||
| import Select from './Select.svelte'; | ||
| import { getOrganizations } from '../lib/api'; | ||
| import * as Select from '$lib/components/ui/select'; | ||
| import { Button } from '$lib/components/ui/button'; | ||
| import { Switch } from '$lib/components/ui/switch'; | ||
| import { Label } from '$lib/components/ui/label'; | ||
| export let modalVisible: boolean; | ||
| export let onSaved: () => void; | ||
| let showArchive = $auth.githubSettings.archive; | ||
| let state = $auth.githubSettings.state; | ||
| let type = $auth.githubSettings.type; | ||
| let selectedOrganizations = $auth.githubSettings.organizations || []; | ||
| let organizationOptions: Array<{ value: string; label: string }> = []; | ||
| const changeShowArchive = e => { | ||
| showArchive = e.target.checked; | ||
| const changeShowArchive = (checked: boolean) => { | ||
| showArchive = checked; | ||
| }; | ||
| const onSave = () => { | ||
| $auth.updateGithubSettings({ | ||
| archive: showArchive, | ||
| state, | ||
| type, | ||
| organizations: selectedOrganizations, | ||
| }); | ||
| modalVisible = false; | ||
| onSaved(); | ||
| }; | ||
| const updateSelectedOrganizations = (target: any) => { | ||
| const incoming = target as { value: string; label: string }[]; | ||
| selectedOrganizations = incoming.map(i => i.value); | ||
| }; | ||
| const updateType = (target: any) => (type = target.value); | ||
| const updateState = (target: any) => (state = target.value); | ||
| const typeOptions = [ | ||
| { value: 'review-requested', label: 'Reviews' }, | ||
| { value: 'author', label: 'Created' }, | ||
| { value: 'mentions', label: 'Mentions' }, | ||
| { value: 'assignee', label: 'Assigned' }, | ||
| ]; | ||
| const stateOptions = [ | ||
| { value: 'open', label: 'Open' }, | ||
| { value: 'closed', label: 'Closed' }, | ||
| { value: 'all', label: 'All' }, | ||
| ]; | ||
| onMount(() => { | ||
| if (!$auth.account) return; | ||
| getOrganizations($auth.account).then(orgs => { | ||
| organizationOptions = orgs.map(org => ({ value: org, label: org })); | ||
| }); | ||
| }); | ||
| </script> | ||
|
|
||
| <div class="flex justify-between items-start p-4 rounded-t border-b dark:border-slate-900"> | ||
| <h3 class="text-xl font-semibold text-gray-900 dark:text-white">Filters</h3> | ||
| <button | ||
| type="button" | ||
| class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white" | ||
| on:click={() => (modalVisible = false)} | ||
| > | ||
| <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"> | ||
| <path | ||
| fill-rule="evenodd" | ||
| d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" | ||
| clip-rule="evenodd" | ||
| /> | ||
| </svg> | ||
| <span class="sr-only">Close modal</span> | ||
| </button> | ||
| </div> | ||
| <div class="p-6 space-y-6"> | ||
| <div> | ||
| <Toggle name="archive" checked={showArchive} label="Show archived" on:change={changeShowArchive} /> | ||
| <Select | ||
| name="type" | ||
| label="Type" | ||
| options={[ | ||
| { value: 'review-requested', label: 'Reviews' }, | ||
| { value: 'author', label: 'Created' }, | ||
| { value: 'mentions', label: 'Mentions' }, | ||
| { value: 'assignee', label: 'Assigned' }, | ||
| ]} | ||
| selected={type} | ||
| onChange={e => (type = e.target.value)} | ||
| /> | ||
| <Select | ||
| name="state" | ||
| label="State" | ||
| options={[ | ||
| { value: 'open', label: 'Open' }, | ||
| { value: 'closed', label: 'Closed' }, | ||
| { value: 'all', label: 'All' }, | ||
| ]} | ||
| selected={state} | ||
| onChange={e => (state = e.target.value)} | ||
| /> | ||
| <div class="space-y-6"> | ||
| <div class="flex flex-col gap-4"> | ||
| <div class="flex items-center space-x-2"> | ||
| <Switch id="archive" name="archive" checked={showArchive} onCheckedChange={changeShowArchive} /> | ||
| <Label for="archive">Show archived</Label> | ||
| </div> | ||
| <div class="flex items-center justify-between gap-4"> | ||
| <Select.Root items={typeOptions} selected={typeOptions.find(v => type)} onSelectedChange={updateType}> | ||
| <Select.Trigger> | ||
| <Select.Value placeholder="Type" /> | ||
| </Select.Trigger> | ||
| <Select.Content> | ||
| {#each typeOptions as { value, label }} | ||
| <Select.Item {value} {label}>{label}</Select.Item> | ||
| {/each} | ||
| </Select.Content> | ||
| </Select.Root> | ||
| <Select.Root items={stateOptions} selected={stateOptions.find(v => state)} onSelectedChange={updateState}> | ||
| <Select.Trigger> | ||
| <Select.Value placeholder="State" /> | ||
| </Select.Trigger> | ||
| <Select.Content> | ||
| {#each stateOptions as { value, label }} | ||
| <Select.Item {value} {label}>{label}</Select.Item> | ||
| {/each} | ||
| </Select.Content> | ||
| </Select.Root> | ||
| </div> | ||
| <Select.Root | ||
| items={organizationOptions} | ||
| selected={selectedOrganizations.map(v => ({ value: v, label: v }))} | ||
| multiple | ||
| onSelectedChange={updateSelectedOrganizations} | ||
| > | ||
| <Select.Trigger class="w-full"> | ||
| <Select.Value placeholder="Organizations" /> | ||
| </Select.Trigger> | ||
| <Select.Content> | ||
| {#each organizationOptions as { value, label }} | ||
| <Select.Item {value} {label}>{label}</Select.Item> | ||
| {/each} | ||
| </Select.Content> | ||
| </Select.Root> | ||
| </div> | ||
| <div class="relative mt-4 flex items-end justify-end"> | ||
| <button | ||
| type="button" | ||
| on:click={onSave} | ||
| class="text-white font-bold bg-blue-600 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 rounded-md text-sm px-4 py-2 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800" | ||
| >Save</button | ||
| > | ||
| <Button type="button" size="sm" on:click={onSave}>Save</Button> | ||
| </div> | ||
| </div> |
Oops, something went wrong.