From b8e0b4b851e9b249e2699513c548030b725a6c94 Mon Sep 17 00:00:00 2001 From: Mert Sincan Date: Wed, 1 May 2024 09:32:36 +0100 Subject: [PATCH] Refactor #5667 --- components/lib/dialog/style/DialogStyle.js | 131 ++++++++++++++++++ components/lib/image/style/ImageStyle.js | 114 +++++++++++++++ .../lib/progressbar/style/ProgressBarStyle.js | 122 ++++++++++++++++ .../lib/themes/primeone/presets/index.js | 1 - 4 files changed, 367 insertions(+), 1 deletion(-) delete mode 100644 components/lib/themes/primeone/presets/index.js diff --git a/components/lib/dialog/style/DialogStyle.js b/components/lib/dialog/style/DialogStyle.js index f35bb5ff6..9128d42c6 100644 --- a/components/lib/dialog/style/DialogStyle.js +++ b/components/lib/dialog/style/DialogStyle.js @@ -1,5 +1,135 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-dialog { + max-height: 90%; + transform: scale(1); + border-radius: ${dt('rounded.xl')}; + box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1); + background: ${dt('dialog.background')}; + border: 1px solid ${dt('dialog.border.color')}; + color: ${dt('dialog.color')}; +} + +.p-dialog-content { + overflow-y: auto; + padding: 0 1.5rem 1.5rem 1.5rem; +} + +.p-dialog-header { + display: flex; + align-items: center; + justify-content: space-between; + flex-shrink: 0; + padding: 1.5rem; +} + +.p-dialog-title { + font-weight: 600; + font-size: 1.25rem; +} + +.p-dialog-footer { + flex-shrink: 0; + padding: 0 1.5rem 1.5rem 1.5rem; + display: flex; + justify-content: flex-end; + gap: 0.5rem; +} + +.p-dialog-header-actions { + display: flex; + align-items: center; + gap: 0.5rem; +} +.p-dialog-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); +} + +.p-dialog-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.p-dialog-enter-from, +.p-dialog-leave-to { + opacity: 0; + transform: scale(0.7); +} + +.p-dialog-top .p-dialog, +.p-dialog-bottom .p-dialog, +.p-dialog-left .p-dialog, +.p-dialog-right .p-dialog, +.p-dialog-topleft .p-dialog, +.p-dialog-topright .p-dialog, +.p-dialog-bottomleft .p-dialog, +.p-dialog-bottomright .p-dialog { + margin: 0.75rem; + transform: translate3d(0px, 0px, 0px); +} + +.p-dialog-top .p-dialog-enter-active, +.p-dialog-top .p-dialog-leave-active, +.p-dialog-bottom .p-dialog-enter-active, +.p-dialog-bottom .p-dialog-leave-active, +.p-dialog-left .p-dialog-enter-active, +.p-dialog-left .p-dialog-leave-active, +.p-dialog-right .p-dialog-enter-active, +.p-dialog-right .p-dialog-leave-active, +.p-dialog-topleft .p-dialog-enter-active, +.p-dialog-topleft .p-dialog-leave-active, +.p-dialog-topright .p-dialog-enter-active, +.p-dialog-topright .p-dialog-leave-active, +.p-dialog-bottomleft .p-dialog-enter-active, +.p-dialog-bottomleft .p-dialog-leave-active, +.p-dialog-bottomright .p-dialog-enter-active, +.p-dialog-bottomright .p-dialog-leave-active { + transition: all 0.3s ease-out; +} + +.p-dialog-top .p-dialog-enter-from, +.p-dialog-top .p-dialog-leave-to { + transform: translate3d(0px, -100%, 0px); +} + +.p-dialog-bottom .p-dialog-enter-from, +.p-dialog-bottom .p-dialog-leave-to { + transform: translate3d(0px, 100%, 0px); +} + +.p-dialog-left .p-dialog-enter-from, +.p-dialog-left .p-dialog-leave-to, +.p-dialog-topleft .p-dialog-enter-from, +.p-dialog-topleft .p-dialog-leave-to, +.p-dialog-bottomleft .p-dialog-enter-from, +.p-dialog-bottomleft .p-dialog-leave-to { + transform: translate3d(-100%, 0px, 0px); +} + +.p-dialog-right .p-dialog-enter-from, +.p-dialog-right .p-dialog-leave-to, +.p-dialog-topright .p-dialog-enter-from, +.p-dialog-topright .p-dialog-leave-to, +.p-dialog-bottomright .p-dialog-enter-from, +.p-dialog-bottomright .p-dialog-leave-to { + transform: translate3d(100%, 0px, 0px); +} + +.p-dialog-maximized { + width: 100vw !important; + height: 100vh !important; + top: 0px !important; + left: 0px !important; + max-height: 100%; + height: 100%; + border-radius: 0; +} + +.p-dialog-maximized .p-dialog-content { + flex-grow: 1; +} +`; + /* Position */ const inlineStyles = { mask: ({ position, modal }) => ({ @@ -52,6 +182,7 @@ const classes = { export default BaseStyle.extend({ name: 'dialog', + theme, classes, inlineStyles }); diff --git a/components/lib/image/style/ImageStyle.js b/components/lib/image/style/ImageStyle.js index a1d646b2f..3aa5783c8 100644 --- a/components/lib/image/style/ImageStyle.js +++ b/components/lib/image/style/ImageStyle.js @@ -1,5 +1,118 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-image-mask { + display: flex; + align-items: center; + justify-content: center; + --p-mask-background: ${dt('image.mask.background')}; +} + +.p-image-preview { + position: relative; + display: inline-flex; + line-height: 0; +} + +.p-image-preview-mask { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; + opacity: 0; + transition: opacity 0.3s; + border: 0 none; + padding: 0; + cursor: pointer; + background: transparent; + color: ${dt('image.preview.indicator.color')}; + transition: background-color ${dt('transition.duration')}; +} + +.p-image-preview:hover > .p-image-preview-mask { + opacity: 1; + cursor: pointer; + background: ${dt('image.preview.indicator.background')}; +} + +.p-image-preview-icon { + width: 1.5rem; + height: 1.5rem; +} + +.p-image-toolbar { + position: absolute; + top: 0; + right: 0; + display: flex; + z-index: 1; + padding: 1rem; + gap: 0.5rem; +} + +.p-image-action { + display: inline-flex; + justify-content: center; + align-items: center; + color: ${dt('image.action.color')}; + background: transparent; + width: 3rem; + margin: 0; + padding: 0; + border: 0 none; + cursor: pointer; + user-select: none; + height: 3rem; + border-radius: 50%; + outline-color: transparent; + transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; +} + +.p-image-action:hover { + color: ${dt('image.action.hover.color')}; + background: ${dt('image.action.hover.background')}; +} + +.p-image-action:focus-visible { + outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; + outline-offset: ${dt('focus.ring.offset')}; +} + +.p-image-action .p-icon { + font-size: 1.5rem; + width: 1.5rem; + height: 1.5rem; +} + +.p-image-action.p-disabled { + pointer-events: auto; +} + +.p-image-original { + transition: transform 0.15s; + max-width: 100vw; + max-height: 100vh; +} + +.p-image-original-enter-active { + transition: all 150ms cubic-bezier(0, 0, 0.2, 1); +} + +.p-image-original-leave-active { + transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1); +} + +.p-image-original-enter-from, +.p-image-original-leave-to { + opacity: 0; + transform: scale(0.7); +} +`; + const classes = { root: ({ props }) => [ 'p-image p-component', @@ -31,5 +144,6 @@ const classes = { export default BaseStyle.extend({ name: 'image', + theme, classes }); diff --git a/components/lib/progressbar/style/ProgressBarStyle.js b/components/lib/progressbar/style/ProgressBarStyle.js index 4248888c5..269e29c4c 100644 --- a/components/lib/progressbar/style/ProgressBarStyle.js +++ b/components/lib/progressbar/style/ProgressBarStyle.js @@ -1,5 +1,126 @@ import BaseStyle from 'primevue/base/style'; +const theme = ({ dt }) => ` +.p-progressbar { + position: relative; + overflow: hidden; + border: 0 none; + height: 1.25rem; + background: ${dt('progressbar.background')}; + border-radius: ${dt('rounded.base')}; +} + +.p-progressbar-value { + border: 0 none; + margin: 0; + background: ${dt('progressbar.value.background')}; +} + +.p-progressbar-label { + color: ${dt('progressbar.label.color')}; + line-height: 1.25rem; + font-size: .75rem; + font-weight: 600; +} + +.p-progressbar-determinate .p-progressbar-value { + height: 100%; + width: 0%; + position: absolute; + display: none; + border: 0 none; + display: flex; + align-items: center; + justify-content: center; + overflow: hidden; + transition: width 1s ease-in-out; +} + +.p-progressbar-determinate .p-progressbar-label { + display: inline-flex; +} + +.p-progressbar-indeterminate .p-progressbar-value::before { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + animation: p-progressbar-indeterminate-anim 2.1s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite; +} + +.p-progressbar-indeterminate .p-progressbar-value::after { + content: ""; + position: absolute; + background-color: inherit; + top: 0; + left: 0; + bottom: 0; + will-change: left, right; + animation: p-progressbar-indeterminate-anim-short 2.1s cubic-bezier(0.165, 0.84, 0.44, 1) infinite; + animation-delay: 1.15s; +} + +@-webkit-keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} +@keyframes p-progressbar-indeterminate-anim { + 0% { + left: -35%; + right: 100%; + } + 60% { + left: 100%; + right: -90%; + } + 100% { + left: 100%; + right: -90%; + } +} +@-webkit-keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} +@keyframes p-progressbar-indeterminate-anim-short { + 0% { + left: -200%; + right: 100%; + } + 60% { + left: 107%; + right: -8%; + } + 100% { + left: 107%; + right: -8%; + } +} +`; + const classes = { root: ({ instance }) => [ 'p-progressbar p-component', @@ -15,5 +136,6 @@ const classes = { export default BaseStyle.extend({ name: 'progressbar', + theme, classes }); diff --git a/components/lib/themes/primeone/presets/index.js b/components/lib/themes/primeone/presets/index.js deleted file mode 100644 index fee06838f..000000000 --- a/components/lib/themes/primeone/presets/index.js +++ /dev/null @@ -1 +0,0 @@ -export { default as Aura } from 'primevue/themes/primeone/presets/aura';