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

feat: UI improvement #60

Merged
merged 1 commit into from
Jan 13, 2024
Merged

feat: UI improvement #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
10 changes: 5 additions & 5 deletions src/UserInterface/Slide/components/SelectedBox.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,10 +66,10 @@ selectionManager.events.update.on(() => {
:strokeWidth="2"
/>

<div class="move-handle" :style="{ top: '-8px', width: '100%', height: '4px' }"></div>
<div class="move-handle" :style="{ bottom: '-8px', width: '100%', height: '4px' }"></div>
<div class="move-handle" :style="{ left: '-8px', width: '4px', height: '100%' }"></div>
<div class="move-handle" :style="{ right: '-8px', width: '4px', height: '100%' }"></div>
<div class="move-handle" :style="{ top: '-7px', width: '100%', height: '2px' }"></div>
<div class="move-handle" :style="{ bottom: '-7px', width: '100%', height: '2px' }"></div>
<div class="move-handle" :style="{ left: '-7px', width: '2px', height: '100%' }"></div>
<div class="move-handle" :style="{ right: '-7px', width: '2px', height: '100%' }"></div>

<div
class="size-handle top cursor-ns-resize"
Expand Down Expand Up @@ -104,7 +104,7 @@ selectionManager.events.update.on(() => {
.move-handle {
position: absolute;
z-index: 1;
background-color: lightgray;
background-color: gray;
cursor: move;
}

Expand Down
4 changes: 2 additions & 2 deletions src/UserInterface/ToolBar/components/Home/Draw.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ import ButtonGroup from '../ButtonGroup.vue'
<stickers theme="two-tone" size="32" :fill="['#333', '#DE6C00']" :strokeWidth="1" />
<span class="text-xs mt-1">{{ $t('ToolBar.home.drawing.style') }}</span>
</button>
<div class="flex flex-col">
<!-- <div class="flex flex-col">
<button class="menu-btn py-0 pb-[2px] text-left">
<background-color theme="two-tone" size="18" :fill="['#333', '#83BEEC']" :strokeWidth="2" />
<span class="text-xs ml-1 align-middle">{{ $t('ToolBar.home.drawing.shapeFill') }}</span>
Expand All @@ -31,7 +31,7 @@ import ButtonGroup from '../ButtonGroup.vue'
<copy theme="two-tone" size="18" :fill="['#333', '#83BEEC']" :strokeWidth="2" />
<span class="text-xs ml-1">{{ $t('ToolBar.home.drawing.duplicate') }}</span>
</button>
</div>
</div> -->
</div>
</ButtonGroup>
</template>
18 changes: 15 additions & 3 deletions src/UserInterface/ToolBar/components/Home/Paragraph.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ import { selectionManager } from '@Kernel/index'
import { ref, shallowRef } from 'vue'
import { computed } from 'vue'

const buttonStyle = 'menu-btn w-[34px] h-[34px]'
const activeButtonStyle = 'border border-black bg-gray-200'

const selectedBlocks = shallowRef(selectionManager.selectedBlocks)
selectionManager.events.update.on(() => {
selectedBlocks.value = selectionManager.selectedBlocks
Expand Down Expand Up @@ -74,21 +77,30 @@ const updateAlign = (value: AlignType) => {
<button
class="menu-btn"
@click="updateAlign('left')"
:class="{ 'border border-black bg-gray-200': alignState === 'left' }"
:class="{
[buttonStyle]: true,
[activeButtonStyle]: alignState === 'left',
}"
>
<align-text-left size="24" :strokeWidth="2" />
</button>
<button
class="menu-btn"
@click="updateAlign('center')"
:class="{ 'border border-black bg-gray-200': alignState === 'center' }"
:class="{
[buttonStyle]: true,
[activeButtonStyle]: alignState === 'center',
}"
>
<align-text-center size="24" :strokeWidth="2" />
</button>
<button
class="menu-btn"
@click="updateAlign('right')"
:class="{ 'border border-black bg-gray-200': alignState === 'right' }"
:class="{
[buttonStyle]: true,
[activeButtonStyle]: alignState === 'right',
}"
>
<align-text-right size="24" :strokeWidth="2" />
</button>
Expand Down
4 changes: 2 additions & 2 deletions src/UserInterface/ToolBar/components/Home/index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Slides from './Slides.vue'
import FontStyle from './FontStyle.vue'
import Paragraph from './Paragraph.vue'
import Draw from './Draw.vue'
import Edit from './Edit.vue'
// import Edit from './Edit.vue'
</script>

<template>
Expand All @@ -17,5 +17,5 @@ import Edit from './Edit.vue'
<FontStyle />
<Paragraph />
<Draw />
<Edit />
<!-- <Edit /> -->
</template>
6 changes: 3 additions & 3 deletions src/UserInterface/ToolBar/components/Insert/Illustration.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@ import ButtonGroup from '../ButtonGroup.vue'
<button class="flex flex-col items-center justify-center py-0 menu-btn">
<GraphicDesign theme="two-tone" size="32" :fill="['#333', '#83BEEC']" :strokeWidth="1" />
<span class="mt-1 text-xs">{{ $t('ToolBar.insert.illustration.shapes') }}</span>
<Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
<!-- <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" /> -->
</button>
<button class="flex flex-col items-center justify-center py-0 -mt-4 menu-btn">
<!-- <button class="flex flex-col items-center justify-center py-0 -mt-4 menu-btn">
<PictureAlbum theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
<span class="mt-1 text-xs">{{ $t('ToolBar.insert.illustration.stockImages') }}</span>
</button>
Expand All @@ -23,7 +23,7 @@ import ButtonGroup from '../ButtonGroup.vue'
<GameEmoji theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
<span class="mt-1 text-xs">{{ $t('ToolBar.insert.illustration.smartArt') }}</span>
<Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
</button>
</button> -->
</div>
</ButtonGroup>
</template>
20 changes: 10 additions & 10 deletions src/UserInterface/ToolBar/components/Insert/Index.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,23 @@ import Slides from './Slides.vue'
import Table from './Table.vue'
import Picture from './Picture.vue'
import Illustration from './Illustration.vue'
import Link from './Link.vue'
// import Link from './Link.vue'
import Text from './Text.vue'
import Footer from './Footer.vue'
import Comments from './Comments.vue'
import Symbol from './Symbol.vue'
import Media from './Media.vue'
// import Footer from './Footer.vue'
// import Comments from './Comments.vue'
// import Symbol from './Symbol.vue'
// import Media from './Media.vue'
</script>

<template>
<Slides />
<Table />
<Picture />
<Illustration />
<Link />
<!-- <Link /> -->
<Text />
<Footer />
<Comments />
<Symbol />
<Media />
<!-- <Footer /> -->
<!-- <Comments /> -->
<!-- <Symbol /> -->
<!-- <Media /> -->
</template>
2 changes: 1 addition & 1 deletion src/UserInterface/ToolBar/components/Insert/Picture.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ async function insertPicture() {
<button class="flex flex-col items-center py-0 menu-btn" @click="insertPicture">
<Pic class="mb-1" theme="multi-color" size="32" :fill="['#333', '#83beec', '#FFF', '#43CCF8']" :strokeWidth="2" />
<span class="text-xs">{{ $t('ToolBar.insert.picture.btnName') }}</span>
<Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" />
<!-- <Down class="-mt-1" theme="outline" size="17" fill="#333" :strokeWidth="2" /> -->
</button>
</ButtonGroup>
</template>