Merge pull request #155 from hatsumatsu/text-based-labels

Add setting to represent languages as labels instead of flags in backend.
lloc · Nov 29, 2023 · ec1281b · ec1281b
2 parents 44d50f4 + 1f546f0
commit ec1281b
Show file tree

Hide file tree

Showing 11 changed files with 199 additions and 27 deletions.
diff --git a/css/msls.css b/css/msls.css
diff --git 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;        
+    }
+}
diff --git 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
@@ -0,0 +1,34 @@
+<?php
+
+namespace lloc\Msls\Component\Icon;
+
+use lloc\Msls\Component\Icon;
+use lloc\Msls\MslsPlugin;
+
+/**
+ * Class IconLabel
+ * @package lloc\Msls\Component
+ */
+class IconLabel extends Icon {
+
+	/**
+	 * @return string
+	 */
+	protected function get_include(): string {
+		return '';
+	}
+
+	/**
+	 * @param string $language
+	 *
+	 * @return string
+	 */
+	public function get( string $language ): string {
+		// if ( isset( $this->map[ $language ] ) ) {
+		// 	return $this->map[ $language ];
+		// }
+
+		return '<span>' . implode( '</span><span>', explode( '_', $language ) ) . '</span>';
+	}
+
+}
diff --git a/includes/MslsAdmin.php b/includes/MslsAdmin.php
@@ -225,6 +225,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' ),
@@ -317,6 +318,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
@@ -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
@@ -233,6 +234,13 @@ public function get_icon(): string {
 			);
 		}
 
+		if ( 'label' === $this->iconType ) {
+			return sprintf( '<span class="language-badge %s">%s</span>',
+				$this->language,
+				( new IconLabel() )->get( $this->language )
+			);
+		}		
+
 		if ( empty( $this->href ) ) {
 			return '<span class="dashicons dashicons-plus"></span>';
 		}

diff --git a/includes/MslsBlog.php b/includes/MslsBlog.php
@@ -40,6 +40,8 @@ public function __construct( $obj, $description ) {
 			$this->language = MslsBlogCollection::get_blog_language( $this->obj->userblog_id );
 		}
 
+		$this->options    = MslsOptions::instance();		
+
 		$this->description = (string) $description;
 	}
 
@@ -72,7 +74,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, '<span class="msls-icon-wrapper flag">' . $icon->get_icon() . '</span>' );
 	}
 
 	/**

diff --git 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 .= '<span class="msls-icon-wrapper ' . esc_attr( $this->options->admin_display ) . '">';
+				$html .= $icon->get_icon();
+				$html .= '</span>';
 			}
-			$columns['mslscol'] = implode( '&nbsp;', $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 '<span class="msls-icon-wrapper ' . esc_attr( $this->options->admin_display ) . '">';
+					echo $icon->get_a(); 
+					echo '</span>';
 
 					restore_current_blog();
 				}

diff --git a/includes/MslsMetaBox.php b/includes/MslsMetaBox.php
@@ -183,12 +183,16 @@ public function render_select() {
 				switch_to_blog( $blog->userblog_id );
 
 				$language = $blog->get_language();
-				$icon     = MslsAdminIcon::create( $type )
-				                         ->set_language( $language )
-				                         ->set_icon_type( 'flag' );
+				$icon     = MslsAdminIcon::create()->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 );
+          $icon->set_href( $mydata->$language );
 				}
 
 				$selects  = '';
@@ -224,10 +228,11 @@ public function render_select() {
 				}
 
 				$lis .= sprintf(
-					'<li><label for="msls_input_%s">%s</label>%s</li>',
+					'<li><label for="msls_input_%s msls-icon-wrapper %4$s">%s</label>%s</li>',
 					$language,
 					$icon,
-					$selects
+					$selects,
+					esc_attr( $this->options->admin_display )
 				);
 
 				restore_current_blog();
@@ -307,8 +312,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 = '';
 
@@ -319,16 +329,17 @@ public function render_input( $echo = true ) {
 				}
 
 				$items .= sprintf(
-					'<li>
-					<label for="msls_title_%1$s">%2$s</label>
+					'<li class="">
+					<label for="msls_title_%1$s msls-icon-wrapper %6$s">%2$s</label>
 					<input type="hidden" id="msls_id_%1$s" name="msls_input_%3$s" value="%4$s"/>
 					<input class="msls_title" id="msls_title_%1$s" name="msls_title_%1$s" type="text" value="%5$s"/>
 					</li>',
 					$blog->userblog_id,
 					$icon,
 					$language,
 					$value,
-					$title
+					$title,
+					esc_attr( $this->options->admin_display )
 				);
 
 				restore_current_blog();

diff --git 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
@@ -69,8 +69,13 @@ public function print_option( MslsBlog $blog, string $type, MslsOptionsTax $myda
 
 		$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( [ 'taxonomy' => $type, 'hide_empty' => false ] );