-
Notifications
You must be signed in to change notification settings - Fork 3.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'unified-desktop-gui' into feat/settings-footer
- Loading branch information
Showing
26 changed files
with
820 additions
and
56 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,9 @@ | ||
| import KeyboardBindingsModal from './KeyboardBindingsModal.vue' | ||
|
|
||
| describe('SidebarNavigationRow', () => { | ||
| it('renders something', () => { | ||
| cy.mount(() => { | ||
| return <KeyboardBindingsModal show /> | ||
| }) | ||
| }) | ||
| }) |
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,65 @@ | ||
| <template> | ||
| <StandardModal | ||
| class="transition duration-200 transition-all" | ||
| :click-outside="false" | ||
| variant="bare" | ||
| :title="t('sideBar.keyboardShortcuts.title')" | ||
| :model-value="show" | ||
| data-cy="switch-modal" | ||
| help-link="" | ||
| @update:model-value="emits('close')" | ||
| > | ||
| <ul class="m-24px w-384px"> | ||
| <li | ||
| v-for="binding in keyBindings" | ||
| :key="binding.key.join('-')" | ||
| class="flex items-center h-24px my-16px" | ||
| > | ||
| <p class="flex-grow text-gray-700 text-16px leading-24px"> | ||
| {{ binding.description }} | ||
| </p> | ||
| <span | ||
| v-for="key in binding.key" | ||
| :key="key" | ||
| class="inline-block rounded-sm border border-gray-100 bg-gray-50 h-24px w-24px text-indigo-500 text-14px leading-20px text-center ml-8px" | ||
| > | ||
| {{ key }} | ||
| </span> | ||
| </li> | ||
| </ul> | ||
| </StandardModal> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import StandardModal from '@cy/components/StandardModal.vue' | ||
| import { useI18n } from '@cy/i18n' | ||
| const { t } = useI18n() | ||
| defineProps<{ | ||
| show: boolean | ||
| }>() | ||
| const emits = defineEmits<{ | ||
| (eventName: 'close'): void | ||
| }>() | ||
| const keyBindings = [ | ||
| { | ||
| key: ['r'], | ||
| description: t('sideBar.keyboardShortcuts.rerun'), | ||
| }, | ||
| { | ||
| key: ['s'], | ||
| description: t('sideBar.keyboardShortcuts.stop'), | ||
| }, | ||
| { | ||
| key: ['f'], | ||
| description: t('sideBar.keyboardShortcuts.toggle'), | ||
| }, | ||
| { | ||
| key: ['⌘', 'b'] as const, | ||
| description: t('sideBar.keyboardShortcuts.collapse'), | ||
| }, | ||
| ] | ||
| </script> |
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
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,50 @@ | ||
| import InlineSpecListHeader from './InlineSpecListHeader.vue' | ||
| import { ref } from 'vue' | ||
|
|
||
| describe('InlineSpecListHeader', () => { | ||
| beforeEach(() => { | ||
| const search = ref('') | ||
| const tab = ref('file-list') | ||
| const onAddSpec = cy.spy().as('new-spec') | ||
|
|
||
| cy.wrap(search).as('search') | ||
| cy.wrap(tab).as('tab') | ||
|
|
||
| const methods = { | ||
| search: search.value, | ||
| 'onUpdate:search': (val: string) => { | ||
| search.value = val | ||
| }, | ||
| tab: tab.value, | ||
| 'onUpdate:tab': (val: string) => { | ||
| tab.value = val | ||
| }, | ||
| onAddSpec, | ||
| } | ||
|
|
||
| cy.mount(() => | ||
| (<div class="bg-gray-1000"> | ||
| <InlineSpecListHeader {...methods} /> | ||
| </div>)) | ||
| }) | ||
|
|
||
| it('should allow search', () => { | ||
| const searchString = 'my/component.cy.tsx' | ||
|
|
||
| cy.get('input') | ||
| .type(searchString, { delay: 0 }) | ||
| .get('@search').its('value').should('eq', searchString) | ||
| }) | ||
|
|
||
| it('should toggle radio group', () => { | ||
| cy.get('[data-cy="file-tree-radio-option"]') | ||
| .click() | ||
| .get('@tab').its('value').should('eq', 'file-tree') | ||
| }) | ||
|
|
||
| it('should emit add spec', () => { | ||
| cy.get('[data-cy="runner-spec-list-add-spec"]').click() | ||
| .get('@new-spec') | ||
| .should('have.been.called') | ||
| }) | ||
| }) |
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,116 @@ | ||
| <template> | ||
| <div class="h-64px items-center gap-8px mx-16px border-b-1 border-gray-900 grid grid-cols-[minmax(0,1fr),63px,24px]"> | ||
| <div class="relative items-center group"> | ||
| <div class="absolute inset-y-0 flex items-center pointer-events-none"> | ||
| <i-cy-magnifying-glass_x16 | ||
| :class="inputFocused ? 'icon-dark-gray-200' : 'icon-dark-gray-900'" | ||
| class="icon-light-gray-1000" | ||
| /> | ||
| </div> | ||
| <input | ||
| class=" | ||
| w-full | ||
| bg-gray-1000 | ||
| pl-6 | ||
| text-gray-500 | ||
| placeholder-gray-700 | ||
| font-light | ||
| outline-none | ||
| " | ||
| placeholder="Search Specs" | ||
| :value="search" | ||
| @focus="inputFocused = true" | ||
| @blur="inputFocused = false" | ||
| @input="onInput" | ||
| > | ||
| </div> | ||
| <RadioGroup | ||
| :model-value="tab" | ||
| class="flex border-1 border-gray-900 rounded-md h-24px w-64px text-md cursor-pointer" | ||
| @update:model-value="emit('update:tab', $event)" | ||
| > | ||
| <RadioGroupOption | ||
| v-slot="{ checked }" | ||
| as="template" | ||
| value="file-list" | ||
| data-cy="file-list-radio-option" | ||
| > | ||
| <div | ||
| class="flex flex-1 items-center justify-center outline-none" | ||
| :class="{ 'bg-gray-900': checked }" | ||
| > | ||
| <i-cy-file-list | ||
| :class="checked ? 'icon-dark-gray-200' : 'icon-dark-gray-700'" | ||
| /> | ||
| </div> | ||
| </RadioGroupOption> | ||
| <RadioGroupOption | ||
| v-slot="{ checked }" | ||
| as="template" | ||
| value="file-tree" | ||
| data-cy="file-tree-radio-option" | ||
| > | ||
| <div | ||
| class="flex flex-1 items-center justify-center outline-none" | ||
| :class="{ 'bg-gray-900': checked }" | ||
| > | ||
| <i-cy-file-tree | ||
| :class="checked ? 'icon-dark-gray-200' : 'icon-dark-gray-700'" | ||
| /> | ||
| </div> | ||
| </RadioGroupOption> | ||
| </RadioGroup> | ||
| <button | ||
| class=" | ||
| border-1 border-gray-900 | ||
| h-24px | ||
| w-24px | ||
| rounded-md | ||
| add-button | ||
| outline-none | ||
| flex | ||
| items-center | ||
| justify-center | ||
| " | ||
| data-cy="runner-spec-list-add-spec" | ||
| @click="emit('addSpec')" | ||
| > | ||
| <i-cy-add-small_x16 class="icon-light-gray-50 icon-dark-gray-200" /> | ||
| </button> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import Input from '@cy/components/Input.vue' | ||
| import Button from '@cy/components/Button.vue' | ||
| import { ref } from 'vue' | ||
| import { RadioGroup, RadioGroupOption } from '@headlessui/vue' | ||
| defineProps<{tab: string, search: string}>() | ||
| const emit = defineEmits<{ | ||
| (e: 'update:tab', tab: string): void | ||
| (e: 'update:search', search: string): void | ||
| (e: 'addSpec'): void | ||
| }>() | ||
| const inputFocused = ref(false) | ||
| const onInput = (e: Event) => { | ||
| const value = (e.target as HTMLInputElement).value | ||
| emit('update:search', value) | ||
| } | ||
| </script> | ||
|
|
||
| <style> | ||
| /** Windi box shadows are dark, so styles are for lighter box shadows */ | ||
| .add-button { | ||
| transition: box-shadow 0.3s ease-in-out; | ||
| } | ||
| .add-button:hover { | ||
| box-shadow: 0 0 4px rgba(191, 194, 212, 0.6); | ||
| } | ||
| </style> |
Oops, something went wrong.