From 4e4f88a1ac6c6ccf7b77dd3d067163352ed5ca50 Mon Sep 17 00:00:00 2001 From: Awilum Date: Sat, 14 Mar 2020 20:35:42 +0300 Subject: [PATCH] refactor(form-plugin): total form plugin refactor #414 --- site/plugins/form/README.md | 4 +- .../form/assets/src/flatpickr/flatpickr.css | 34 +++++++ site/plugins/form/assets/src/form.css | 20 ++++ .../plugins/form/assets/src/select/select.css | 92 +++++++++++++++++++ site/plugins/form/assets/src/tabs/tabs.css | 38 ++++++++ .../form/assets/src/trumbowyg/trumbowyg.css | 51 ++++++++++ site/plugins/form/composer.json | 6 +- site/plugins/form/gulpfile.js | 69 +++----------- site/plugins/form/package.json | 14 ++- site/plugins/form/plugin.yaml | 10 +- site/plugins/form/tailwind.config.js | 47 ++++++++++ 11 files changed, 309 insertions(+), 76 deletions(-) create mode 100644 site/plugins/form/assets/src/flatpickr/flatpickr.css create mode 100644 site/plugins/form/assets/src/form.css create mode 100644 site/plugins/form/assets/src/select/select.css create mode 100644 site/plugins/form/assets/src/tabs/tabs.css create mode 100644 site/plugins/form/assets/src/trumbowyg/trumbowyg.css create mode 100644 site/plugins/form/tailwind.config.js diff --git a/site/plugins/form/README.md b/site/plugins/form/README.md index b9024a96..a4182632 100755 --- a/site/plugins/form/README.md +++ b/site/plugins/form/README.md @@ -1,8 +1,8 @@ # Form Plugin for [Flextype](http://flextype.org/) ![MIT License](https://img.shields.io/badge/license-MIT-blue.svg?style=flat-square) -Form Plugin for Flextype. +Form Plugin to manage user forms for Flextype. ## LICENSE -[The MIT License (MIT)](https://github.com/flextype/flextype/blob/master/LICENSE.txt) +[The MIT License (MIT)](https://github.com/flextype-plugins/form/blob/master/LICENSE.txt) Copyright (c) 2018-2020 [Sergey Romanenko](https://github.com/Awilum) diff --git a/site/plugins/form/assets/src/flatpickr/flatpickr.css b/site/plugins/form/assets/src/flatpickr/flatpickr.css new file mode 100644 index 00000000..1b33e4a4 --- /dev/null +++ b/site/plugins/form/assets/src/flatpickr/flatpickr.css @@ -0,0 +1,34 @@ +/* purgecss start ignore */ +.input-file-trigger { + display: block; + font-size: 1em; + cursor: pointer; + outline: none; +} + +.input-file { + position: absolute; + top: 0; + left: 0; + width: 100%; + opacity: 0; + padding: 0; + cursor: pointer; + height: 37px; +} + +.file-return { + margin: 0; +} + +.file-return { + font-style: normal; + font-weight: normal; + font-size: .9em; +} + +.file-return:not(:empty):before { + font-style: normal; + font-weight: normal; +} +/* purgecss end ignore */ diff --git a/site/plugins/form/assets/src/form.css b/site/plugins/form/assets/src/form.css new file mode 100644 index 00000000..b98d2d3d --- /dev/null +++ b/site/plugins/form/assets/src/form.css @@ -0,0 +1,20 @@ +/** + * ADMIN PANEL + */ + +@import 'tailwindcss/base'; + +/* Base */ +@import 'base/variables'; +@import 'base/common'; +@import 'base/content'; +@import 'base/icons'; + +/* Vendor modules */ +@import 'modules/tabs'; +@import 'modules/select2'; +@import 'modules/trumbowyg'; +@import 'modules/flatpickr'; + +@import 'tailwindcss/components'; +@import 'tailwindcss/utilities'; diff --git a/site/plugins/form/assets/src/select/select.css b/site/plugins/form/assets/src/select/select.css new file mode 100644 index 00000000..e91600b3 --- /dev/null +++ b/site/plugins/form/assets/src/select/select.css @@ -0,0 +1,92 @@ +/* purgecss start ignore */ +input[type="search"] { + -webkit-appearance: textfield; +} + +input[type="search"]::-webkit-search-cancel-button, +input[type="search"]::-webkit-search-decoration { + -webkit-appearance:none; +} + +.select2-container +{ + @apply outline-none block; +} + +.select2-dropdown +{ + @apply w-full rounded outline-none; +} + +.select2-container--default .select2-selection--multiple, +.select2-container--default .select2-selection--single +{ + @apply px-2 py-2 outline-none rounded h-auto; +} + +.select2-container--default .select2-results__option--highlighted[aria-selected] +{ + @apply bg-gray-100 text-dark; +} + +.select2-container--default .select2-search--dropdown .select2-search__field +{ + @apply outline-none; +} + +.select2-container--default .select2-selection--single .select2-selection__rendered +{ + line-height: 21px!important; + + @apply p-0 h-auto; +} + +.select2-container--default .select2-selection--single .select2-selection__arrow +{ + height: 37px; +} + +.select2-container--default .select2-selection--multiple, +.select2-container--default .select2-selection--single { + min-height: 37px; +} + +.select2-container--open .select2-dropdown--above, +.select2-container--default.select2-container--open.select2-container--above .select2-selection--multiple, +.select2-container--default.select2-container--open.select2-container--above .select2-selection--single +{ + @apply border-dark; +} + +.select2-selection.select2-selection--multiple +{ + @apply p-0 pt-px; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice +{ + @apply border-dark bg-dark text-white opacity-90 rounded; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove +{ + margin-right: 5px; + padding-right: 5px; + @apply border-gray-900 border-r border-solid; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice:hover +{ + @apply border-dark bg-dark text-white opacity-100; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove +{ + @apply opacity-90 text-white; +} + +.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover +{ + @apply opacity-100 text-white; +} +/* purgecss end ignore */ diff --git a/site/plugins/form/assets/src/tabs/tabs.css b/site/plugins/form/assets/src/tabs/tabs.css new file mode 100644 index 00000000..1e784aae --- /dev/null +++ b/site/plugins/form/assets/src/tabs/tabs.css @@ -0,0 +1,38 @@ +.tabs__nav > div +{ + @apply rounded border border-solid border-dark text-white bg-dark cursor-pointer mb-6; +} + +.tabs__nav > div a:first-of-type +{ + @apply rounded-l; +} + +.tabs__nav > div a:last-of-type +{ + @apply rounded-r; +} + +.tabs__content +{ + @apply hidden rounded; +} + +.tabs__content--active +{ + @apply block; +} + +.tabs__nav__link +{ + flex-basis: 0; + flex-grow: 1; + + @apply block text-white text-center opacity-80 py-2; +} + +.tabs__nav__link:hover, +.tabs__nav__link--active +{ + @apply bg-dark-muted opacity-100; +} diff --git a/site/plugins/form/assets/src/trumbowyg/trumbowyg.css b/site/plugins/form/assets/src/trumbowyg/trumbowyg.css new file mode 100644 index 00000000..3661654c --- /dev/null +++ b/site/plugins/form/assets/src/trumbowyg/trumbowyg.css @@ -0,0 +1,51 @@ +/* purgecss start ignore */ +.trumbowyg-button-pane +{ + @apply bg-white border-b-0 rounded; +} + +.trumbowyg-button-pane::after +{ + @apply bg-gray-600; +} + +.trumbowyg-box, +.trumbowyg-editor +{ + @apply border-gray-600 m-0 rounded; +} + +.trumbowyg-button-pane .trumbowyg-open-dropdown::after, +.trumbowyg-button-pane button > svg +{ + color: #6c6c6c; + + fill: #6c6c6c; +} + +.trumbowyg-button-pane .trumbowyg-open-dropdown:hover::after, +.trumbowyg-viewHTML-button.trumbowyg-not-disable:hover svg, +.trumbowyg-button-pane button:hover > svg +{ + color: black; + + fill: black; +} + +.trumbowyg-button-pane button.trumbowyg-active > svg +{ + color: black; + + fill: black; +} + +.trumbowyg-button-pane .trumbowyg-button-group::after +{ + @apply bg-white; +} + +.trumbowyg-button-pane .trumbowyg-button-group.trumbowyg-right::after +{ + @apply w-0 m-0 bg-white; +} +/* purgecss end ignore */ diff --git a/site/plugins/form/composer.json b/site/plugins/form/composer.json index f56d327f..b8f3f03e 100644 --- a/site/plugins/form/composer.json +++ b/site/plugins/form/composer.json @@ -1,14 +1,14 @@ { "name": "flextype-plugins/form", "type": "project", - "description": "Form plugin for Flextype", + "description": "Form Plugin to manage user forms for Flextype.", "keywords": ["form", "plugin", "flextype", "php", "html"], - "homepage": "https://github.com/flextype", + "homepage": "https://github.com/flextype-plugins/form", "license": "MIT", "authors": [ { "name": "Sergey Romanenko", - "email": "hello@romanenko.digital", + "email": "support@flextype.org", "homepage": "http://digital.flextype.org" } ], diff --git a/site/plugins/form/gulpfile.js b/site/plugins/form/gulpfile.js index 0a040e1f..de34d4b8 100644 --- a/site/plugins/form/gulpfile.js +++ b/site/plugins/form/gulpfile.js @@ -14,22 +14,12 @@ const tailwindConfig = "tailwind.config.js"; // Select2 'node_modules/select2/dist/css/select2.min.css', - // Swal2 - 'node_modules/sweetalert2/dist/sweetalert2.min.css', - - // AnimateCSS - 'node_modules/animate.css/animate.min.css', - // Flatpickr 'node_modules/flatpickr/dist/flatpickr.min.css', // Trumbowyg 'node_modules/trumbowyg/dist/ui/trumbowyg.min.css', - 'node_modules/trumbowyg/dist/plugins/table/ui/trumbowyg.table.css', - - // CodeMirror - 'node_modules/codemirror/lib/codemirror.css', - 'node_modules/codemirror/theme/elegant.css']) + 'node_modules/trumbowyg/dist/plugins/table/ui/trumbowyg.table.css']) .pipe(autoprefixer({ overrideBrowserslist: [ "last 1 version" @@ -45,7 +35,7 @@ const tailwindConfig = "tailwind.config.js"; /** * Task: gulp admin-panel-css */ -gulp.task("admin-panel-css", function() { +gulp.task('form-css', function() { const atimport = require("postcss-import"); const postcss = require("gulp-postcss"); const tailwindcss = require("tailwindcss"); @@ -57,12 +47,12 @@ gulp.task("admin-panel-css", function() { return gulp .src([ - // Admin Panel CSS - 'assets/src/admin-panel.css']) + // Form CSS + 'assets/src/form.css']) .pipe(postcss([atimport(), tailwindcss(tailwindConfig)])) .pipe( purgecss({ - content: ["../form/templates/**/*.html", "templates/**/*.html"], + content: ["templates/**/*.html"], extractors: [ { extractor: TailwindExtractor = (content) => { @@ -80,7 +70,7 @@ gulp.task("admin-panel-css", function() { cascade: false })) .pipe(csso()) - .pipe(concat('admin-panel-build.min.css')) + .pipe(concat('form-build.min.css')) .pipe(gulp.dest("assets/dist/css/")); }); @@ -91,49 +81,20 @@ gulp.task("admin-panel-css", function() { const sourcemaps = require('gulp-sourcemaps'); const concat = require('gulp-concat'); - return gulp.src([ // jQuery - 'node_modules/jquery/dist/jquery.min.js', - + return gulp.src([ // Select2 'node_modules/select2/dist/js/select2.min.js', - // Swal2 - 'node_modules/sweetalert2/dist/sweetalert2.min.js', - - // ParsleyJS Form Validatator - 'node_modules/parsleyjs/dist/parsley.min.js', - - // SpeakingURL - 'node_modules/speakingurl/speakingurl.min.js', - - // Popper - 'node_modules/popper.js/dist/umd/popper.min.js', - - // Tippy - 'node_modules/tippy.js/dist/tippy-bundle.iife.min.js', - - // Clipboard - 'node_modules/clipboard/dist/clipboard.min.js', - // Flatpickr 'node_modules/flatpickr/dist/flatpickr.min.js', // Trumbowyg 'node_modules/trumbowyg/dist/trumbowyg.min.js', 'node_modules/trumbowyg/dist/plugins/noembed/trumbowyg.noembed.min.js', - 'node_modules/trumbowyg/dist/plugins/table/trumbowyg.table.min.js', - - // CodeMirror - 'node_modules/codemirror/lib/codemirror.js', - 'node_modules/codemirror/mode/htmlmixed/htmlmixed.js', - 'node_modules/codemirror/mode/xml/xml.js', - 'node_modules/codemirror/mode/javascript/javascript.js', - 'node_modules/codemirror/mode/php/php.js', - 'node_modules/codemirror/mode/clike/clike.js', - 'node_modules/codemirror/mode/yaml/yaml.js' + 'node_modules/trumbowyg/dist/plugins/table/trumbowyg.table.min.js' ]) .pipe(sourcemaps.init()) - .pipe(concat('admin-panel-build.min.js')) + .pipe(concat('form-build.min.js')) .pipe(sourcemaps.write()) .pipe(gulp.dest('assets/dist/js/')); }); @@ -162,24 +123,16 @@ gulp.task('flatpickr-langs', function(){ .pipe(gulp.dest('assets/dist/lang/flatpickr')); }); -/** - * Task: gulp fontawesome-icons - */ -gulp.task('fontawesome-icons', function(){ - return gulp.src(['node_modules/@fortawesome/fontawesome-free/svgs/**/*']) - .pipe(gulp.dest('assets/dist/fontawesome/svgs')); -}); - /** * Task: gulp default */ gulp.task('default', gulp.series( - 'fontawesome-icons', 'trumbowyg-fonts', 'trumbowyg-langs', 'flatpickr-langs', 'vendor-css', 'admin-panel-css', 'vendor-js' + 'trumbowyg-fonts', 'trumbowyg-langs', 'flatpickr-langs', 'vendor-css', 'form-css', 'vendor-js' )); /** * Task: gulp watch */ gulp.task('watch', function () { - gulp.watch(["../form/templates/**/*.html", "templates/**/*.html", "assets/src/"], gulp.series('vendor-css', 'admin-panel-css')); + gulp.watch(["templates/**/*.html", "assets/src/"], gulp.series('vendor-css', 'form-css')); }); diff --git a/site/plugins/form/package.json b/site/plugins/form/package.json index 4fe647e7..19c3921c 100644 --- a/site/plugins/form/package.json +++ b/site/plugins/form/package.json @@ -1,7 +1,7 @@ { "name": "Form", - "version": "0.9.7", - "description": "Form plugin for Flextype", + "version": "1.0.0", + "description": "Form Plugin to manage user forms for Flextype.", "homepage": "http://flextype.org", "author": "Sergey Romanenko", "license": "MIT", @@ -11,10 +11,12 @@ "flat cms", "flatfile cms", "css", - "html" + "form", + "forms", + "plugin" ], "bugs": { - "url": "https://github.com/flextype/flextype/issues" + "url": "https://github.com/flextype-plugins/form/issues" }, "dependencies": { "@fullhuman/postcss-purgecss": "^2.0.6", @@ -32,11 +34,7 @@ "parsleyjs": "^2.9.2", "postcss-import": "^12.0.1", "select2": "^4.0.13", - "speakingurl": "^14.0.1", - "sweetalert2": "^9.7.2", "tailwindcss": "^1.2.0", - "tippy.js": "^5.2.1", - "clipboard": "~2.0.4", "trumbowyg": "~2.21.0" } } diff --git a/site/plugins/form/plugin.yaml b/site/plugins/form/plugin.yaml index 516b5ce8..34bfd389 100755 --- a/site/plugins/form/plugin.yaml +++ b/site/plugins/form/plugin.yaml @@ -1,11 +1,11 @@ name: Form -version: 0.9.7 -description: Form plugin for Flextype +version: 1.0.0 +description: Form Plugin to manage user forms for Flextype. icon: fas fa-check-circle author: name: Sergey Romanenko - email: hello@romanenko.digital + email: support@flextype.org url: http://flextype.org -homepage: https://github.com/flextype -bugs: https://github.com/flextype/issues +homepage: https://github.com/flextype-plugins/form +bugs: https://github.com/flextype-plugins/form/issues license: MIT diff --git a/site/plugins/form/tailwind.config.js b/site/plugins/form/tailwind.config.js new file mode 100644 index 00000000..89f79407 --- /dev/null +++ b/site/plugins/form/tailwind.config.js @@ -0,0 +1,47 @@ +module.exports = { + separator: ':', + theme: { + colors: { + black: '#000000', + white: '#ffffff', + dark: "#16171a", + "dark-muted": "#292b30", + red: '#E65354', + transparent: 'transparent', + gray: { + '000': '#f9f9f9', + '100': '#ededed', + '200': '#e1e1e1', + '300': '#d3d3d3', + '400': '#c4c4c4', + '500': '#b3b3b3', + '600': '#a0a0a0', + '700': '#898989', + '800': '#6c6c6c', + '900': '#3f3f3f', + }, + }, + opacity: { + '0': '0', + '25': '.25', + '50': '.5', + '75': '.75', + '10': '.1', + '20': '.2', + '30': '.3', + '40': '.4', + '50': '.5', + '60': '.6', + '70': '.7', + '80': '.8', + '90': '.9', + '100': '1' + }, + borderColor: theme => ({ + ...theme('colors'), + default: theme('colors.black', 'currentColor'), + }), + }, + variants: {}, + plugins: [], +}