Skip to content

Commit

Permalink
chore: styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@antfu
antfu committed Sep 13, 2021
1 parent 589c0b5 commit 1c17714
Show file tree
Hide file tree
Showing 4 changed files with 156 additions and 135 deletions.
94 changes: 46 additions & 48 deletions packages/client/internals/DrawingControls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,58 +11,56 @@ function redo() {
</script>

<template>
<div class="m-auto rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)">
<div class="flex text-xl p-2 gap-1">
<button
v-for="color of brushColors"
:key="color"
class="icon-btn"
:class="brush.color === color ? 'active' : 'shallow'"
@click="brush.color = color"
>
<div
class="w-6 h-6 transition-all transform border border-gray-400/50"
:class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded'"
:style="{ background: color }"
/>
</button>
<div class="flex flex-wrap text-xl p-2 gap-1">
<button
v-for="color of brushColors"
:key="color"
class="icon-btn"
:class="brush.color === color ? 'active' : 'shallow'"
@click="brush.color = color"
>
<div
class="w-6 h-6 transition-all transform border border-gray-400/50"
:class="brush.color !== color ? 'rounded-1/2 scale-85' : 'rounded'"
:style="{ background: color }"
/>
</button>

<VerticalDivider />
<VerticalDivider />

<button class="icon-btn" :class="{ shallow: drawingMode != 'stylus' }" @click="drawingMode = 'stylus'">
<carbon:draw />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'line' }" @click="drawingMode = 'line'">
<uil:line-alt />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'arrow' }" @click="drawingMode = 'arrow'">
<carbon:arrow-up-right />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'ellipse' }" @click="drawingMode = 'ellipse'">
<carbon:radio-button />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'rectangle' }" @click="drawingMode = 'rectangle'">
<carbon:checkbox />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'stylus' }" @click="drawingMode = 'stylus'">
<carbon:draw />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'line' }" @click="drawingMode = 'line'">
<uil:line-alt />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'arrow' }" @click="drawingMode = 'arrow'">
<carbon:arrow-up-right />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'ellipse' }" @click="drawingMode = 'ellipse'">
<carbon:radio-button />
</button>
<button class="icon-btn" :class="{ shallow: drawingMode != 'rectangle' }" @click="drawingMode = 'rectangle'">
<carbon:checkbox />
</button>

<VerticalDivider />
<VerticalDivider />

<button class="icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
<carbon:undo />
</button>
<button class="icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
<carbon:redo />
</button>
<button class="icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
<carbon:delete />
</button>
<button class="icon-btn" :class="{ disabled: !canUndo }" @click="undo()">
<carbon:undo />
</button>
<button class="icon-btn" :class="{ disabled: !canRedo }" @click="redo()">
<carbon:redo />
</button>
<button class="icon-btn" :class="{ disabled: !canClear }" @click="clearDrauu()">
<carbon:delete />
</button>

<template v-if="drawingEnabled">
<VerticalDivider />
<button class="icon-btn" @click="drawingEnabled = false">
<carbon:close />
</button>
</template>
</div>
<template v-if="drawingEnabled">
<VerticalDivider />
<button class="icon-btn" @click="drawingEnabled = false">
<carbon:close />
</button>
</template>
</div>
</template>
188 changes: 108 additions & 80 deletions packages/client/internals/NavControls.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import Settings from './Settings.vue'
import MenuButton from './MenuButton.vue'
import VerticalDivider from './VerticalDivider.vue'
defineProps({
mode: {
default: 'fixed',
const props = defineProps({
persist: {
default: false,
},
})
Expand All @@ -27,6 +27,11 @@ const onMouseLeave = () => {
activeElement.value.blur()
}
const barStyle = computed(() => props.persist
? 'text-$slidev-controls-foreground bg-transparent'
: 'rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)',
)
const RecordingControls = shallowRef<any>()
const DrawingControls = shallowRef<any>()
if (__DEV__) {
Expand All @@ -36,95 +41,118 @@ if (__DEV__) {
</script>

<template>
<nav ref="root" class="flex flex-wrap-reverse text-xl p-2 gap-1" @mouseleave="onMouseLeave">
<button v-if="!isEmbedded" class="icon-btn" @click="toggleFullscreen">
<carbon:minimize v-if="isFullscreen" />
<carbon:maximize v-else />
</button>

<button class="icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
<carbon:arrow-left />
</button>

<button class="icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
<carbon:arrow-right />
</button>

<button v-if="!isEmbedded" class="icon-btn" title="Slides overview" @click="toggleOverview()">
<carbon:apps />
</button>

<button v-if="!isColorSchemaConfigured" class="icon-btn" title="Toggle dark mode" @click="toggleDark()">
<carbon-moon v-if="isDark" />
<carbon-sun v-else />
</button>

<VerticalDivider />

<template v-if="__DEV__ && !isEmbedded">
<template v-if="!isPresenter && !md && RecordingControls">
<RecordingControls />
<VerticalDivider />
</template>

<button v-if="isPresenter" class="icon-btn" title="Show presenter cursor" @click="showPresenterCursor = !showPresenterCursor">
<ph:cursor-fill v-if="showPresenterCursor" />
<ph:cursor-duotone v-else class="opacity-50" />
<nav ref="root" class="flex flex-col">
<template v-if="__DEV__ && !isEmbedded && DrawingControls && drawingEnabled">
<DrawingControls class="ml-0" :class="barStyle" />
<div :class="persist ? 'border-b border-gray-400/20' : 'pt-1'"></div>
</template>
<div class="flex flex-wrap-reverse text-xl p-2 gap-1" :class="barStyle" @mouseleave="onMouseLeave">
<button v-if="!isEmbedded" class="icon-btn" @click="toggleFullscreen">
<carbon:minimize v-if="isFullscreen" />
<carbon:maximize v-else />
</button>

<template v-if="DrawingControls">
<button class="icon-btn relative" title="Drawing" @click="drawingEnabled = !drawingEnabled">
<carbon:draw />
<div
v-if="drawingEnabled"
class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
:style="{ background: brush.color }"
></div>
</button>
<DrawingControls v-if="drawingEnabled" class="absolute bottom-17 left-2" />
<VerticalDivider />
</template>
<button class="icon-btn" :class="{ disabled: !hasPrev }" @click="prev">
<carbon:arrow-left />
</button>

<RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
<carbon:presentation-file />
</RouterLink>
<RouterLink v-if="!isPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
<carbon:user-speaker />
</RouterLink>
<button class="icon-btn" :class="{ disabled: !hasNext }" title="Next" @click="next">
<carbon:arrow-right />
</button>

<button v-if="!isPresenter" class="icon-btn <md:hidden" @click="showEditor = !showEditor">
<carbon:text-annotation-toggle />
<button v-if="!isEmbedded" class="icon-btn" title="Slides overview" @click="toggleOverview()">
<carbon:apps />
</button>
</template>
<template v-else>
<button v-if="configs.download" class="icon-btn" @click="downloadPDF">
<carbon:download />

<button
v-if="!isColorSchemaConfigured"
class="icon-btn"
title="Toggle dark mode"
@click="toggleDark()"
>
<carbon-moon v-if="isDark" />
<carbon-sun v-else />
</button>
</template>

<button v-if="!isPresenter && configs.info && !isEmbedded" class="icon-btn" @click="showInfoDialog = !showInfoDialog">
<carbon:information />
</button>
<VerticalDivider />

<template v-if="!isPresenter && !isEmbedded">
<MenuButton>
<template #button>
<button class="icon-btn">
<carbon:settings-adjust />
</button>
<template v-if="__DEV__ && !isEmbedded">
<template v-if="!isPresenter && !md && RecordingControls">
<RecordingControls />
<VerticalDivider />
</template>
<template #menu>
<Settings />

<button
v-if="isPresenter"
class="icon-btn"
title="Show presenter cursor"
@click="showPresenterCursor = !showPresenterCursor"
>
<ph:cursor-fill v-if="showPresenterCursor" />
<ph:cursor-duotone v-else class="opacity-50" />
</button>

<template v-if="DrawingControls">
<button
class="icon-btn relative"
title="Drawing"
@click="drawingEnabled = !drawingEnabled"
>
<carbon:draw />
<div
v-if="drawingEnabled"
class="absolute left-1 right-1 bottom-0 h-0.7 rounded-full"
:style="{ background: brush.color }"
></div>
</button>
<VerticalDivider />
</template>
</MenuButton>
</template>

<VerticalDivider v-if="!isEmbedded" />
<RouterLink v-if="isPresenter" :to="nonPresenterLink" class="icon-btn" title="Play Mode">
<carbon:presentation-file />
</RouterLink>
<RouterLink v-if="!isPresenter" :to="presenterLink" class="icon-btn" title="Presenter Mode">
<carbon:user-speaker />
</RouterLink>

<button v-if="!isPresenter" class="icon-btn <md:hidden" @click="showEditor = !showEditor">
<carbon:text-annotation-toggle />
</button>
</template>
<template v-else>
<button v-if="configs.download" class="icon-btn" @click="downloadPDF">
<carbon:download />
</button>
</template>

<button
v-if="!isPresenter && configs.info && !isEmbedded"
class="icon-btn"
@click="showInfoDialog = !showInfoDialog"
>
<carbon:information />
</button>

<template v-if="!isPresenter && !isEmbedded">
<MenuButton>
<template #button>
<button class="icon-btn">
<carbon:settings-adjust />
</button>
</template>
<template #menu>
<Settings />
</template>
</MenuButton>
</template>

<VerticalDivider v-if="!isEmbedded" />

<div class="h-40px flex" p="l-1 t-0.5 r-2" text="sm leading-2">
<div class="my-auto">
{{ currentPage }}
<span class="opacity-50">/ {{ total }}</span>
<div class="h-40px flex" p="l-1 t-0.5 r-2" text="sm leading-2">
<div class="my-auto">
{{ currentPage }}
<span class="opacity-50">/ {{ total }}</span>
</div>
</div>
</div>
</nav>
Expand Down
7 changes: 1 addition & 6 deletions packages/client/internals/Play.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,12 +55,7 @@ if (__DEV__)
isDrawing ? 'pointer-events-none': ''
]"
>
<NavControls
class="m-auto"
:class="presistNav
? 'text-$slidev-controls-foreground bg-transparent'
: 'rounded-md bg-main shadow dark:(border border-gray-400 border-opacity-10)'"
/>
<NavControls class="m-auto" :persist="presistNav" />
</div>
</template>
</SlideContainer>
Expand Down
2 changes: 1 addition & 1 deletion packages/client/internals/Presenter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,7 @@ onMounted(() => {
<NoteEditor class="w-full h-full p-4 overflow-auto" />
</div>
<div class="grid-section bottom">
<NavControls />
<NavControls :persist="true" />
</div>
</div>
<div class="progress-bar">
Expand Down

0 comments on commit 1c17714

Please sign in to comment.