From be146073b9f8af8585ccd9dc17b0a19896925ad4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pawe=C5=82=20Kuna?= <1282324+codecalm@users.noreply.github.com> Date: Tue, 16 May 2023 23:38:55 +0200 Subject: [PATCH] Add new color picker component using `coloris.js` library (#1575) --- .changeset/thin-eagles-mix.md | 5 + gulpfile.js | 2 +- package.json | 11 +- pnpm-lock.yaml | 7 + src/pages/_data/libs.json | 8 +- src/pages/_data/menu.yml | 227 ++++++++++++------------ src/pages/_includes/ui/colorpicker.html | 39 ++++ src/pages/_plugins/jekyll-filters.rb | 4 + src/pages/colorpicker.html | 21 +++ src/scss/_variables.scss | 12 +- src/scss/mixins/_mixins.scss | 9 + src/scss/tabler-vendors.scss | 1 + src/scss/vendor/_coloris.scss | 67 +++++++ 13 files changed, 291 insertions(+), 122 deletions(-) create mode 100644 .changeset/thin-eagles-mix.md create mode 100644 src/pages/_includes/ui/colorpicker.html create mode 100644 src/pages/colorpicker.html create mode 100644 src/scss/vendor/_coloris.scss diff --git a/.changeset/thin-eagles-mix.md b/.changeset/thin-eagles-mix.md new file mode 100644 index 000000000..5b422dbc5 --- /dev/null +++ b/.changeset/thin-eagles-mix.md @@ -0,0 +1,5 @@ +--- +"@tabler/core": patch +--- + +Add new color picker component using `coloris.js` library diff --git a/gulpfile.js b/gulpfile.js index 4e859aca4..28b50ff78 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -448,7 +448,7 @@ gulp.task('copy-libs', (cb) => { files.forEach((file) => { if (!file.match(/^https?/)) { let dirname = path.dirname(file).replace('@', '') - let cmd = `mkdir -p "${distDir}/libs/${dirname}" && cp -r node_modules/${dirname}/* ${distDir}/libs/${dirname}` + let cmd = `mkdir -p "${distDir}/libs/${dirname}" && cp -r node_modules/${path.dirname(file)}/* ${distDir}/libs/${dirname}` cp.exec(cmd) } diff --git a/package.json b/package.json index a0ef25e0f..fea31eabb 100644 --- a/package.json +++ b/package.json @@ -131,6 +131,7 @@ ] }, "devDependencies": { + "@melloware/coloris": "^0.19.1", "@babel/core": "^7.21.8", "@babel/preset-env": "^7.21.5", "@changesets/cli": "^2.26.1", @@ -179,13 +180,13 @@ "rollup-plugin-babel": "^4.4.0", "rollup-plugin-cleanup": "^3.2.1", "sass": "^1.62.1", + "star-rating.js": "^4.3.0", "tinymce": "^6.4.2", "tom-select": "^2.2.2", "vinyl-buffer": "^1.0.1", "vinyl-source-stream": "^2.0.0", "yaml": "^2.2.2", - "yargs": "^17.7.2", - "star-rating.js": "^4.3.0" + "yargs": "^17.7.2" }, "dependencies": { "@popperjs/core": "^2.11.7", @@ -206,11 +207,15 @@ "litepicker": "^2.0.12", "nouislider": "^15.7.0", "plyr": "^3.7.8", + "star-rating.js": "^4.3.0", "tinymce": "^6.4.2", "tom-select": "^2.2.2", - "star-rating.js": "^4.3.0" + "@melloware/coloris": "^0.19.1" }, "peerDependenciesMeta": { + "@melloware/coloris": { + "optional": true + }, "apexcharts": { "optional": true }, diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index e0de29470..a129f00f5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -21,6 +21,9 @@ devDependencies: '@changesets/cli': specifier: ^2.26.1 version: 2.26.1 + '@melloware/coloris': + specifier: ^0.19.1 + version: 0.19.1 '@rollup/plugin-commonjs': specifier: ^24.1.0 version: 24.1.0(rollup@2.79.1) @@ -1598,6 +1601,10 @@ packages: read-yaml-file: 1.1.0 dev: true + /@melloware/coloris@0.19.1: + resolution: {integrity: sha512-7C1ue136iQw3UCLy5GoCxXR+u4F1eB0MMmpAwUH2okdQwmdjVNd+OmIQBKVDbM78lMFFJxzvtilWkYV/l8/4rw==} + dev: true + /@nodelib/fs.scandir@2.1.5: resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} engines: {node: '>= 8'} diff --git a/src/pages/_data/libs.json b/src/pages/_data/libs.json index 56bf901e0..6826603bc 100644 --- a/src/pages/_data/libs.json +++ b/src/pages/_data/libs.json @@ -20,16 +20,18 @@ "jsvectormap-world": "jsvectormap/dist/maps/world.js", "jsvectormap-world-merc": "jsvectormap/dist/maps/world-merc.js", "fslightbox": "fslightbox/index.js", - "tinymce" :"tinymce/tinymce.min.js", + "tinymce": "tinymce/tinymce.min.js", "plyr": "plyr/dist/plyr.min.js", "dropzone": "dropzone/dist/dropzone-min.js", - "star-rating.js": "star-rating.js/dist/star-rating.min.js" + "star-rating.js": "star-rating.js/dist/star-rating.min.js", + "coloris.js": "@melloware/coloris/dist/umd/coloris.min.js" }, "css": { "mapbox": "https://api.mapbox.com/mapbox-gl-js/v1.8.0/mapbox-gl.css", "dropzone": "dropzone/dist/dropzone.css", "plyr": "plyr/dist/plyr.css", - "star-rating.js": "star-rating.js/dist/star-rating.min.css" + "star-rating.js": "star-rating.js/dist/star-rating.min.css", + "coloris.js": "@melloware/coloris/dist/coloris.min.css" }, "js-copy": { "tinymce" :"tinymce/*" diff --git a/src/pages/_data/menu.yml b/src/pages/_data/menu.yml index 80c497b15..398cad2d0 100644 --- a/src/pages/_data/menu.yml +++ b/src/pages/_data/menu.yml @@ -11,117 +11,6 @@ base: accordion: title: Accordion url: accordion.html - blank: - title: Blank page - url: blank.html - badges: - url: badges.html - title: Badges - badge: New - buttons: - url: buttons.html - title: Buttons - cards: - title: Cards - badge: New - children: - base: - url: cards.html - title: Sample cards - actions: - url: card-actions.html - title: Card actions - badge: New - masonry: - url: cards-masonry.html - title: Cards Masonry - colors: - url: colors.html - title: Colors - datagrid: - url: datagrid.html - title: Data grid - badge: New - datatables: - url: datatables.html - title: Datatables - badge: New - dropdowns: - url: dropdowns.html - title: Dropdowns - modals: - url: modals.html - title: Modals - maps: - url: maps.html - title: Maps - map-fullsize: - url: map-fullsize.html - title: Map fullsize - maps-vector: - url: maps-vector.html - title: Vector maps - badge: New - navigation: - url: navigation.html - title: Navigation - charts: - url: charts.html - title: Charts - pagination: - url: pagination.html - title: Pagination - icon: pie-chart - placeholder: - url: placeholder.html - title: Placeholder - steps: - url: steps.html - title: Steps - badge: New - stars-rating: - title: Stars rating - url: stars-rating.html - badge: New - tabs: - url: tabs.html - title: Tabs - tables: - url: tables.html - title: Tables - carousel: - title: Carousel - url: carousel.html - badge: New - lists: - title: Lists - url: lists.html - typography: - title: Typography - url: typography.html - offcanvas: - title: Offcanvas - url: offcanvas.html - markdown: - title: Markdown - url: markdown.html - dropzone: - title: Dropzone - url: dropzone.html - badge: New - lightbox: - title: Lightbox - url: lightbox.html - badge: New - tinymce: - title: TinyMCE - url: tinymce.html - badge: New - plyr: - title: Inline player - badge: New - url: inline-player.html - authentication: title: Authentication children: @@ -149,10 +38,61 @@ base: auth-lock: title: Lock screen url: auth-lock.html - + blank: + title: Blank page + url: blank.html + badges: + url: badges.html + title: Badges + badge: New + buttons: + url: buttons.html + title: Buttons + cards: + title: Cards + badge: New + children: + base: + url: cards.html + title: Sample cards + actions: + url: card-actions.html + title: Card actions + badge: New + masonry: + url: cards-masonry.html + title: Cards Masonry + carousel: + title: Carousel + url: carousel.html + badge: New + charts: + url: charts.html + title: Charts + colors: + url: colors.html + title: Colors + colorpicker: + url: colorpicker.html + title: Color picker + badge: New + datagrid: + url: datagrid.html + title: Data grid + badge: New + datatables: + url: datatables.html + title: Datatables + badge: New + dropdowns: + url: dropdowns.html + title: Dropdowns + dropzone: + title: Dropzone + url: dropzone.html + badge: New error: title: Error pages - icon: file-minus children: 404: url: error-404.html @@ -163,6 +103,67 @@ base: maintenance: url: error-maintenance.html title: Maintenance page + plyr: + title: Inline player + badge: New + url: inline-player.html + lightbox: + title: Lightbox + url: lightbox.html + badge: New + lists: + title: Lists + url: lists.html + modals: + url: modals.html + title: Modal + maps: + url: maps.html + title: Map + map-fullsize: + url: map-fullsize.html + title: Map fullsize + maps-vector: + url: maps-vector.html + title: Map vector + badge: New + markdown: + title: Markdown + url: markdown.html + navigation: + url: navigation.html + title: Navigation + offcanvas: + title: Offcanvas + url: offcanvas.html + pagination: + url: pagination.html + title: Pagination + icon: pie-chart + placeholder: + url: placeholder.html + title: Placeholder + steps: + url: steps.html + title: Steps + badge: New + stars-rating: + title: Stars rating + url: stars-rating.html + badge: New + tabs: + url: tabs.html + title: Tabs + tables: + url: tables.html + title: Tables + typography: + title: Typography + url: typography.html + tinymce: + title: TinyMCE + url: tinymce.html + badge: New forms: url: form-elements.html diff --git a/src/pages/_includes/ui/colorpicker.html b/src/pages/_includes/ui/colorpicker.html new file mode 100644 index 000000000..fcdc834ad --- /dev/null +++ b/src/pages/_includes/ui/colorpicker.html @@ -0,0 +1,39 @@ +{% assign id = include.id | default: 'default' %} +{% assign alpha = include.alpha | default: false %} +{% assign format = include.format | default: false %} + + + +{% capture_global scripts %} + +{% endcapture_global %} diff --git a/src/pages/_plugins/jekyll-filters.rb b/src/pages/_plugins/jekyll-filters.rb index 3a2c59e44..3a6f0b0ea 100644 --- a/src/pages/_plugins/jekyll-filters.rb +++ b/src/pages/_plugins/jekyll-filters.rb @@ -119,6 +119,10 @@ module Jekyll def htmlbeautifier(output) HtmlBeautifier.beautify output end + + def hex_to_rgb(hex) + hex.match(/^#(..)(..)(..)$/).captures.map(&:hex) + end end end diff --git a/src/pages/colorpicker.html b/src/pages/colorpicker.html new file mode 100644 index 000000000..a83f89cc9 --- /dev/null +++ b/src/pages/colorpicker.html @@ -0,0 +1,21 @@ +--- +title: Color picker +page-header: Color picker +menu: base.colorpicker +libs: coloris.js +--- + +{% assign colors = "#206bc4,#45aaf2,#6574cd,#a55eea,#f66d9b,#fa4654,#fd9644,#f1c40f,#7bd235,#5eba00,#2bcbba,#17a2b8" | split: "," %} + +
+
+

Basic

+
+ {% for color in colors %} +
+
{% include ui/colorpicker.html value=color id=forloop.index format="hex" %}
+
+ {% endfor %} +
+
+
diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index c8191a458..9c5ce5adf 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -457,6 +457,14 @@ $shadows: ( $box-shadow-inset: 0 0 transparent !default; +// Focus +$focus-ring-width: 0.25rem !default; +$focus-ring-opacity: 0.25 !default; +$focus-ring-color: rgba(var(--#{$prefix}primary-rgb), $focus-ring-opacity) !default; +$focus-ring-blur: 0 !default; +$focus-ring-border-color: rgba(var(--#{$prefix}primary-rgb), 50%) !default; +$focus-ring-box-shadow: 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default; + // Transitions $transition-time: 0.3s !default; @@ -529,8 +537,8 @@ $input-height: null !default; $input-height-sm: null !default; $input-height-lg: null !default; $input-border-radius: var(--#{$prefix}border-radius) !default; -$input-color: inherit !default; -$input-focus-color: inherit !default; +$input-color: var(--#{$prefix}body-color) !default; +$input-focus-color: var(--#{$prefix}body-color) !default; // Buttons $btn-disabled-opacity: 0.4 !default; diff --git a/src/scss/mixins/_mixins.scss b/src/scss/mixins/_mixins.scss index 70400a317..11a6cd029 100644 --- a/src/scss/mixins/_mixins.scss +++ b/src/scss/mixins/_mixins.scss @@ -56,4 +56,13 @@ display: flex; flex-wrap: wrap; gap: var(--#{$prefix}list-gap); +} + +@mixin focus-ring($show-border: false) { + outline: 0; + box-shadow: $focus-ring-box-shadow; + + @if($show-border) { + border-color: $focus-ring-border-color; + } } \ No newline at end of file diff --git a/src/scss/tabler-vendors.scss b/src/scss/tabler-vendors.scss index 6acf7d2fe..d9ec640c8 100644 --- a/src/scss/tabler-vendors.scss +++ b/src/scss/tabler-vendors.scss @@ -10,3 +10,4 @@ @import "vendor/plyr"; @import "vendor/tinymce"; @import "vendor/stars-rating"; +@import "vendor/coloris"; diff --git a/src/scss/vendor/_coloris.scss b/src/scss/vendor/_coloris.scss new file mode 100644 index 000000000..66c56671d --- /dev/null +++ b/src/scss/vendor/_coloris.scss @@ -0,0 +1,67 @@ +.clr-picker { + box-shadow: var(--#{$prefix}shadow-dropdown); + background-color: var(--#{$prefix}bg-surface); +} + +input.clr-color { + border-radius: var(--#{$prefix}border-radius); + color: var(--#{$prefix}body-color); + border-color: var(--#{$prefix}border-color); + background: transparent; + + &:focus { + @include focus-ring(true); + } +} + +.clr-swatches { + button { + border-radius: var(--#{$prefix}border-radius); + padding: 0 2px 4px 2px; + + &:focus { + @include focus-ring; + } + } +} + +.clr-preview { + border-radius: var(--#{$prefix}border-radius); + overflow: visible; + + button, + &:before, + &:after { + border-radius: var(--#{$prefix}border-radius); + } + + button { + &:focus { + @include focus-ring; + } + } +} + +.clr-field { + display: block; + + button { + width: 1.5rem; + height: 1.5rem; + left: 6px; + right: auto; + border-radius: var(--#{$prefix}border-radius); + + &:after { + box-shadow: inset 0 0 0 1px var(--#{$prefix}border-color-translucent); + } + + &:focus { + @include focus-ring; + } + } + + input { + padding-left: 2.5rem; + } +}