Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: accessibility navigation #1857

Merged
merged 3 commits into from
Sep 27, 2024
Merged

fix: accessibility navigation #1857

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
b893524
fix: accessibility navigation
Goketech Sep 8, 2024
fbe96b8
fix: outline button when focused
Goketech Sep 8, 2024
ebbbcfe
chore: update
KermanX Sep 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/client/internals/Controls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ if (__SLIDEV_FEATURE_RECORD__) {
</script>

<template>
<DrawingControls v-if="drawingEnabled && DrawingControls" />
<DrawingControls v-if="DrawingControls" />
<QuickOverview />
<Goto />
<WebCamera v-if="WebCamera" />
Expand Down
279 changes: 140 additions & 139 deletions packages/client/internals/DrawingControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,139 +1,140 @@
<script setup lang="ts">
import { Menu } from 'floating-vue'
import { useDrawings } from '../composables/useDrawings'
import VerticalDivider from './VerticalDivider.vue'
import Draggable from './Draggable.vue'
import IconButton from './IconButton.vue'

const {
brush,
canClear,
canRedo,
canUndo,
clear,
drauu,
drawingEnabled,
drawingMode,
drawingPinned,
brushColors,
} = useDrawings()

function undo() {
drauu.undo()
}
function redo() {
drauu.redo()
}

let lastDrawingMode: typeof drawingMode.value = 'stylus'
function setDrawingMode(mode: typeof drawingMode.value) {
drawingMode.value = mode
drawingEnabled.value = true
if (mode !== 'eraseLine')
lastDrawingMode = mode
}
function setBrushColor(color: typeof brush.color) {
brush.color = color
drawingEnabled.value = true
drawingMode.value = lastDrawingMode
}
</script>

<template>
<Draggable
class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
:class="drawingEnabled ? '' : drawingPinned ? 'opacity-40 hover:opacity-90' : 'opacity-0 pointer-events-none'"
storage-key="slidev-drawing-pos"
:initial-x="10"
:initial-y="10"
>
<IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
<carbon:pen />
</IconButton>
<IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
<svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
</svg>
</IconButton>
<IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
<carbon:arrow-up-right />
</IconButton>
<IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
<carbon:radio-button />
</IconButton>
<IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
<carbon:checkbox />
</IconButton>
<IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
<carbon:erase />
</IconButton>

<VerticalDivider />

<Menu>
<IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
<svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
<line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
<line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
</svg>
</IconButton>
<template #popper>
<div class="flex bg-main p-2">
<div class="inline-block w-7 text-center">
{{ brush.size }}
</div>
<div class="pt-.5">
<input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
</div>
</div>
</template>
</Menu>
<IconButton
v-for="color of brushColors"
:key="color"
title="Set brush color"
:class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
@click="setBrushColor(color)"
>
<div
class="w-6 h-6 transition-all transform border"
:class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
:style="drawingEnabled ? { background: color } : { borderColor: color }"
/>
</IconButton>

<VerticalDivider />

<IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
<carbon:undo />
</IconButton>
<IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
<carbon:redo />
</IconButton>
<IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
<carbon:trash-can />
</IconButton>

<VerticalDivider />
<IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
<carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
<carbon:pin v-show="!drawingPinned" />
</IconButton>
<IconButton
v-if="drawingEnabled"
:title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
:class="{ shallow: !drawingEnabled }"
@click="drawingEnabled = !drawingEnabled"
>
<carbon:error v-show="drawingPinned" />
<carbon:close-outline v-show="!drawingPinned" />
</IconButton>
</Draggable>
</template>

<style>
.v-popper--theme-menu .v-popper__arrow-inner {
--uno: border-main;
}
</style>
<script setup lang="ts">
import { Menu } from 'floating-vue'
import { useDrawings } from '../composables/useDrawings'
import VerticalDivider from './VerticalDivider.vue'
import Draggable from './Draggable.vue'
import IconButton from './IconButton.vue'

const {
brush,
canClear,
canRedo,
canUndo,
clear,
drauu,
drawingEnabled,
drawingMode,
drawingPinned,
brushColors,
} = useDrawings()

function undo() {
drauu.undo()
}
function redo() {
drauu.redo()
}

let lastDrawingMode: typeof drawingMode.value = 'stylus'
function setDrawingMode(mode: typeof drawingMode.value) {
drawingMode.value = mode
drawingEnabled.value = true
if (mode !== 'eraseLine')
lastDrawingMode = mode
}
function setBrushColor(color: typeof brush.color) {
brush.color = color
drawingEnabled.value = true
drawingMode.value = lastDrawingMode
}
</script>

<template>
<Draggable
v-if="drawingEnabled || drawingPinned"
class="flex flex-wrap text-xl p-2 gap-1 rounded-md bg-main shadow transition-opacity duration-200 z-20 border border-main"
:class="!drawingEnabled && drawingPinned ? 'opacity-40 hover:opacity-90' : ''"
storage-key="slidev-drawing-pos"
:initial-x="10"
:initial-y="10"
>
<IconButton title="Draw with stylus" :class="{ shallow: drawingMode !== 'stylus' }" @click="setDrawingMode('stylus')">
<carbon:pen />
</IconButton>
<IconButton title="Draw a line" :class="{ shallow: drawingMode !== 'line' }" @click="setDrawingMode('line')">
<svg width="1em" height="1em" class="-mt-0.5" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24">
<path d="M21.71 3.29a1 1 0 0 0-1.42 0l-18 18a1 1 0 0 0 0 1.42a1 1 0 0 0 1.42 0l18-18a1 1 0 0 0 0-1.42z" fill="currentColor" />
</svg>
</IconButton>
<IconButton title="Draw an arrow" :class="{ shallow: drawingMode !== 'arrow' }" @click="setDrawingMode('arrow')">
<carbon:arrow-up-right />
</IconButton>
<IconButton title="Draw an ellipse" :class="{ shallow: drawingMode !== 'ellipse' }" @click="setDrawingMode('ellipse')">
<carbon:radio-button />
</IconButton>
<IconButton title="Draw a rectangle" :class="{ shallow: drawingMode !== 'rectangle' }" @click="setDrawingMode('rectangle')">
<carbon:checkbox />
</IconButton>
<IconButton title="Erase" :class="{ shallow: drawingMode !== 'eraseLine' }" @click="setDrawingMode('eraseLine')">
<carbon:erase />
</IconButton>

<VerticalDivider />

<Menu>
<IconButton title="Adjust stroke width" :class="{ shallow: drawingMode === 'eraseLine' }">
<svg viewBox="0 0 32 32" width="1.2em" height="1.2em">
<line x1="2" y1="15" x2="22" y2="4" stroke="currentColor" stroke-width="1" stroke-linecap="round" />
<line x1="2" y1="24" x2="28" y2="10" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
<line x1="7" y1="31" x2="29" y2="19" stroke="currentColor" stroke-width="3" stroke-linecap="round" />
</svg>
</IconButton>
<template #popper>
<div class="flex bg-main p-2">
<div class="inline-block w-7 text-center">
{{ brush.size }}
</div>
<div class="pt-.5">
<input v-model="brush.size" type="range" min="1" max="15" @change="drawingMode = lastDrawingMode">
</div>
</div>
</template>
</Menu>
<IconButton
v-for="color of brushColors"
:key="color"
title="Set brush color"
:class="brush.color === color && drawingMode !== 'eraseLine' ? 'active' : 'shallow'"
@click="setBrushColor(color)"
>
<div
class="w-6 h-6 transition-all transform border"
:class="brush.color !== color ? 'rounded-1/2 scale-85 border-white' : 'rounded-md border-gray-300/50'"
:style="drawingEnabled ? { background: color } : { borderColor: color }"
/>
</IconButton>

<VerticalDivider />

<IconButton title="Undo" :class="{ disabled: !canUndo }" @click="undo()">
<carbon:undo />
</IconButton>
<IconButton title="Redo" :class="{ disabled: !canRedo }" @click="redo()">
<carbon:redo />
</IconButton>
<IconButton title="Delete" :class="{ disabled: !canClear }" @click="clear()">
<carbon:trash-can />
</IconButton>

<VerticalDivider />
<IconButton :title="drawingPinned ? 'Unpin drawing' : 'Pin drawing'" :class="{ shallow: !drawingPinned }" @click="drawingPinned = !drawingPinned">
<carbon:pin-filled v-show="drawingPinned" class="transform -rotate-45" />
<carbon:pin v-show="!drawingPinned" />
</IconButton>
<IconButton
v-if="drawingEnabled"
:title="drawingPinned ? 'Drawing pinned' : 'Drawing unpinned'"
:class="{ shallow: !drawingEnabled }"
@click="drawingEnabled = !drawingEnabled"
>
<carbon:error v-show="drawingPinned" />
<carbon:close-outline v-show="!drawingPinned" />
</IconButton>
</Draggable>
</template>

<style>
.v-popper--theme-menu .v-popper__arrow-inner {
--uno: border-main;
}
</style>
2 changes: 1 addition & 1 deletion packages/client/pages/play.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ if (__DEV__ && __SLIDEV_FEATURE_EDITOR__)
<template #controls>
<div
v-if="!isPrintMode"
class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100"
class="absolute bottom-0 left-0 transition duration-300 opacity-0 hover:opacity-100 focus-within:opacity-100 focus-visible:opacity-100"
:class="[
persistNav ? '!opacity-100 right-0' : 'opacity-0 p-2',
isDrawing ? 'pointer-events-none' : '',
Expand Down
1 change: 1 addition & 0 deletions packages/client/styles/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ html {
cursor: pointer;
@apply opacity-75 transition duration-200 ease-in-out align-middle rounded p-1;
@apply hover:(opacity-100 bg-gray-400 bg-opacity-10);
@apply focus-visible:(opacity-100 outline outline-2 outline-offset-2 outline-black dark:outline-white);
@apply md:p-2;
}

Expand Down
Loading