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>
<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';
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 }],
panel: ({ instance, props }) => [
'p-colorpicker-panel',
{
'p-colorpicker-overlay-panel': !props.inline,
'p-colorpicker-panel-inline': props.inline,
'p-disabled': props.disabled,
'p-ripple-disabled': instance.$primevue.config.ripple === false
}
],
content: 'p-colorpicker-content',
selector: 'p-colorpicker-color-selector',
color: 'p-colorpicker-color',
color: 'p-colorpicker-color-background',
colorHandle: 'p-colorpicker-color-handle',
hue: 'p-colorpicker-hue',
hueHandle: 'p-colorpicker-hue-handle'

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

@ -1,18 +1,12 @@
export default {
css: ({ dt }) => `
.p-colorpicker-color {
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 {
display: inline-block;
position: relative;
}
.p-colorpicker-hue {
background: linear-gradient(0deg,
red 0,
#ff0 17%,
#0f0 33%,
#0ff 50%,
#00f 67%,
#f0f 83%,
red);
.p-colorpicker-dragging {
cursor: pointer;
}
.p-colorpicker-preview {
@ -23,6 +17,7 @@ export default {
border-radius: ${dt('rounded.base')};
transition: outline-color ${dt('transition.duration')};
outline-color: transparent;
cursor: pointer;
}
.p-colorpicker-preview:enabled:focus-visible {
@ -34,15 +29,82 @@ export default {
background: ${dt('colorpicker.panel.background')};
border: 1px solid ${dt('colorpicker.panel.border.color')};
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 .p-colorpicker-hue-handle {
.p-colorpicker-panel-inline {
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')};
}
.p-colorpicker-overlay-panel {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
.p-colorpicker-hue {
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')};
}
`
};