Merge pull request #110 from rtCamp/update/hide-count-feature

GH : #91 Conversion of Checkbox to Toggle-Button [ Admin ]
rtCamp · Mar 24, 2022 · 298df73 · 298df73
2 parents 9d7bfe4 + f45614f
commit 298df73
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 2 deletions.
diff --git a/styles/style.css b/styles/style.css
@@ -392,6 +392,67 @@ div#content_block { width: 70% }
 .postbox .handle-order-higher, .postbox .handle-order-lower, .postbox .handlediv { display: none; }
 .postbox .handle-order-higher, .postbox .handle-order-lower, .postbox .ui-sortable-handle { font-size: 17px !important; padding: 8px 12px !important; font-weight: bold; }
 
+/* Hide Counts toggle button */
+.switch {
+    position: relative;
+    display: inline-block;
+	top: -5px;
+    width: 50px;
+    height: 28px;
+}
+
+.switch input { 
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: #ccc;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+.slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 3px;
+    bottom: 3px;
+    background-color: white;
+    -webkit-transition: .4s;
+    transition: .4s;
+}
+
+input:checked + .slider {
+    background-color: #2196F3;
+}
+
+input:focus + .slider {
+    box-shadow: 0 0 1px #2196F3;
+}
+
+input:checked + .slider:before {
+    -webkit-transform: translateX(22px);
+    -ms-transform: translateX(22px);
+    transform: translateX(22px);
+}
+
+.slider.round {
+    border-radius: 34px;
+}
+
+.slider.round:before {
+    border-radius: 50%;
+}
+
 /**
  * End of rtSocial Plugin Style
  */
diff --git a/template/rtsocial-setting-form.php b/template/rtsocial-setting-form.php
@@ -221,10 +221,11 @@
 										<th scope="row"><?php esc_html_e( 'Hide counts', 'rtSocial' ); ?>:</th>
 										<td>
 											<fieldset>
-												<label>
+												<label class="switch">
 													<input value="1" name='rtsocial_plugin_options[hide_count]' id="hide_count_check" type="checkbox" <?php echo ( ! empty( $options['hide_count'] ) && ( 1 === (int) $options['hide_count'] ) ) ? ' checked="checked" ' : ''; ?> />
-													<span><?php esc_html_e( 'Yes', 'rtSocial' ); ?></span>
+													<span class="slider round"></span>
 												</label>
+												<p><?php esc_html_e( 'Enable this option to hide counts for social-media sharing buttons', 'rtSocial' ); ?></p>
 											</fieldset>
 										</td>
 									</tr>