mirror/php-flextype
1
0
Fork 0
mirror of https://github.com/flextype/flextype.git synced 2025-08-13 16:44:36 +02:00
Code Issues Releases Wiki Activity

refactor(form-plugin): total form plugin refactor #414

Browse Source
This commit is contained in:
Awilum
2020-03-14 20:35:42 +03:00
parent ddbdb622dd
commit 4e4f88a1ac
11 changed files with 309 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
site/plugins/form/README.md
View File

@@ -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)

34
site/plugins/form/assets/src/flatpickr/flatpickr.css Normal file
View File

@@ -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 */

20
site/plugins/form/assets/src/form.css Normal file
View File

@@ -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';

92
site/plugins/form/assets/src/select/select.css Normal file
View File

@@ -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 */

38
site/plugins/form/assets/src/tabs/tabs.css Normal file
View File

@@ -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;
}

51
site/plugins/form/assets/src/trumbowyg/trumbowyg.css Normal file
View File

@@ -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 */

6
site/plugins/form/composer.json
View File

@@ -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"
}
],

69
site/plugins/form/gulpfile.js
View File

@@ -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'));
});

14
site/plugins/form/package.json
View File

@@ -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"
}
}

10
site/plugins/form/plugin.yaml
View File

@@ -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

47
site/plugins/form/tailwind.config.js Normal file
View File

@@ -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: [],
}