From 9eb2921a0de1ece361f025466a9596ef6ab3dd4c Mon Sep 17 00:00:00 2001 From: Martin Wecke <> Date: Tue, 30 Jun 2020 11:22:09 +0200 Subject: [PATCH] added option to display language icons as labels in backend. --- css/msls.css | 2 +- css/msls.less | 89 +++++++++++++++++++++++++-- includes/Component/Icon.php | 4 +- includes/Component/Icon/IconLabel.php | 34 ++++++++++ includes/MslsAdmin.php | 8 +++ includes/MslsAdminIcon.php | 8 +++ includes/MslsBlog.php | 12 +++- includes/MslsCustomColumn.php | 19 ++++-- includes/MslsMetaBox.php | 30 ++++++--- includes/MslsPostTag.php | 8 ++- includes/MslsPostTagClassic.php | 9 ++- 11 files changed, 198 insertions(+), 25 deletions(-) create mode 100644 includes/Component/Icon/IconLabel.php diff --git a/css/msls.css b/css/msls.css index fe7b8437..a8c9b1f6 100644 --- a/css/msls.css +++ b/css/msls.css @@ -1 +1 @@ -div#msls.postbox label{width:16px;margin-right:6px}div#msls.postbox select,select.msls-translations{width:226px}#msls.postbox .inside li{display:flex;align-items:center}#msls.postbox .inside li label{display:flex;flex-grow:.1}#msls.postbox .inside li input.msls_title,#msls.postbox .inside li select{flex-grow:.9}#msls-content-import .button-primary{margin:1em auto}.flag-icon{height:1em;overflow:hidden;color:transparent} \ No newline at end of file +div#msls.postbox label{margin-right:6px}div#msls.postbox select,select.msls-translations{width:226px}#msls.postbox .inside li{display:flex;align-items:center}#msls.postbox .inside li label{display:flex}#msls.postbox .inside li input.msls_title,#msls.postbox .inside li select{flex-grow:1}#msls-content-import .button-primary{margin:1em auto}.flag-icon{width:1.3333em!important;height:1em!important;vertical-align:middle;overflow:hidden;line-height:1!important;color:transparent}.msls-icon-wrapper{display:inline-flex;justify-content:center;align-items:center;text-align:center}.msls-icon-wrapper.flag{min-width:36px}.msls-icon-wrapper.label{min-width:48px}label .msls-icon-wrapper{text-align:left}#wpadminbar * .language-badge,#wpadminbar .language-badge,.language-badge{display:inline-block;min-width:32px;height:auto;padding:4px 6px;white-space:nowrap;font-size:10px;line-height:1;text-align:center;background-color:currentColor;border-radius:9px;user-select:none}#wpadminbar * .language-badge>span,#wpadminbar .language-badge>span,.language-badge>span{display:inline-block;vertical-align:top;margin:0 1px;font-size:10px;font-weight:600;text-transform:uppercase;color:#fff;text-align:center;line-height:1}#wpadminbar * .language-badge>span:nth-child( 2 ),#wpadminbar .language-badge>span:nth-child( 2 ),.language-badge>span:nth-child( 2 ){opacity:.5}.column-mslscol .language-badge{margin:0 1px!important}#wpadminbar * .language-badge,#wpadminbar .language-badge{position:relative;top:-1px;padding-top:3px;padding-bottom:3px;background-color:transparent;border:1px solid currentColor}#wpadminbar * .language-badge>span,#wpadminbar .language-badge>span{color:currentColor} \ No newline at end of file diff --git a/css/msls.less b/css/msls.less index 5d7247ea..7042b82a 100644 --- a/css/msls.less +++ b/css/msls.less @@ -1,7 +1,6 @@ @select-width: 226px; div#msls.postbox { label { - width: 16px; margin-right: 6px; } select { @@ -18,10 +17,9 @@ select.msls-translations { align-items: center; label { display: flex; - flex-grow: .1; } input.msls_title, select{ - flex-grow: .9; + flex-grow: 1; } } } @@ -32,8 +30,91 @@ select.msls-translations { margin: 1em auto; } } + .flag-icon { - height: 1em; + width: 1.3333em !important; + height: 1em !important; + vertical-align: middle; overflow: hidden; + line-height: 1 !important; color: transparent; } + +.msls-icon-wrapper { + display: inline-flex; + justify-content: center; + align-items: center; + + text-align: center; + + &.flag { + min-width: 36px; + } + + &.label { + min-width: 48px; + } + + label & { + text-align: left; + } +} + +.language-badge, +#wpadminbar .language-badge, +#wpadminbar * .language-badge { + display: inline-block; + min-width: 32px; + height: auto; + padding: 4px 6px; + white-space: nowrap; + + font-size: 10px; + line-height: 1; + text-align: center; + + background-color: currentColor; + border-radius: 9px; + + user-select: none; + + & > span { + display: inline-block; + vertical-align: top; + margin: 0 1px; + + font-size: 10px; + font-weight: 600; + line-height: 1; + text-transform: uppercase; + color: #fff; + text-align: center; + line-height: 1; + + &:nth-child( 2 ) { + opacity: 0.5; + } + } +} + +.column-mslscol .language-badge { + margin: 0 1px !important; +} + +#wpadminbar .language-badge, +#wpadminbar * .language-badge { + position: relative; + top: -1px; + + // margin-left: 4px; + // margin-right: 4px; + padding-top: 3px; + padding-bottom: 3px; + + background-color: transparent; + border: 1px currentColor solid; + + & > span { + color: currentColor; + } +} \ No newline at end of file diff --git a/includes/Component/Icon.php b/includes/Component/Icon.php index ee5abb10..368a695b 100644 --- a/includes/Component/Icon.php +++ b/includes/Component/Icon.php @@ -17,7 +17,9 @@ abstract class Icon { * Icon constructor */ public function __construct() { - $this->map = include $this->get_include(); + if( $this->get_include() ) { + $this->map = include $this->get_include(); + } } /** diff --git a/includes/Component/Icon/IconLabel.php b/includes/Component/Icon/IconLabel.php new file mode 100644 index 00000000..5fb56bf6 --- /dev/null +++ b/includes/Component/Icon/IconLabel.php @@ -0,0 +1,34 @@ +map[ $language ] ) ) { + // return $this->map[ $language ]; + // } + + return '' . implode( '', explode( '_', $language ) ) . ''; + } + +} \ No newline at end of file diff --git a/includes/MslsAdmin.php b/includes/MslsAdmin.php index b60206d1..3767cde1 100644 --- a/includes/MslsAdmin.php +++ b/includes/MslsAdmin.php @@ -223,6 +223,7 @@ public function language_section(): int { public function main_section(): int { $map = [ 'display' => __( 'Display', 'multisite-language-switcher' ), + 'admin_display' => __( 'Admin Display', 'multisite-language-switcher' ), 'sort_by_description' => __( 'Sort languages', 'multisite-language-switcher' ), 'output_current_blog' => __( 'Current language link', 'multisite-language-switcher' ), 'only_with_translation' => __( 'Translation links', 'multisite-language-switcher' ), @@ -315,6 +316,13 @@ public function display() { echo ( new Select( 'display', MslsLink::get_types_description(), $this->options->display ) )->render(); } + /** + * Shows the select-form-field 'admin_display' + */ + public function admin_display() { + echo ( new Select( 'admin_display', array( 'flag' => __( 'Flag', 'multisite-language-switcher' ), 'label' => __( 'Label', 'multisite-language-switcher' ) ), $this->options->admin_display ) )->render(); + } + /** * Shows the select-form-field 'reference_user' */ diff --git a/includes/MslsAdminIcon.php b/includes/MslsAdminIcon.php index 94e5b599..3c617911 100644 --- a/includes/MslsAdminIcon.php +++ b/includes/MslsAdminIcon.php @@ -8,6 +8,7 @@ namespace lloc\Msls; use lloc\Msls\Component\Icon\IconSvg; +use lloc\Msls\Component\Icon\IconLabel; /** * Handles the icon links in the backend @@ -230,6 +231,13 @@ public function get_icon() { ); } + if ( 'label' === $this->iconType ) { + return sprintf( '%s', + $this->language, + ( new IconLabel() )->get( $this->language ) + ); + } + if ( empty( $this->href ) ) { return ''; } diff --git a/includes/MslsBlog.php b/includes/MslsBlog.php index 126fe676..0c120227 100644 --- a/includes/MslsBlog.php +++ b/includes/MslsBlog.php @@ -44,6 +44,8 @@ public function __construct( $obj, $description ) { $this->language = MslsBlogCollection::get_blog_language( $this->obj->userblog_id ); } + $this->options = MslsOptions::instance(); + $this->description = (string) $description; } @@ -76,7 +78,15 @@ public function get_description(): string { * @return string */ public function get_title(): string { - return sprintf( '%1$s (%2$s)', $this->obj->blogname, $this->get_description() ); + $icon = new MslsAdminIcon( null ); + $icon->set_language( $this->language ); + if( $this->options->admin_display === 'label' ) { + $icon->set_icon_type( 'label' ); + } else { + $icon->set_icon_type( 'flag' ); + } + + return sprintf( '%1$s %2$s', $this->obj->blogname, '' . $icon->get_icon() . '' ); } /** diff --git a/includes/MslsCustomColumn.php b/includes/MslsCustomColumn.php index 2b5707ba..6bfbc545 100644 --- a/includes/MslsCustomColumn.php +++ b/includes/MslsCustomColumn.php @@ -47,21 +47,28 @@ public static function init() { public function th( $columns ) { $blogs = $this->collection->get(); if ( $blogs ) { - $arr = []; + $html; foreach ( $blogs as $blog ) { $language = $blog->get_language(); $icon = new MslsAdminIcon( null ); - $icon->set_language( $language )->set_icon_type( 'flag' ); + $icon->set_language( $language ); + if( $this->options->admin_display === 'label' ) { + $icon->set_icon_type( 'label' ); + } else { + $icon->set_icon_type( 'flag' ); + } if ( $post_id = get_the_ID() ) { $icon->set_id( $post_id ); $icon->set_origin_language( 'it_IT' ); } - $arr[] = $icon->get_icon(); + $html .= ''; + $html .= $icon->get_icon(); + $html .= ''; } - $columns['mslscol'] = implode( ' ', $arr ); + $columns['mslscol'] = $html; } return $columns; @@ -97,7 +104,9 @@ public function td( $column_name, $item_id ) { $icon->set_href( $mydata->$language ); } - echo $icon->get_a(); + echo ''; + echo $icon->get_a(); + echo ''; restore_current_blog(); } diff --git a/includes/MslsMetaBox.php b/includes/MslsMetaBox.php index c603f916..7ef6f9a3 100644 --- a/includes/MslsMetaBox.php +++ b/includes/MslsMetaBox.php @@ -183,8 +183,13 @@ public function render_select() { $language = $blog->get_language(); $icon = MslsAdminIcon::create() - ->set_language( $language ) - ->set_icon_type( 'flag' ); + ->set_language( $language ); + + if( $this->options->admin_display === 'label' ) { + $icon->set_icon_type( 'label' ); + } else { + $icon->set_icon_type( 'flag' ); + } if ( $mydata->has_value( $language ) ) { $icon->set_href( $mydata->$language ); @@ -223,10 +228,11 @@ public function render_select() { } $lis .= sprintf( - '
  • %s
    • ', + '
  • %s
    • ', $language, $icon, - $selects + $selects, + esc_attr( $this->options->admin_display ) ); restore_current_blog(); @@ -310,8 +316,13 @@ public function render_input( $echo = true ) { $language = $blog->get_language(); $icon = MslsAdminIcon::create() - ->set_language( $language ) - ->set_icon_type( 'flag' ); + ->set_language( $language ); + + if( $this->options->admin_display === 'label' ) { + $icon->set_icon_type( 'label' ); + } else { + $icon->set_icon_type( 'flag' ); + } $value = $title = ''; @@ -322,8 +333,8 @@ public function render_input( $echo = true ) { } $items .= sprintf( - '
  • - + '
  • +
    • ', @@ -331,7 +342,8 @@ public function render_input( $echo = true ) { $icon, $language, $value, - $title + $title, + esc_attr( $this->options->admin_display ) ); restore_current_blog(); diff --git a/includes/MslsPostTag.php b/includes/MslsPostTag.php index 6e3bea72..2ccc18f4 100644 --- a/includes/MslsPostTag.php +++ b/includes/MslsPostTag.php @@ -171,8 +171,12 @@ public function the_input( $tag, $title_format, $item_format ) { $language = $blog->get_language(); $icon = MslsAdminIcon::create() - ->set_language( $language ) - ->set_icon_type( 'flag' ); + ->set_language( $language ); + if( $this->options->admin_display === 'label' ) { + $icon->set_icon_type( 'label' ); + } else { + $icon->set_icon_type( 'flag' ); + } $value = $title = ''; if ( $my_data->has_value( $language ) ) { diff --git a/includes/MslsPostTagClassic.php b/includes/MslsPostTagClassic.php index 19e0e3bf..b5904fd5 100644 --- a/includes/MslsPostTagClassic.php +++ b/includes/MslsPostTagClassic.php @@ -68,8 +68,13 @@ public function print_option( MslsBlog $blog, $type, MslsOptionsTax $mydata, $it $language = $blog->get_language(); $icon = MslsAdminIcon::create() - ->set_language( $language ) - ->set_icon_type( 'flag' ); + ->set_language( $language ); + + if( $this->options->admin_display === 'label' ) { + $icon->set_icon_type( 'label' ); + } else { + $icon->set_icon_type( 'flag' ); + } $options = ''; $terms = get_terms( $type, [ 'hide_empty' => 0 ] );