tmdinosaurcenter
/
tainacan-theme
mirror of https://github.com/tainacan/tainacan-theme.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added suggested colors to tooltip on customize colors

This commit is contained in:
Fabiano Alencar 2018-09-12 12:23:56 -03:00
parent ce5f9ddc8d
commit 41a1ce558e
2 changed files with 45 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/assets/js/color-scheme-control.js
View File

@ -8,11 +8,13 @@
var cssTemplate = wp.template( 'tainacan-color-scheme' ), var cssTemplate = wp.template( 'tainacan-color-scheme' ),
colorSchemeKeys = [ colorSchemeKeys = [
'link_color', 'link_color',
'tooltip_color',
/* 'main_text_color', /* 'main_text_color',
'secondary_text_color' */ 'secondary_text_color' */
], ],
colorSettings = [ colorSettings = [
'link_color', 'link_color',
'tooltip_color',
/* 'main_text_color', /* 'main_text_color',
'secondary_text_color' */ 'secondary_text_color' */
]; ];
@ -31,6 +33,12 @@
.data( 'data-default-color', color ) .data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color ); .wpColorPicker( 'defaultColor', color );
color = colors[3];
api( 'tooltip_color' ).set( color );
api.control( 'tooltip_color' ).container.find( '.color-picker-hex' )
.data( 'data-default-color', color )
.wpColorPicker( 'defaultColor', color );
/* // Update Main Text Color. /* // Update Main Text Color.
color = colors[3]; color = colors[3];
api( 'main_text_color' ).set( color ); api( 'main_text_color' ).set( color );

49
src/functions/customizer.php
View File

@ -188,6 +188,17 @@ function tainacan_customize_register( $wp_customize ) {
'section' => 'colors', 'section' => 'colors',
) ) ); ) ) );
$wp_customize->add_setting( 'tooltip_color', array(
'default' => $color_scheme[3],
'sanitize_callback' => 'sanitize_hex_color',
'transport' => 'postMessage',
) );
$wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'tooltip_color', array(
'label' => __( 'Tooltip Color', 'tainacan-theme' ),
'section' => 'colors',
) ) );
/* // Add main text color setting and control. /* // Add main text color setting and control.
$wp_customize->add_setting( 'main_text_color', array( $wp_customize->add_setting( 'main_text_color', array(
'default' => $color_scheme[3], 'default' => $color_scheme[3],
@ -267,6 +278,7 @@ function tainacan_get_color_schemes() {
'#1a1a1a', //background '#1a1a1a', //background
'#ffffff', //background page '#ffffff', //background page
'#298596', //link '#298596', //link
'#e6f6f8', //tooltip
), ),
), ),
'carmine' => array( 'carmine' => array(
@ -275,6 +287,7 @@ function tainacan_get_color_schemes() {
'#262626', //background '#262626', //background
'#ffffff', //background page '#ffffff', //background page
'#a55032', //link '#a55032', //link
'#e6d3cd', //tooltip
), ),
), ),
'cherry' => array( 'cherry' => array(
@ -283,6 +296,7 @@ function tainacan_get_color_schemes() {
'#616a73', //background '#616a73', //background
'#ffffff', //background page '#ffffff', //background page
'#af2e48', //link '#af2e48', //link
'#e9cbd1', //tooltip
), ),
), ),
'mustard' => array( 'mustard' => array(
@ -291,6 +305,7 @@ function tainacan_get_color_schemes() {
'#ffffff', //background '#ffffff', //background
'#ffffff', //background page '#ffffff', //background page
'#c58738', //link '#c58738', //link
'#f0e1cf', //tooltip
), ),
), ),
'mintgreen' => array( 'mintgreen' => array(
@ -299,6 +314,7 @@ function tainacan_get_color_schemes() {
'#ffffff', //background '#ffffff', //background
'#ffffff', //background page '#ffffff', //background page
'#4ebfa7', //link '#4ebfa7', //link
'#d4efe9', //tooltip
), ),
), ),
'darkturquoise' => array( 'darkturquoise' => array(
@ -307,6 +323,7 @@ function tainacan_get_color_schemes() {
'#ffffff', //background '#ffffff', //background
'#ffffff', //background page '#ffffff', //background page
'#288698', //link '#288698', //link
'#cbe0e5', //tooltip
), ),
), ),
'turquoise' => array( 'turquoise' => array(
@ -315,6 +332,7 @@ function tainacan_get_color_schemes() {
'#ffffff', //background '#ffffff', //background
'#ffffff', //background page '#ffffff', //background page
'#2db4c1', //link '#2db4c1', //link
'#cdecef', //tooltip
), ),
), ),
'lightblue' => array( 'lightblue' => array(
@ -323,6 +341,7 @@ function tainacan_get_color_schemes() {
'#ffffff', //background '#ffffff', //background
'#ffffff', //background page '#ffffff', //background page
'#499dd6', //link '#499dd6', //link
'#d3e6f2', //tooltip
), ),
), ),
'purple' => array( 'purple' => array(
@ -331,6 +350,7 @@ function tainacan_get_color_schemes() {
'#ffffff', //background '#ffffff', //background
'#ffffff', //background page '#ffffff', //background page
'#4751a3', //link '#4751a3', //link
'#d1d4e7', //tooltip
), ),
), ),
'violet' => array( 'violet' => array(
@ -339,6 +359,7 @@ function tainacan_get_color_schemes() {
'#ffffff', //background '#ffffff', //background
'#ffffff', //background page '#ffffff', //background page
'#955ba5', //link '#955ba5', //link
'#e4d7e8', //tooltip
), ),
), ),
) ); ) );
@ -357,6 +378,7 @@ if ( ! function_exists( 'tainacan_get_color_scheme' ) ) :
function tainacan_get_color_scheme() { function tainacan_get_color_scheme() {
$color_scheme_option = get_theme_mod( 'color_scheme', 'default' ); $color_scheme_option = get_theme_mod( 'color_scheme', 'default' );
$link_color = get_theme_mod( 'link_color', 'default' ); $link_color = get_theme_mod( 'link_color', 'default' );
$tooltip_color = get_theme_mod( 'tooltip_color', 'default' );
$color_schemes = tainacan_get_color_schemes(); $color_schemes = tainacan_get_color_schemes();
if ( array_key_exists( $color_scheme_option, $color_schemes ) ) { if ( array_key_exists( $color_scheme_option, $color_schemes ) ) {
@ -365,7 +387,7 @@ function tainacan_get_color_scheme() {
$return = $color_schemes['default']['colors']; $return = $color_schemes['default']['colors'];
$return[2] = $link_color; // override link color with the one from color picker $return[2] = $link_color; // override link color with the one from color picker
$return[3] = $tooltip_color;
return $return; return $return;
} }
@ -448,6 +470,7 @@ function tainacan_color_scheme_css() {
'background_color' => $color_scheme[0], 'background_color' => $color_scheme[0],
'page_background_color' => $color_scheme[1], 'page_background_color' => $color_scheme[1],
'link_color' => $color_scheme[2], 'link_color' => $color_scheme[2],
'tooltip_color' => $color_scheme[3],
'backtransparent' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.5)', $color_textcolor_rgb ) 'backtransparent' => vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.5)', $color_textcolor_rgb )
); );
@ -493,6 +516,7 @@ function tainacan_get_color_scheme_css( $colors ) {
'background_color' => '', 'background_color' => '',
'page_background_color' => '', 'page_background_color' => '',
'link_color' => '', 'link_color' => '',
'tooltip_color' => '',
'backtransparent' => '', 'backtransparent' => '',
) ); ) );
@ -584,10 +608,10 @@ function tainacan_get_color_scheme_css( $colors ) {
/* Tooltip */ /* Tooltip */
.tooltip .tooltip-inner { .tooltip .tooltip-inner {
background-color: {$colors['backtransparent']} !important; background-color: {$colors['tooltip_color']} !important;
} }
.tooltip .tooltip-arrow { .tooltip .tooltip-arrow {
border-color: {$colors['backtransparent']} !important; border-color: {$colors['tooltip_color']} !important;
} }
/* Colored text */ /* Colored text */
@ -666,6 +690,7 @@ function tainacan_color_scheme_css_template() {
'background_color' => '{{ data.background_color }}', 'background_color' => '{{ data.background_color }}',
'page_background_color' => '{{ data.page_background_color }}', 'page_background_color' => '{{ data.page_background_color }}',
'link_color' => '{{ data.link_color }}', 'link_color' => '{{ data.link_color }}',
'tooltip_color' => '{{ data.tooltip_color }}',
'backtransparent' => '{{ data.backtransparent }}',/* 'backtransparent' => '{{ data.backtransparent }}',/*
'main_text_color' => '{{ data.main_text_color }}', 'main_text_color' => '{{ data.main_text_color }}',
'secondary_text_color' => '{{ data.secondary_text_color }}', 'secondary_text_color' => '{{ data.secondary_text_color }}',
@ -718,26 +743,26 @@ add_action( 'wp_enqueue_scripts', 'tainacan_link_color_css', 11 );
* *
* @see wp_add_inline_style() * @see wp_add_inline_style()
*/ */
function tainacan_main_text_color_css() { function tainacan_tooltip_color_css() {
$color_scheme = tainacan_get_color_scheme(); $color_scheme = tainacan_get_color_scheme();
$default_color = $color_scheme[2]; $default_color = $color_scheme[3];
$main_text_color = get_theme_mod( 'main_text_color', $default_color ); $tooltip_color = get_theme_mod( 'tooltip_color', $default_color );
// Don't do anything if the current color is the default. // Don't do anything if the current color is the default.
if ( $main_text_color === $default_color ) { if ( $tooltip_color === $default_color ) {
return; return;
} }
// Convert main text hex color to rgba. // Convert main text hex color to rgba.
$main_text_color_rgb = tainacan_hex2rgb( $main_text_color ); $tooltip_color_rgb = tainacan_hex2rgb( $tooltip_color );
// If the rgba values are empty return early. // If the rgba values are empty return early.
if ( empty( $main_text_color_rgb ) ) { if ( empty( $tooltip_color_rgb ) ) {
return; return;
} }
// If we get this far, we have a custom color scheme. // If we get this far, we have a custom color scheme.
$border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $main_text_color_rgb ); $border_color = vsprintf( 'rgba( %1$s, %2$s, %3$s, 0.2)', $tooltip_color_rgb );
$css = ' $css = '
/* Custom Main Text Color */ /* Custom Main Text Color */
@ -746,9 +771,9 @@ function tainacan_main_text_color_css() {
} }
'; ';
wp_add_inline_style( 'tainacan-style', sprintf( $css, $main_text_color, $border_color ) ); wp_add_inline_style( 'tainacan-style', sprintf( $css, $tooltip_color, $border_color ) );
} }
add_action( 'wp_enqueue_scripts', 'tainacan_main_text_color_css', 11 ); add_action( 'wp_enqueue_scripts', 'tainacan_tooltip_color_css', 11 );
/** /**
* Enqueues front-end CSS for the secondary text color. * Enqueues front-end CSS for the secondary text color.