From 1a921fcd1afd361ed9034556b0061ba86f5fb863 Mon Sep 17 00:00:00 2001 From: Stephen Cameron Date: Wed, 15 Apr 2020 19:06:16 +0200 Subject: [PATCH] Done #3498 @9.5 --- .../mu-plugins/cube/src/Elementor/Setup.php | 1 + .../src/Elementor/Widgets/DynamicTable.php | 17 +-- .../cube/src/Elementor/Widgets/FancyList.php | 46 +++++++ .../src/Elementor/Widgets/JustifiedList.php | 112 ++++++++++++++++++ wp-content/themes/CCV/app/setup.php | 52 ++++++-- .../resources/assets/images/table-tick.svg | 6 +- .../assets/styles/common/global.styl | 8 +- .../assets/styles/common/layout.styl | 15 ++- .../assets/styles/components/headings.styl | 4 +- .../assets/styles/widgets/fancy-list.styl | 61 ++++++++++ .../assets/styles/widgets/justified-list.styl | 65 ++++++++++ .../views/widgets/fancy-list.blade.php | 2 +- .../views/widgets/justified-list.blade.php | 15 +++ wp-content/themes/CCV/tailwind.config.js | 1 - wp-content/themes/CCV/webpack.mix.js | 9 ++ 15 files changed, 380 insertions(+), 34 deletions(-) create mode 100644 wp-content/mu-plugins/cube/src/Elementor/Widgets/JustifiedList.php create mode 100644 wp-content/themes/CCV/resources/assets/styles/widgets/fancy-list.styl create mode 100644 wp-content/themes/CCV/resources/assets/styles/widgets/justified-list.styl create mode 100644 wp-content/themes/CCV/resources/views/widgets/justified-list.blade.php diff --git a/wp-content/mu-plugins/cube/src/Elementor/Setup.php b/wp-content/mu-plugins/cube/src/Elementor/Setup.php index 11e02b0..273d259 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Setup.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Setup.php @@ -43,6 +43,7 @@ class Setup { $elementor->widgets_manager->register_widget_type( new Widgets\ScientificNews() ); $elementor->widgets_manager->register_widget_type( new Widgets\DynamicTable() ); $elementor->widgets_manager->register_widget_type( new Widgets\FancyList() ); + $elementor->widgets_manager->register_widget_type( new Widgets\JustifiedList() ); } protected function _customise_sections() { diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/DynamicTable.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/DynamicTable.php index 31ea24b..befdb74 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/DynamicTable.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/DynamicTable.php @@ -87,27 +87,28 @@ class DynamicTable extends Widget_Base { 'type' => Controls_Manager::SELECT, 'options' => [ '' => __( 'Défaut', 'cube' ), + 'bg-white' => __( 'Blanc', 'cube' ), 'bg-light' => __( 'Gris clair', 'cube' ), ], ], [ - 'name' => 'text_align', - 'label' => __( 'Alignement du texte', 'cube' ), + 'name' => 'font_style', + 'label' => __( 'Style de police', 'cube' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => __( 'Défaut', 'cube' ), - 'text-left' => __( 'Gauche', 'cube' ), - 'text-center' => __( 'Centré', 'cube' ), - 'text-right' => __( 'Droit', 'cube' ), + 'font-bold' => __( 'Gras', 'cube' ), ], ], [ - 'name' => 'font_style', - 'label' => __( 'Style de police', 'cube' ), + 'name' => 'text_align', + 'label' => __( 'Alignement du texte', 'cube' ), 'type' => Controls_Manager::SELECT, 'options' => [ '' => __( 'Défaut', 'cube' ), - 'font-bold' => __( 'Gras', 'cube' ), + 'text-left' => __( 'Gauche', 'cube' ), + 'text-center' => __( 'Centré', 'cube' ), + 'text-right' => __( 'Droit', 'cube' ), ], ], ], diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/FancyList.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/FancyList.php index 90925d4..dbd64a8 100644 --- a/wp-content/mu-plugins/cube/src/Elementor/Widgets/FancyList.php +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/FancyList.php @@ -4,6 +4,7 @@ namespace Cube\Elementor\Widgets; use Elementor\Widget_Base; use Elementor\Controls_Manager; +use Elementor\Core\Schemes; use function Roots\view; @@ -53,6 +54,7 @@ class FancyList extends Widget_Base { 'section_content', [ 'label' => __( 'Liste formatée', 'cube' ), + 'tab' => Controls_Manager::TAB_CONTENT ] ); @@ -84,6 +86,50 @@ class FancyList extends Widget_Base { ); $this->end_controls_section(); + + $this->start_controls_section( + 'section_style', + [ + 'label' => __( 'Liste formatée', 'cube' ), + 'tab' => Controls_Manager::TAB_STYLE, + ] + ); + + $this->add_control( + 'bg_color', + [ + 'label' => __( 'Couleur de fond', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}}' => 'background-color: {{VALUE}};', + ], + 'scheme' => [ + 'type' => Schemes\Color::get_type(), + 'value' => Schemes\Color::COLOR_3, + ], + ] + ); + + $this->add_control( + 'text_color', + [ + 'label' => __( 'Couleur de texte', 'cube' ), + 'type' => Controls_Manager::COLOR, + 'default' => '', + 'selectors' => [ + '{{WRAPPER}}' => 'color: {{VALUE}};', + ], + 'scheme' => [ + 'type' => Schemes\Color::get_type(), + 'value' => Schemes\Color::COLOR_3, + ], + ] + ); + + $this->end_controls_section(); + + } /** * Render the widget output on the frontend. diff --git a/wp-content/mu-plugins/cube/src/Elementor/Widgets/JustifiedList.php b/wp-content/mu-plugins/cube/src/Elementor/Widgets/JustifiedList.php new file mode 100644 index 0000000..57f1dff --- /dev/null +++ b/wp-content/mu-plugins/cube/src/Elementor/Widgets/JustifiedList.php @@ -0,0 +1,112 @@ +start_controls_section( + 'section_content', + [ + 'label' => __( 'Données Justifiées', 'cube' ), + ] + ); + + $this->add_control( + 'items', + [ + 'label' => __( 'Éléments', 'cube' ), + 'type' => Controls_Manager::REPEATER, + 'fields' => [ + [ + 'name' => 'title', + 'label' => __( 'Titre', 'cube' ), + 'type' => Controls_Manager::WYSIWYG, + 'default' => '', + 'label_block' => true, + ], + [ + 'name' => 'value', + 'label' => __( 'Valeur', 'cube' ), + 'type' => Controls_Manager::WYSIWYG, + 'default' => '', + 'label_block' => true, + ], + [ + 'name' => 'bg_color', + 'label' => __( 'Couleur de fond', 'cube' ), + 'type' => Controls_Manager::SELECT, + 'options' => [ + '' => __( 'Défaut', 'cube' ), + 'bg-white' => __( 'Blanc', 'cube' ), + 'bg-light' => __( 'Gris clair', 'cube' ), + ], + ], + ], + 'title_field' => '{{{ title }}}', + ] + ); + + + $this->end_controls_section(); + } + /** + * Render the widget output on the frontend. + * Written in PHP and used to generate the final HTML. + * + * @since 1.0.0 + * @access protected + */ + protected function render() { + + $items = $this->get_settings('items'); + + echo view('widgets/justified-list', compact('items')); + } + +} diff --git a/wp-content/themes/CCV/app/setup.php b/wp-content/themes/CCV/app/setup.php index ba18817..84108c1 100755 --- a/wp-content/themes/CCV/app/setup.php +++ b/wp-content/themes/CCV/app/setup.php @@ -169,17 +169,21 @@ add_filter( 'mce_buttons_2', function($buttons) { // Add format classes to add_filter( 'tiny_mce_before_init', function($init_array) { + + // Text size styles $sizes = [ - 'xs', - 'sm', - 'lg', - 'xl', + 'xs' => 'Extra Small', + 'sm' => 'Small', + 'base' => 'Normal', + 'lg' => 'Large', + 'xl' => 'Extra Large', ]; - // Text size styles - foreach ($sizes as $size) { - $style_formats[] = [ - 'title' => 'Text '. strtoupper($size), + $size_formats = []; + + foreach ($sizes as $size => $size_label) { + $size_formats[] = [ + 'title' => $size_label, 'inline' => 'span', 'selector' => 'h1, h2, h3, h4, h5, p, div', 'classes' => 'text-'. $size, @@ -187,6 +191,38 @@ add_filter( 'tiny_mce_before_init', function($init_array) { ]; } + // Add submenu for font sizes + $style_formats[] = [ + 'title' => 'Font Size', + 'items' => $size_formats, + ]; + + // Font weights + $weights = [ + 'light', + 'normal', + 'medium', + 'bold', + ]; + + $weight_formats = []; + + foreach ($weights as $weight) { + $weight_formats[] = [ + 'title' => ucfirst($weight), + 'inline' => 'span', + 'selector' => 'h1, h2, h3, h4, h5, p, div, li', + 'classes' => 'font-'. $weight, + 'wrapper' => false, + ]; + } + + // Add submenu for font weights + $style_formats[] = [ + 'title' => 'Font Weight', + 'items' => $weight_formats, + ]; + // Insert the array, JSON ENCODED, into 'style_formats' $init_array['style_formats'] = json_encode( $style_formats ); diff --git a/wp-content/themes/CCV/resources/assets/images/table-tick.svg b/wp-content/themes/CCV/resources/assets/images/table-tick.svg index 446d0b0..2b8aea0 100644 --- a/wp-content/themes/CCV/resources/assets/images/table-tick.svg +++ b/wp-content/themes/CCV/resources/assets/images/table-tick.svg @@ -1,5 +1 @@ - - - - - + diff --git a/wp-content/themes/CCV/resources/assets/styles/common/global.styl b/wp-content/themes/CCV/resources/assets/styles/common/global.styl index 402c874..fec93e3 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/global.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/global.styl @@ -14,13 +14,9 @@ body min-width: 320px background-color: #FBFBFB -p:not(:last-child) - margin-bottom: 1.5em +* + p + margin-top: 1.5em .wrapper @apply mx-auto max-width: $content-max-width - -// VueJS styling to hide elements until they're ready -[v-cloak] - visibility: hidden diff --git a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl index 53c08a7..c80a564 100644 --- a/wp-content/themes/CCV/resources/assets/styles/common/layout.styl +++ b/wp-content/themes/CCV/resources/assets/styles/common/layout.styl @@ -28,12 +28,21 @@ .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated padding: 0 +.elementor-section-boxed > .elementor-column-gap-extended + horizontal-spacing(-1.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below + > .elementor-row > .elementor-column > .elementor-element-populated + horizontal-spacing(1.5vw) + padding-top: 0 + padding-bottom: 0 + .elementor-section-boxed > .elementor-column-gap-wide horizontal-spacing(-2.5vw, margin) // Negative margins to pull back horizontal padding added to child columns below > .elementor-row > .elementor-column > .elementor-element-populated horizontal-spacing(2.5vw) padding-top: 0 padding-bottom: 0 - //+below(450px) - // padding-left: 0 - // padding-right: 0 + +// Once columns have wrapped, remove padding for all ++below($breakpoint-columns) + .elementor-container > .elementor-row > .elementor-column > .elementor-element-populated + padding: 0 !important diff --git a/wp-content/themes/CCV/resources/assets/styles/components/headings.styl b/wp-content/themes/CCV/resources/assets/styles/components/headings.styl index e4df31b..e472779 100644 --- a/wp-content/themes/CCV/resources/assets/styles/components/headings.styl +++ b/wp-content/themes/CCV/resources/assets/styles/components/headings.styl @@ -31,8 +31,8 @@ h1, .h1, h2, .h2, .decorated background: theme('colors.pink') +below(1150px) - width: 0.9em - left: -1.3em + width: 0.8em + left: -1.15em height: 4px +below($breakpoint-columns) diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/fancy-list.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/fancy-list.styl new file mode 100644 index 0000000..59cbc41 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/fancy-list.styl @@ -0,0 +1,61 @@ +.fancy-list + + &-wrapper + @apply px-6 py-8 + + &-title:not(.plain) + .fancy-list-wrapper & // Adds some specificity so these rules override others from the headings + @apply uppercase text-2xl text-center + padding-bottom: 0.75em + margin-bottom: @padding-bottom + margin-left: 0 + + &:before + top: auto + bottom: 0 + left: 50% + transform: translateX(-50%) + + // Top level list + &-items + > * + * + margin-top: 1.5em + + // Top level individual list item + &-item + @apply relative pl-6 + + &:before + content: '' + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='39' height='25'%3E%3Cpath d='M3.028 8.028l14 13.9 19-19' fill='none' stroke='%23ff078b' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") + background-size: contain + background-repeat: no-repeat + position: absolute + width: 1.5rem + height: 0.91rem + left: -0.6em + top: 0.4em + + &-content + p:not(:last-child) // Mostly for the p + ul elements + margin-bottom: 0.5em + + p.text-lg // Tighten up larger text + line-height: 1.25 + + ul + @apply pl-4 + + li + position: relative + + &:before + content: '' + position: absolute + top: 0.45em + left: -0.8em + width: 7px + height: 13px + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E") + background-repeat: no-repeat + background-size: contain diff --git a/wp-content/themes/CCV/resources/assets/styles/widgets/justified-list.styl b/wp-content/themes/CCV/resources/assets/styles/widgets/justified-list.styl new file mode 100644 index 0000000..37d4349 --- /dev/null +++ b/wp-content/themes/CCV/resources/assets/styles/widgets/justified-list.styl @@ -0,0 +1,65 @@ +.justified-list + + &-wrapper + @apply -mx-4 // Offsets the padding on items + + .compact-prices & + @apply flex flex-wrap + + > * + flex-basis: 50% + + // Out of every 4 children, the first two get a grey background + // This is needed for the zebra stripes and the two column view + &:nth-child(4n-2), &:nth-child(4n-3) + @apply bg-light + + // Create extra space between the two columns + &:nth-child(odd) + constrain(padding-right, 3vw) + &:nth-child(even) + constrain(padding-left, 3vw) + + // On small screens, columns stack and zebra stripes are changed to odd/even + +below('medium') + flex-basis: 100% + + &:nth-child(odd) + @apply bg-light pr-4 + &:nth-child(even) + @apply bg-transparent pl-4 + + + + &-item + @apply flex items-center justify-between + @apply py-6 px-4 + + // Tighten up vertical spacing + .compact-prices & + @apply py-1 + + + &-title + + // > Arrow before titles + .compact-prices & + position: relative + padding-left: 1em // Space for arrow + + &:before + content: '' + position: absolute + top: 0.4em + left: 0 + width: 7px + height: 13px + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='14' viewBox='0 0 8 14'%3E%3Cpath stroke='%23ff078b' stroke-width='2' stroke-linecap='round' d='M1 1l6 6M1 13l6-6'/%3E%3C/svg%3E") + background-repeat: no-repeat + background-size: contain + + &-value + flex: 0 0 15% // Normally the value should fit within 15% width but it's ok if it doesn't + constrain(margin-left, 2.5vw) // Make sure title doesn't touch the value + white-space: nowrap + text-align: right diff --git a/wp-content/themes/CCV/resources/views/widgets/fancy-list.blade.php b/wp-content/themes/CCV/resources/views/widgets/fancy-list.blade.php index b9d40cf..08701af 100644 --- a/wp-content/themes/CCV/resources/views/widgets/fancy-list.blade.php +++ b/wp-content/themes/CCV/resources/views/widgets/fancy-list.blade.php @@ -1,5 +1,5 @@
-

{{ $title }}

+

{{ $title }}