diff --git a/src/hooks/useSlideBackgroundStyle.ts b/src/hooks/useSlideBackgroundStyle.ts index 36052ad9..b55603e0 100644 --- a/src/hooks/useSlideBackgroundStyle.ts +++ b/src/hooks/useSlideBackgroundStyle.ts @@ -5,21 +5,27 @@ export default (background: Ref) => { const backgroundStyle = computed(() => { if(!background.value) return { backgroundColor: '#fff' } - const { type, value, size } = background.value - if(type === 'solid') return { backgroundColor: value } + const { + type, + color, + image, + imageSize, + } = background.value + + if(type === 'solid') return { backgroundColor: color } else if(type === 'image') { - if(!value) return { backgroundColor: '#fff' } - if(size === 'repeat') { + if(!image) return { backgroundColor: '#fff' } + if(imageSize === 'repeat') { return { - backgroundImage: `url(${value}`, + backgroundImage: `url(${image}`, backgroundRepeat: 'repeat', backgroundSize: 'initial', } } return { - backgroundImage: `url(${value}`, + backgroundImage: `url(${image}`, backgroundRepeat: 'no-repeat', - backgroundSize: size, + backgroundSize: imageSize, } } diff --git a/src/mocks/index.ts b/src/mocks/index.ts index af02eb52..d4e098ab 100644 --- a/src/mocks/index.ts +++ b/src/mocks/index.ts @@ -25,7 +25,7 @@ export const slides: Slide[] = [ id: 'xxx1', background: { type: 'solid', - value: '#fff', + color: '#fff', }, elements: [ { diff --git a/src/types/slides.ts b/src/types/slides.ts index 11410e3d..ac091abf 100644 --- a/src/types/slides.ts +++ b/src/types/slides.ts @@ -162,8 +162,9 @@ export interface PPTAnimation { export interface SlideBackground { type: 'solid' | 'image'; - value: string; - size?: 'cover' | 'contain' | 'repeat' | 'initial'; + color?: string; + image?: string; + imageSize?: 'cover' | 'contain' | 'repeat' | 'initial'; } export interface Slide { diff --git a/src/views/Editor/Canvas/GridLines.vue b/src/views/Editor/Canvas/GridLines.vue index 93390112..70d76072 100644 --- a/src/views/Editor/Canvas/GridLines.vue +++ b/src/views/Editor/Canvas/GridLines.vue @@ -31,7 +31,7 @@ export default defineComponent({ const gridColor = computed(() => { if(!background.value || background.value.type === 'image') return 'rgba(100, 100, 100, 0.5)' - const color = background.value.value + const color = background.value.color const rgba = tinycolor(color).toRgb() const newRgba = { r: rgba.r > 128 ? rgba.r - 128 : rgba.r + 127, diff --git a/src/views/Editor/Toolbar/SlideAnimationPanel.vue b/src/views/Editor/Toolbar/SlideAnimationPanel.vue index fecd7419..f808caff 100644 --- a/src/views/Editor/Toolbar/SlideAnimationPanel.vue +++ b/src/views/Editor/Toolbar/SlideAnimationPanel.vue @@ -106,34 +106,30 @@ export default defineComponent({ position: relative; overflow: hidden; - &:hover { - animation: no 2s infinite linear; + @mixin elAnimation($animationType) { + content: ''; + width: 100%; + height: 100%; + position: absolute; + left: 0; + top: 0; + background-color: #d9dadb; + animation: $animationType .3s linear; } + &.fade:hover { - animation: fade 2s infinite linear; + &::after { + @include elAnimation(fade); + } } &.slideX:hover { &::after { - width: 192px; - height: 100%; - content: ''; - position: absolute; - left: 0; - top: 0; - background-image: linear-gradient(to right, #666 0%, #666 64px, #d9dadb 64px, #d9dadb 128px, #666 128px, #666 192px); - animation: slideX 3s infinite linear; + @include elAnimation(slideX); } } &.slideY:hover { &::after { - width: 100%; - height: 108px; - content: ''; - position: absolute; - left: 0; - top: 0; - background-image: linear-gradient(to bottom, #666 0%, #666 36px, #d9dadb 36px, #d9dadb 72px, #666 72px, #666 108px); - animation: slideY 3s infinite linear; + @include elAnimation(slideY); } } } @@ -143,78 +139,28 @@ export default defineComponent({ text-align: center; } -@keyframes no { - 0% { - background-color: #666; - } - 50% { - background-color: #666; - } - 51% { - background-color: #d9dadb; - } - 100% { - background-color: #d9dadb; - } -} @keyframes fade { 0% { - background-color: #d9dadb; - } - 50% { - background-color: #666; - } - 51% { - background-color: #d9dadb; + opacity: 0; } 100% { - background-color: #666; + opacity: 1; } } @keyframes slideX { 0% { - left: 0; - } - 17% { - left: -64px; - } - 33% { - left: -64px; - } - 50% { - left: -128px; - } - 67% { - left: -128px; - } - 84% { - left: -192px; + transform: translateX(100%); } 100% { - left: -192px; + transform: translateX(0); } } @keyframes slideY { 0% { - top: 0; - } - 17% { - top: -36px; - } - 33% { - top: -36px; - } - 50% { - top: -72px; - } - 67% { - top: -72px; - } - 84% { - top: -108px; + transform: translateY(100%); } 100% { - top: -108px; + transform: translateY(0); } } \ No newline at end of file diff --git a/src/views/Editor/Toolbar/SlideStylePanel.vue b/src/views/Editor/Toolbar/SlideStylePanel.vue index 565ed359..9c415ba7 100644 --- a/src/views/Editor/Toolbar/SlideStylePanel.vue +++ b/src/views/Editor/Toolbar/SlideStylePanel.vue @@ -14,16 +14,16 @@ - +