diff --git a/src/Plugin/Block/SimpleSocialIconsBlock.php b/src/Plugin/Block/SimpleSocialIconsBlock.php index e3d33a1..c96147a 100644 --- a/src/Plugin/Block/SimpleSocialIconsBlock.php +++ b/src/Plugin/Block/SimpleSocialIconsBlock.php @@ -27,6 +27,15 @@ class SimpleSocialIconsBlock extends BlockBase { * {@inheritdoc} */ public function blockForm($form, FormStateInterface $form_state) { + + $form['icon_placement'] = array( + '#type' => 'radios', + '#title' => t('Icon alignment'), + '#default_value' => isset($this->configuration['icon_placement']) ? $this->configuration['icon_placement'] : '', + '#description' => $this->t('By default it will display horizontally .'), + '#options' => array(0 => t('Horizontal'), 1 => t('Vertical')), + '#weight' => '0', + ); $form['size'] = array( '#type' => 'range', '#title' => $this->t('Size'), @@ -83,7 +92,7 @@ class SimpleSocialIconsBlock extends BlockBase { $form['contact_information'] = array( // '#markup' => 'hello', '#markup' => $this->icons([]), - '#weight' => '-100', + '#weight' => '-100', '#title' => 'Preview', ); $form['#attached']['library'][] = 'simple_social_icons/simple_social_icons'; @@ -104,6 +113,28 @@ class SimpleSocialIconsBlock extends BlockBase { /*Spacing*/ margin-right: 7px; }'; + + $style .= '.soc_ver li a { + /*size*/ + width: 38px; + height: 38px; + line-height: 38px; + + /*size 55%*/ + font-size: 20px; + + /*Radius*/ + -webkit-border-radius: 25px; + -moz-border-radius: 25px; + border-radius: 25px; + + /*Spacing*/ + margin-right: 7px; + }'; + + + + $form['#attached']['html_head'][] = [ // The data. [ @@ -282,6 +313,12 @@ class SimpleSocialIconsBlock extends BlockBase { * {@inheritdoc} */ public function blockSubmit($form, FormStateInterface $form_state) { + + /* echo '
';
+    print_r($form_state->getValue('icon_placement'));
+    die;*/
+
+    $this->configuration['icon_placement'] = $form_state->getValue('icon_placement');
     $this->configuration['size'] = $form_state->getValue('size');
     $this->configuration['font_size'] = $form_state->getValue('font_size');
     $this->configuration['radius'] = $form_state->getValue('radius');
@@ -315,6 +352,8 @@ class SimpleSocialIconsBlock extends BlockBase {
    * {@inheritdoc}
    */
   public function build() {
+
+    $icon_placement = isset($this->configuration['icon_placement']) ? $this->configuration['icon_placement'] : '';
     $size = (isset($this->configuration['size']) ? $this->configuration['size'] : '38') . 'px';
     $font_size = (isset($this->configuration['font_size']) ? $this->configuration['font_size'] : '22') . 'px';
     $radius = (isset($this->configuration['radius']) ? $this->configuration['radius'] : '30') . 'px';
@@ -351,6 +390,7 @@ class SimpleSocialIconsBlock extends BlockBase {
     $output = array();
     $output[]['#cache']['max-age'] = 0; // No cache
     $values = [
+      'icon_placement' => $icon_placement,
       'twitter_via' => $twitter_via,
       'twitter_enable' => $twitter_enable,
       'linkedin_summary' => $linkedin_summary,
@@ -389,6 +429,30 @@ class SimpleSocialIconsBlock extends BlockBase {
              /*background-color: none;*/
     }";
 
+
+
+    $style .= ".soc_ver li a {
+            /*size*/
+            width: $size;
+            height: $size;
+            line-height: $size;
+
+            /*size 55%*/
+            font-size: $font_size;
+
+            /*Radius*/
+            -webkit-border-radius: $radius;
+            -moz-border-radius: $radius;
+            border-radius: $radius;
+
+            /*Spacing*/
+            margin-right: $spacing;
+            color: $icon_color !important;
+            background-color: $button_link_color !important;
+             /*color: #ffffff;*/
+             /*background-color: none;*/
+    }";
+
     $output['#attached']['html_head'][] = [
       // The data.
       [
@@ -445,78 +509,109 @@ class SimpleSocialIconsBlock extends BlockBase {
     }
 
     if (!empty($values['twitter_via'])) {
-      $twitter_icon = '
    • ';
+      $twitter_icon = '
    • ';
     }
     else {
-      $twitter_icon = '
    • ';
+      $twitter_icon = '
    • ';
     }
 
-    $facebook_icon = '
    • ';
+    $facebook_icon = '
    • ';
 
     if (!empty($values['pinterest_image_url']) && !empty($values['pinterest_desc'])) {
-      $pinterest_icon = '
    • ';
+      $pinterest_icon = '
    • ';
     }
     else if (!empty($values['pinterest_image_url'])) {
-      $pinterest_icon = '
    • ';
+      $pinterest_icon = '
    • ';
     }
     else if (!empty($values['pinterest_desc'])) {
-      $pinterest_icon = '
    • ';
+      $pinterest_icon = '
    • ';
     }
     else {
-      $pinterest_icon = '
    • ';
+      $pinterest_icon = '
    • ';
     }
 
-    $google_icon = '
    • ';
+    $google_icon = '
    • ';
 
     if (!empty($values['linkedin_summary']) && !empty($values['linkedin_source'])) {
-      $linked_in_icon = '
    • ';
+      $linked_in_icon = '
    • ';
     }
     else if (!empty($values['linkedin_source'])) {
-      $linked_in_icon = '
    • ';
+      $linked_in_icon = '
    • ';
     }
     else if (!empty($values['linkedin_summary'])) {
-      $linked_in_icon = '
    • ';
+      $linked_in_icon = '
    • ';
     }
     else {
-      $linked_in_icon = '
    • ';
+      $linked_in_icon = '
    • ';
     }
 
     // $blog_icon = '
    • ';
 
     if (!empty($values['email_body']) && !empty($values['email_subject'])) {
-      $email = '
    • ';
+      $email = '
    • ';
     }
     else if(!empty($values['email_body'])) {
-      $email = '
    • ';
+      $email = '
    • ';
     }
     else if(!empty($values['email_subject'])) {
-      $email = '
    • ';
+      $email = '
    • ';
     }
     else {
-      $email = '
    • ';
+      $email = '
    • ';
     }
+    if ($values['icon_placement'] == 0) {
+
+
+      //print_r($values['icon_placement']);
+      //die;
+      /*icons are displaying horizontal value as 0*/
+      $icons = '';
+      return $icons;
+    } else {
+      /*icons are displaying vertical value as 1*/
+      $icons = '';
+      return $icons;
+
 
-    $icons = '';
-    return $icons;
 
   }
 
diff --git a/styles/simple_social_icons.css b/styles/simple_social_icons.css
index e31670b..46ed516 100644
--- a/styles/simple_social_icons.css
+++ b/styles/simple_social_icons.css
@@ -53,7 +53,7 @@
     }
 }
 
-.soc {
+.soc, .soc_ver {
     overflow:hidden;
     margin:0; padding:0;
     list-style:none;
@@ -61,10 +61,15 @@
 
 .soc li {
     display:inline-block;
-    *display:inline;
     zoom:1;
 }
 
+.soc_ver li {
+    display:table-row-group;
+    zoom:1;
+}
+
+
 /*.soc li a {*/
     /*size*/
     /*width: 38px;*/
@@ -83,7 +88,7 @@
     /*margin-right: 7px;*/
 /*}*/
 
-.soc li a {
+.soc li a, .soc_ver li a {
     font-family:si!important;
     font-style:normal;
     font-weight:400;
@@ -116,74 +121,74 @@
     background-color: none;
 }
 
-.soc a:hover {
+.soc a:hover, .soc_ver a:hover {
     z-index: 2;
 
 }
 
-.soc-icon-last{
+.soc-icon-last, .soc_ver-icon-last{
     margin:0 !important;
 }
 
-.soc-twitter {
+.soc-twitter, .soc_ver-twitter {
     background-color: #4da7de;
 }
-.soc-twitter:before {
+.soc-twitter:before, .soc_ver-twitter:before {
     content:'a';
 }
-.soc-facebook {
+.soc-facebook, .soc_ver-facebook {
     background-color: #3e5b98;
 }
-.soc-facebook:before {
+.soc-facebook:before, .soc_ver-facebook:before {
     content:'b';
 }
-.soc-google {
+.soc-google, .soc_ver-google {
     background-color: #d93e2d;
 }
-.soc-google:before {
+.soc-google:before, .soc_ver-google:before {
     content:'c';
 }
-.soc-pinterest {
+.soc-pinterest, .soc_ver-pinterest {
     background-color: #c92619;
 }
-.soc-pinterest:before {
+.soc-pinterest:before, .soc_ver-pinterest:before {
     content:'d';
 }
-.soc-linkedin {
+.soc-linkedin, .soc_ver-linkedin {
     background-color: #3371b7;
 }
-.soc-linkedin:before {
+.soc-linkedin:before, .soc_ver-linkedin:before {
     content:'j';
 }
-.soc-rss {
+.soc-rss, .soc_ver-rss {
     background-color: #f26109;
 }
-.soc-rss:before {
+.soc-rss:before, .soc_ver-rss:before {
     content:',';
 }
 
-.soc-twitter:hover {
+.soc-twitter:hover, .soc_ver-twitter:hover {
     background-color: #3993ca;
 }
-.soc-facebook:hover {
+.soc-facebook:hover, .soc_ver-facebook:hover {
     background-color: #2a4784;
 }
-.soc-google:hover {
+.soc-google:hover, .soc_ver-google:hover {
     background-color: #c52a19;
 }
-.soc-pinterest:hover {
+.soc-pinterest:hover, .soc_ver-pinterest:hover {
     background-color: #b51205;
 }
-.soc-linkedin:hover {
+.soc-linkedin:hover, .soc_ver-linkedin:hover {
     background-color: #1f5da3;
 }
-.soc-rss:hover {
+.soc-rss:hover, .soc_ver-rss:hover  {
     background-color: #de4d00;
 }
 
-.soc-email1 {
+.soc-email1,.soc_ver-email1 {
     background-color: #578AD6;
 }
-.soc-email1:before {
+.soc-email1:before, .soc_ver-email1:before {
     content:'<';
 }
\ No newline at end of file