vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored ColorPicker

pull/5677/head
Cagatay Civici 2024-04-07 11:36:13 +03:00
parent 2996ee0413
commit e8720345fe
3 changed files with 80 additions and 103 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/lib/colorpicker/ColorPicker.vue
View File

@ -567,87 +567,3 @@ export default {
} }
}; };
</script> </script>
<style>
.p-colorpicker {
display: inline-block;
}
.p-colorpicker-dragging {
cursor: pointer;
}
.p-colorpicker-overlay {
position: relative;
}
.p-colorpicker-panel {
position: relative;
width: 193px;
height: 166px;
}
.p-colorpicker-overlay-panel {
position: absolute;
top: 0;
left: 0;
}
.p-colorpicker-preview {
cursor: pointer;
}
.p-colorpicker-panel .p-colorpicker-content {
position: relative;
}
.p-colorpicker-panel .p-colorpicker-color-selector {
width: 150px;
height: 150px;
top: 8px;
left: 8px;
position: absolute;
}
.p-colorpicker-panel .p-colorpicker-color {
width: 150px;
height: 150px;
}
.p-colorpicker-panel .p-colorpicker-color-handle {
position: absolute;
top: 0px;
left: 150px;
border-radius: 100%;
width: 10px;
height: 10px;
border-width: 1px;
border-style: solid;
margin: -5px 0 0 -5px;
cursor: pointer;
opacity: 0.85;
}
.p-colorpicker-panel .p-colorpicker-hue {
width: 17px;
height: 150px;
top: 8px;
left: 167px;
position: absolute;
opacity: 0.85;
}
.p-colorpicker-panel .p-colorpicker-hue-handle {
position: absolute;
top: 150px;
left: 0px;
width: 21px;
margin-left: -2px;
margin-top: -5px;
height: 10px;
border-width: 2px;
border-style: solid;
opacity: 0.85;
cursor: pointer;
}
</style>

7
components/lib/colorpicker/style/ColorPickerStyle.js
View File

@ -1,19 +1,18 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ props }) => ['p-colorpicker p-component', { 'p-colorpicker-overlay': !props.inline }], root: 'p-colorpicker p-component',
input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }], input: ({ props }) => ['p-colorpicker-preview', { 'p-disabled': props.disabled }],
panel: ({ instance, props }) => [ panel: ({ instance, props }) => [
'p-colorpicker-panel', 'p-colorpicker-panel',
{ {
'p-colorpicker-overlay-panel': !props.inline, 'p-colorpicker-panel-inline': props.inline,
'p-disabled': props.disabled, 'p-disabled': props.disabled,
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
content: 'p-colorpicker-content',
selector: 'p-colorpicker-color-selector', selector: 'p-colorpicker-color-selector',
color: 'p-colorpicker-color', color: 'p-colorpicker-color-background',
colorHandle: 'p-colorpicker-color-handle', colorHandle: 'p-colorpicker-color-handle',
hue: 'p-colorpicker-hue', hue: 'p-colorpicker-hue',
hueHandle: 'p-colorpicker-hue-handle' hueHandle: 'p-colorpicker-hue-handle'

92
components/lib/themes/primeone/base/colorpicker/index.js
View File

@ -1,18 +1,12 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-colorpicker-color { .p-colorpicker {
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%); display: inline-block;
position: relative;
} }
.p-colorpicker-hue { .p-colorpicker-dragging {
background: linear-gradient(0deg, cursor: pointer;
red 0,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
red);
} }
.p-colorpicker-preview { .p-colorpicker-preview {
@ -23,6 +17,7 @@ export default {
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
transition: outline-color ${dt('transition.duration')}; transition: outline-color ${dt('transition.duration')};
outline-color: transparent; outline-color: transparent;
cursor: pointer;
} }
.p-colorpicker-preview:enabled:focus-visible { .p-colorpicker-preview:enabled:focus-visible {
@ -34,15 +29,82 @@ export default {
background: ${dt('colorpicker.panel.background')}; background: ${dt('colorpicker.panel.background')};
border: 1px solid ${dt('colorpicker.panel.border.color')}; border: 1px solid ${dt('colorpicker.panel.border.color')};
border-radius: ${dt('rounded.base')}; border-radius: ${dt('rounded.base')};
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
width: 193px;
height: 166px;
position: absolute;
top: 0;
left: 0;
} }
.p-colorpicker-panel .p-colorpicker-color-handle, .p-colorpicker-panel-inline {
.p-colorpicker-panel .p-colorpicker-hue-handle { box-shadow: none;
position: static;
}
.p-colorpicker-content {
position: relative;
}
.p-colorpicker-color-selector {
width: 150px;
height: 150px;
top: 8px;
left: 8px;
position: absolute;
}
.p-colorpicker-color-background {
width: 100%;
height: 100%;
background: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
}
.p-colorpicker-color-handle {
position: absolute;
top: 0px;
left: 150px;
border-radius: 100%;
width: 10px;
height: 10px;
border-width: 1px;
border-style: solid;
margin: -5px 0 0 -5px;
cursor: pointer;
opacity: 0.85;
border-color: ${dt('colorpicker.handle.color')}; border-color: ${dt('colorpicker.handle.color')};
} }
.p-colorpicker-overlay-panel { .p-colorpicker-hue {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); width: 17px;
height: 150px;
top: 8px;
left: 167px;
position: absolute;
opacity: 0.85;
background: linear-gradient(0deg,
red 0,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
red);
}
.p-colorpicker-hue-handle {
position: absolute;
top: 150px;
left: 0px;
width: 21px;
margin-left: -2px;
margin-top: -5px;
height: 10px;
border-width: 2px;
border-style: solid;
opacity: 0.85;
cursor: pointer;
border-color: ${dt('colorpicker.handle.color')};
} }
` `
}; };