diff --git a/.distignore b/.distignore index b3ee597..9069eba 100644 --- a/.distignore +++ b/.distignore @@ -29,7 +29,6 @@ bower.json bower_components .* - # Test related files phpunit.xml phpunit.xml.dist @@ -42,7 +41,6 @@ codeception.yml phpcs.xml phpcs.xml.dist - # IDE related files .idea *.iml @@ -61,7 +59,6 @@ phpcs.xml.dist *.zip /bin/ - # OS related files .DS_Store .DS_Store? @@ -71,7 +68,6 @@ phpcs.xml.dist ehthumbs.db Thumbs.db - # Action related files .wordpress-org @@ -80,8 +76,7 @@ Thumbs.db *.*.map # Build related files -/assets/js -/assets/css +src /src/js /src/css vendor diff --git a/Gruntfile.js b/Gruntfile.js index b0c0b5f..dc7787c 100644 --- a/Gruntfile.js +++ b/Gruntfile.js @@ -90,4 +90,4 @@ module.exports = function( grunt ) { grunt.registerTask( 'i18n', [ 'addtextdomain', 'checktextdomain', 'makepot' ] ); grunt.registerTask( 'build', [ 'i18n' ] ); -}; \ No newline at end of file +}; diff --git a/assets/src/css/_form.scss b/assets/src/css/_form.scss new file mode 100644 index 0000000..4e0398b --- /dev/null +++ b/assets/src/css/_form.scss @@ -0,0 +1,59 @@ +#insertcodes-form{ + width: 100%; + .field-group{ + border-bottom: 1px solid #ddd; + display: flex; + flex-direction: row; + padding: 1rem; + gap: 0.313rem ; + .field-label{ + display: flex; + width: 100%; + max-width: 11.25rem; + } + label, + strong{ + align-self: center; + } + .field{ + width: 100%; + .description{ + margin-top: 0.313rem; + } + } + .field-submit-btn{ + width: 100%; + } + &.is-last-item{ + border-bottom: none; + a{ + align-self: center; + } + } + &.filed-section{ + flex-direction: column; + gap: 0.625rem; + background: #dddddd; + } + &.field-editor{ + flex-direction: column; + gap: 0.625rem; + .CodeMirror{ + border: 1px solid #ddd; + } + } + } + input[type=text], + input[type=email], + input[type=password], + input[type=number], + input[type=date], + input[type=datetime], + input[type=datetime-local], + input[type=month], + textarea { + width: 100%; + padding: 0.313rem 0.5rem; + border: 1px solid #ddd; + } +} diff --git a/src/css/admin.scss b/assets/src/css/insertcodes-admin.scss similarity index 75% rename from src/css/admin.scss rename to assets/src/css/insertcodes-admin.scss index b4e12ab..4f430fc 100644 --- a/src/css/admin.scss +++ b/assets/src/css/insertcodes-admin.scss @@ -1,21 +1,21 @@ @import "form"; // Page Layouts. -.insert-codes-container{ - .insert-codes__header{} - .insert-codes__body{ +.insertcodes-container{ + .insertcodes__header{} + .insertcodes__body{ display: flex; flex-wrap: nowrap; gap: 1.25rem; h3, h4, p{ margin: 0; } - .insert-codes__content{ + .insertcodes__content{ width: 70%; border: 1px solid #ddd; background: #fff; } - .insert-codes__aside{ + .insertcodes__aside{ width: 30%; .aside__item{ border: 1px solid #ddd; @@ -33,8 +33,8 @@ } @media (max-width: 782px) { flex-direction: column; - .insert-codes__content, - .insert-codes__aside{ + .insertcodes__content, + .insertcodes__aside{ width: 100%; } } diff --git a/assets/src/js/insertcodes-admin.js b/assets/src/js/insertcodes-admin.js new file mode 100644 index 0000000..1922d4c --- /dev/null +++ b/assets/src/js/insertcodes-admin.js @@ -0,0 +1,19 @@ +(function ($) { + 'use strict'; + $(window).on('load', function () { + $.ready.then(function () { + var defaultSettings = wp.codeEditor.defaultSettings ? _.clone(wp.codeEditor.defaultSettings) : {}; + + // HTML Editor. + var htmlSettings = _.extend({}, defaultSettings, { + codemirror: _.extend({}, defaultSettings.codemirror, { + mode: 'htmlmixed' + }) + }); + + wp.codeEditor.initialize($('#insertcodes_header'), htmlSettings); + wp.codeEditor.initialize($('#insertcodes_body'), htmlSettings); + wp.codeEditor.initialize($('#insertcodes_footer'), htmlSettings); + }); + }); +})(jQuery); diff --git a/includes/Admin/Admin.php b/includes/Admin/Admin.php index 39a9025..792d65e 100644 --- a/includes/Admin/Admin.php +++ b/includes/Admin/Admin.php @@ -2,7 +2,7 @@ namespace InsertCodes\Admin; -defined( 'ABSPATH' ) || exit; +defined( 'ABSPATH' ) || exit; // Exit if accessed directly. /** * Class Admin. @@ -99,8 +99,8 @@ public function enqueue_scripts( $hook ) { 'insert-codes_page_insert-codes-settings', ); - wp_register_style( 'insert-codes-admin', INSERT_CODES_URL . 'assets/dist/css/insert-codes-admin.css', array(), '1.0.0' ); - wp_register_script( 'insert-codes-admin', INSERT_CODES_URL . 'assets/dist/js/insert-codes-admin.js', array( 'jquery' ), '1.0.0', true ); + wp_register_style( 'insertcodes-admin', INSERTCODES_URL . 'assets/dist/css/insertcodes-admin.css', array(), INSERTCODES_VERSION ); + wp_register_script( 'insertcodes-admin', INSERTCODES_URL . 'assets/dist/js/insertcodes-admin.js', array( 'jquery' ), INSERTCODES_VERSION, true ); if ( 'toplevel_page_insert-codes' === $hook ) { $settings = wp_enqueue_code_editor( array( 'type' => 'text/html' ) ); @@ -110,11 +110,11 @@ public function enqueue_scripts( $hook ) { return; } - wp_enqueue_script( 'insert-codes-admin' ); + wp_enqueue_script( 'insertcodes-admin' ); } if ( in_array( $hook, $screens, true ) ) { - wp_enqueue_style( 'insert-codes-admin' ); + wp_enqueue_style( 'insertcodes-admin' ); } } } diff --git a/includes/Admin/views/codes.php b/includes/Admin/views/codes.php index 3cd8487..3e7a57b 100644 --- a/includes/Admin/views/codes.php +++ b/includes/Admin/views/codes.php @@ -1,6 +1,6 @@ -