- option to disable negative space/content padding

- removed button minimum width - removed 100% width from buttons on mobile - fixed columns in certain pages on mobile - fixed icons on plugin installation buttons - fixed profile page nav bar added by another plugin
fatihbalsoy · Dec 25, 2023 · a872e77 · a872e77
1 parent 92fc3e2
commit a872e77
Show file tree

Hide file tree

Showing 13 changed files with 195 additions and 38 deletions.
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -68,7 +68,7 @@ services:
       # - ./wp-content:/var/www/html/wp-content
       #       - '8000:80'
       # persistent local data
-      - ./build/material-board/.:/var/www/html/wp-content/plugins/material-board:cached
+      - ./build/material-board:/var/www/html/wp-content/plugins/material-board:cached
       # other data
       - ./volumes/wordpress:/var/www/html
       - ./volumes/plugins:/var/www/html/wp-content/plugins

diff --git a/src/material-board.php b/src/material-board.php
@@ -61,11 +61,14 @@ class MaterialBoardPlugin {
         'fbwpmdp_header_serif_font' => 'off',
 
         /** Icons **/
-        'fbwpmdp_icons' => 'md-icons'
+        'fbwpmdp_icons' => 'md-icons',
+
+        /** Padding **/
+        'fbwpmdp_negative_space' => 'on'
     );
 
     function __construct() {
-        $this->settings_slug = 'material-board-settings';
+        $this->settings_slug = $GLOBALS['fbwpmdp_bundle'];
         if (is_admin()) {
             if(!function_exists('get_plugin_data')){
                 require_once( ABSPATH . 'wp-admin/includes/plugin.php' );
@@ -84,7 +87,7 @@ function __construct() {
         add_action('admin_init', array($this, 'settings'));
         add_action('admin_init', array($this, 'setup_languages'));
         add_action('admin_head', array($this, 'change_theme_color_meta'));
-        // add_filter('plugin_action_links_' . plugin_basename(__FILE__), 'fbwpmdp_plugin_settings_link');
+        // add_filter('plugin_action_links_' . plugin_basename(__FILE__), 'fbwpmdp_settings_link');
     }
 
     /** Language Support **/
@@ -141,9 +144,9 @@ function fbwpmdp_plugin_menu() {
         add_theme_page($GLOBALS["fbwpmdp_name"], $GLOBALS["fbwpmdp_name"], 'manage_options', $this->settings_slug, array($this, 'fbwpmdp_plugin_options'));
     }
 
-    /** Plugin Settings Menu **/
-    function fbwpmdp_plugin_settings_link($links) {
-        $url = get_admin_url() . "themes.php?page=material-board-settings";
+    /** Plugin Settings Link **/
+    function fbwpmdp_settings_link($links) {
+        $url = admin_url("themes.php?page=" . $this->settings_slug);
         $settings_link = '<a href="' . $url . '">' . esc_html_e('Settings', 'material-board') . '</a>';
         $links[] = $settings_link;
         return $links;
@@ -209,6 +212,13 @@ function fbwpmdp_enqueue_dark_theme() {
             wp_dequeue_style('rounded-corners');
         }
 
+        //? -- CONTENT PADDING -- ?//
+        if ($this->get_option_or_default('fbwpmdp_negative_space') == 'on') {
+            wp_enqueue_style('negative-space', plugins_url('styles/options/negative_space.css', __FILE__));
+        } else {
+            wp_dequeue_style('negative-space');
+        }
+
         //? -- LARGE ADMIN BAR -- ?//
         if ($this->get_option_or_default('fbwpmdp_large_admin_bar') == 'on' and is_admin()) {
             wp_enqueue_style('large_admin_bar', plugins_url('styles/options/large_app_bar.css', __FILE__));
@@ -219,11 +229,16 @@ function fbwpmdp_enqueue_dark_theme() {
             } else {
                 // Admin Menu on top
                 wp_enqueue_style('large_admin_bar_variant', plugins_url('styles/options/large_app_bar_2.css', __FILE__));
+                // Remove negative space if needed
+                if ($this->get_option_or_default('fbwpmdp_negative_space') != 'on') {
+                    wp_enqueue_style('large_admin_bar_no_negative_space', plugins_url('styles/options/large_app_bar_2_no_negative_space.css', __FILE__ ));
+                }
             }
         } else {
             wp_dequeue_style('large_admin_bar');
             wp_dequeue_style('large_admin_bar_variant');
             wp_dequeue_script('large_admin_bar_script');
+            wp_dequeue_style('large_admin_bar_no_negative_space');
         }
 
         //? -- ICONS -- ?//

diff --git a/src/settings/index.php b/src/settings/index.php
@@ -66,6 +66,8 @@ function fbwpmdp_get_local_file_contents($file_path)
                         echo fbwpmdp_get_local_file_contents('options/colors.php');
                         // Rounded Corners  - Checkbox
                         echo fbwpmdp_get_local_file_contents('options/corners.php');
+                        // Content Padding  - Checkbox
+                        echo fbwpmdp_get_local_file_contents('options/negative_space.php');
                         // Font             - DM Sans
                         //                  - Roboto
                         //                  - Mona Sans

diff --git a/src/settings/options/negative_space.php b/src/settings/options/negative_space.php
@@ -0,0 +1,25 @@
+<!--
+ *   negative_space.php
+ *   material-board
+ * 
+ *   Created by Fatih Balsoy on 25 Dec 2023
+ *   Copyright © 2023 Fatih Balsoy. All rights reserved.
+-->
+
+<?php
+
+// If this file is called directly, abort.
+if (!defined('ABSPATH'))
+    exit;
+
+$negative_space = get_option('fbwpmdp_negative_space');
+?>
+
+<tr>
+    <th scope='row'><?php esc_html_e('Content Padding', 'material-board') ?></th>
+    <td>
+        <input name="fbwpmdp_negative_space" type="checkbox" <?php checked($negative_space, 'on') ?> />
+        <br /><br />
+        <?php esc_html_e('Negative space can be beneficial for enhancing readability and improving overall visual appeal.', 'material-board') ?>
+    </td>
+</tr>
diff --git a/src/styles/components/_button.scss b/src/styles/components/_button.scss
@@ -136,7 +136,6 @@ button:focus {
     transition: all 0.3s ease !important;
     border-radius: var(--br-6px) !important;
     box-shadow: var(--elevation1) !important;
-    min-width: 100px;
 }
 
 .wp-core-ui .button.button-small {

diff --git a/src/styles/icons/material-icons.css b/src/styles/icons/material-icons.css
@@ -71,7 +71,9 @@ th .comment-grey-bubble:before,
 .dashicons-admin-post:before,
 .post-format-icon.post-format-standard:before,
 .dashicons-editor-unlink:before,
-i.mce-i-unlink:before {
+i.mce-i-unlink:before,
+.plugin-card .update-now:before,
+.plugin-card .updating-message:before {
     font-family: 'Material Symbols Outlined' !important;
     font-weight: normal;
     font-style: normal;

diff --git a/src/styles/icons/notifications.css b/src/styles/icons/notifications.css
@@ -15,7 +15,9 @@
 .theme-browser .theme .notice-success p:before{
     content: 'done' !important;
 }
-.button.updated-message:before, .installed p:before, .updated-message p:before{
+/* .button.updated-message:before,  */
+.installed p:before, 
+.updated-message p:before{
     margin-top: -2px !important;
 }
 

diff --git a/src/styles/icons/products.css b/src/styles/icons/products.css
@@ -16,6 +16,10 @@
     content: 'update';
 }
 
+.plugin-card .update-now:before, .plugin-card .updating-message:before {
+    content: 'autorenew';
+}
+
 .dashicons-screenoptions:before{
     content: 'apps';
 }

diff --git a/src/styles/options/large_app_bar_2_no_negative_space.scss b/src/styles/options/large_app_bar_2_no_negative_space.scss
@@ -0,0 +1,69 @@
+/*
+ *   large_app_bar_2_no_negative_space.scss
+ *   material-board
+ * 
+ *   Created by Fatih Balsoy on 25 Dec 2023
+ *   Copyright © 2023 Fatih Balsoy. All rights reserved.
+ */
+
+@import url('large_app_bar.css');
+@import '../utilities/variables';
+@import '../utilities/mixins';
+
+// ADMIN MENU ON TOP
+
+div#adminmenumain {
+    z-index: 2;
+    position: absolute;
+    top: -40px !important;
+}
+
+div#wp-toolbar {
+    padding-left: calc($admin-menu-width + 15px) !important;
+    padding-right: 15px !important;
+
+    @include respond-to('large') {
+        padding-left: $admin-menu-folded-width + 20px !important;
+        padding-right: 20px !important;
+    }
+
+    @include respond-to('medium') {
+        padding-left: inherit !important;
+        padding-right: inherit !important;
+    }
+}
+
+.folded #wpcontent>#wpadminbar>div#wp-toolbar {
+    padding-left: $admin-menu-folded-width + 15px !important;
+    padding-right: 15px !important;
+
+    @include respond-to('large') {
+        padding-left: inherit !important;
+        padding-right: inherit !important;
+    }
+}
+
+// #wpadminbar {
+
+// }
+
+.folded #wpadminbar {
+    @include respond-to('large') {
+        padding-left: $admin-menu-folded-width - 15px;
+    }
+
+    @include respond-to('medium') {
+        padding-left: 0px;
+    }
+}
+
+.folded #wpcontent,
+.folded #wpfooter {
+    // TODO: resets when screen size is less than 960px
+    margin-left: $admin-menu-folded-width;
+
+    @include respond-to('medium') {
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+}
diff --git a/src/styles/options/negative_space.scss b/src/styles/options/negative_space.scss
@@ -0,0 +1,34 @@
+/*
+ *   negative_space.scss
+ *   material-board
+ * 
+ *   Created by Fatih Balsoy on 25 Dec 2023
+ *   Copyright © 2023 Fatih Balsoy. All rights reserved.
+ */
+
+@import '../utilities/variables', '../utilities/mixins';
+
+#wpcontent {
+    /*margin-top: 48px;*/
+    margin-left: calc($content-padding + $admin-menu-width);
+    margin-right: $content-padding;
+
+    @include respond-to('large') {
+        margin-right: inherit !important;
+    }
+
+    @include respond-to('medium') {
+        margin-right: 0px !important;
+    }
+}
+
+.folded #wpcontent,
+.folded #wpfooter {
+    margin-left: calc($content-folded-padding + $admin-menu-folded-width);
+    margin-right: $content-folded-padding !important;
+
+    @include respond-to('medium') {
+        margin-left: 0px;
+        margin-right: 0px;
+    }
+}
diff --git a/src/styles/pages/plugins/add_new.scss b/src/styles/pages/plugins/add_new.scss
@@ -0,0 +1,13 @@
+/*
+ *   add_new.scss
+ *   material-board
+ * 
+ *   Created by Fatih Balsoy on 25 Dec 2023
+ *   Copyright © 2023 Fatih Balsoy. All rights reserved.
+ */
+
+a.install-now.button,
+a.update-now.button.aria-button-if-js,
+a.button.activate-now {
+    padding-top: 1px;
+}
diff --git a/src/styles/pages/users/profile.scss b/src/styles/pages/users/profile.scss
@@ -0,0 +1,14 @@
+/*
+ *   profile.scss
+ *   material-board
+ * 
+ *   Created by Fatih Balsoy on 25 Dec 2023
+ *   Copyright © 2023 Fatih Balsoy. All rights reserved.
+ */
+
+div#profile-page.wrap form#your-profile #profile-nav {
+    margin: 0px;
+    margin-top: -25px;
+    margin-left: -15px;
+    width: 100%;
+}
diff --git a/src/styles/wp-admin.scss b/src/styles/wp-admin.scss
@@ -17,6 +17,7 @@
 // 5. Components
 @import 'components/card', 'components/button', 'components/input', 'components/checkbox', 'components/radio';
 // 6. Page-specific styles
+@import 'pages/plugins/add_new.scss', 'pages/users/profile.scss';
 // 7. Themes
 
 @import url('shared.css');
@@ -25,35 +26,10 @@ table.googlesitekit-table__wrapper.googlesitekit-table__wrapper--2-col {
     box-shadow: none !important;
 }
 
-#wpcontent {
-    /*margin-top: 48px;*/
-    margin-left: calc($content-padding + $admin-menu-width);
-    margin-right: $content-padding;
-
-    @include respond-to('large') {
-        margin-right: inherit !important;
-    }
-
-    @include respond-to('medium') {
-        margin-right: 0px !important;
-    }
-}
-
 #wpbody {
     z-index: 0;
 }
 
-.folded #wpcontent,
-.folded #wpfooter {
-    margin-left: calc($content-folded-padding + $admin-menu-folded-width);
-    margin-right: $content-folded-padding !important;
-
-    @include respond-to('medium') {
-        margin-left: 0px;
-        margin-right: 0px;
-    }
-}
-
 .spinner {
     background: url('../assets/spinner.gif') no-repeat !important;
     background-size: 210% !important;
@@ -581,8 +557,6 @@ ul.striped>:nth-child(odd) {
     .wrap .page-title-action,
     .color-option,
     .wp-color-result {
-        width: 100% !important;
-        height: 40px;
         text-align: center !important;
         line-height: 25px;
     }
@@ -751,7 +725,11 @@ acronym[title] {
 }
 
 div#col-left {
-    width: 31%;
+    width: 30%;
+
+    @include respond-to('medium') {
+        width: auto;
+    }
 }
 
 form.search-form.wp-clearfix {