From 4c0de6bcb54a3e99db9a666f34bef0a7950df116 Mon Sep 17 00:00:00 2001 From: Jason Johnston Date: Thu, 13 Jun 2024 17:54:52 -0400 Subject: [PATCH] Style clean up (#141) * remove db and data center options * Allow adding svg * fix icon size attribute * tighten up site archive page * change background on current site * clean up site view styles * tighten up spacing * update more menu to allow changing the icon * update style and settings on more menu block * update single site template --- plugin/admin/init.php | 28 +++ .../src/components/controls/iconSelect.js | 25 +++ .../blocks/src/components/form-input/edit.js | 2 +- .../src/components/form-input/style.scss | 1 + plugin/blocks/src/components/icon/block.json | 4 +- plugin/blocks/src/components/icon/edit.js | 18 +- .../src/components/more-menu/block.json | 8 + .../blocks/src/components/more-menu/edit.js | 36 ++- .../src/components/more-menu/editor.scss | 6 +- .../blocks/src/components/more-menu/save.js | 14 +- .../src/components/site-card/render.php | 11 +- plugin/custom-post-types/wpcloud-site.php | 5 + plugin/includes/class-wpcloud-site.php | 13 +- plugin/includes/wpcloud-client.php | 1 - theme/assets/blocks/src/core-query.css | 13 ++ theme/assets/blocks/src/wpcloud-button.css | 10 + .../blocks/src/wpcloud-expanding-content.css | 6 +- .../blocks/src/wpcloud-expanding-header.css | 6 + .../assets/blocks/src/wpcloud-form-input.css | 6 + theme/assets/blocks/src/wpcloud-form.css | 1 + theme/assets/blocks/src/wpcloud-more-menu.css | 13 +- .../blocks/src/wpcloud-site-alias-list.css | 7 +- theme/assets/blocks/src/wpcloud-site-card.css | 8 +- .../assets/blocks/src/wpcloud-site-detail.css | 9 +- .../blocks/src/wpcloud-site-template.css | 5 +- .../blocks/src/wpcloud-ssh-user-list.css | 3 + theme/bin/build-theme-css.js | 2 + theme/package.json | 2 +- theme/templates/archive-wpcloud_site.html | 16 +- theme/templates/single-wpcloud_site.html | 212 +++++++----------- theme/theme.json | 49 ++-- 31 files changed, 321 insertions(+), 219 deletions(-) create mode 100644 plugin/blocks/src/components/controls/iconSelect.js create mode 100644 theme/assets/blocks/src/core-query.css diff --git a/plugin/admin/init.php b/plugin/admin/init.php index 1692e76c..32ecbdda 100644 --- a/plugin/admin/init.php +++ b/plugin/admin/init.php @@ -351,3 +351,31 @@ function wpcloud_admin_options_controller(): void { settings_errors( 'wpcloud_messages' ); require_once plugin_dir_path(__FILE__) . 'options.php'; } + +// Allow SVG +add_filter( 'wp_check_filetype_and_ext', function($data, $file, $filename, $mimes) { + $filetype = wp_check_filetype( $filename, $mimes ); + + return [ + 'ext' => $filetype['ext'], + 'type' => $filetype['type'], + 'proper_filename' => $data['proper_filename'] + ]; + +}, 10, 4 ); + +function cc_mime_types( $mimes ){ + $mimes['svg'] = 'image/svg+xml'; + return $mimes; +} +add_filter( 'upload_mimes', 'cc_mime_types' ); + +function fix_svg() { + echo ''; +} +//add_action( 'admin_head', 'fix_svg' ); \ No newline at end of file diff --git a/plugin/blocks/src/components/controls/iconSelect.js b/plugin/blocks/src/components/controls/iconSelect.js new file mode 100644 index 00000000..6f11fc92 --- /dev/null +++ b/plugin/blocks/src/components/controls/iconSelect.js @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import { SelectControl } from '@wordpress/components'; + +import * as icons from '@wordpress/icons'; + +const iconOptions = Object.keys(icons).map((key) => + key === 'Icon' ? { label: '', key: '' } : { label: key, value: key } +); + +export default function( { attributes, setAttributes } ) { + const { icon } = attributes; + + return ( + { + setAttributes( { icon: newVal } ); + } } + /> + ); +} \ No newline at end of file diff --git a/plugin/blocks/src/components/form-input/edit.js b/plugin/blocks/src/components/form-input/edit.js index 19b7443c..a55122f2 100644 --- a/plugin/blocks/src/components/form-input/edit.js +++ b/plugin/blocks/src/components/form-input/edit.js @@ -195,7 +195,7 @@ function InputFieldBlock( { attributes, setAttributes, className, context, clien } data-empty={ label ? false : true } /> - + )} { displayAsToggle && ( ) } diff --git a/plugin/blocks/src/components/form-input/style.scss b/plugin/blocks/src/components/form-input/style.scss index e52a2699..f2336703 100644 --- a/plugin/blocks/src/components/form-input/style.scss +++ b/plugin/blocks/src/components/form-input/style.scss @@ -25,6 +25,7 @@ input.is-toggle:checked + label .toggle-container::after { } input.is-toggle:checked + label .toggle-container { background-color: var(--wp--preset--color--accent-primary, #7983ff ); + border: none; } input.is-toggle { diff --git a/plugin/blocks/src/components/icon/block.json b/plugin/blocks/src/components/icon/block.json index d48fa810..bfc698a9 100644 --- a/plugin/blocks/src/components/icon/block.json +++ b/plugin/blocks/src/components/icon/block.json @@ -22,8 +22,8 @@ "default": "wordpress" }, "size": { - "type": "integer", - "default": 24 + "type": "string", + "default": "24" } } } diff --git a/plugin/blocks/src/components/icon/edit.js b/plugin/blocks/src/components/icon/edit.js index cbbec036..8aeb9e16 100644 --- a/plugin/blocks/src/components/icon/edit.js +++ b/plugin/blocks/src/components/icon/edit.js @@ -9,22 +9,21 @@ import classNames from 'classnames'; import { __ } from '@wordpress/i18n'; import { InspectorControls, - RichText, useBlockProps, } from '@wordpress/block-editor'; -import { PanelBody, SelectControl, TextControl } from '@wordpress/components'; +import { PanelBody,TextControl } from '@wordpress/components'; import * as icons from '@wordpress/icons'; const Icon = icons.Icon; -const iconOptions = Object.keys( icons ).map( ( key ) => - key === 'Icon' ? { label: '', key: '' } : { label: key, value: key } -); /** * * Internal dependencies */ + +import IconSelect from '../controls/iconSelect.js'; + export default function ( { attributes, setAttributes, className } ) { const { icon, size } = attributes; const blockProps = useBlockProps(); @@ -32,14 +31,7 @@ export default function ( { attributes, setAttributes, className } ) { const controls = ( - { - setAttributes( { icon: newVal } ); - } } - /> + @@ -56,7 +57,8 @@ export default function Edit( { const controls = ( - + + + { + setAttributes({ position: newVal }); + }} + hint={__('Select the position of the menu')} + /> + ); + const positionCss = position === 'left' ? { right: 0} : {left: 0}; + return ( <> {controls} @@ -79,7 +96,7 @@ export default function Edit( { 'wpcloud-more-menu-wrapper' ) } > - + +
diff --git a/plugin/blocks/src/components/more-menu/editor.scss b/plugin/blocks/src/components/more-menu/editor.scss index eb192014..3418ad2f 100644 --- a/plugin/blocks/src/components/more-menu/editor.scss +++ b/plugin/blocks/src/components/more-menu/editor.scss @@ -1,7 +1,7 @@ .wpcloud-more-menu-wrapper { position: relative; - button { + .wpcloud-more-menu__button { border: none; background: none; color: var(--wp--preset--color--foreground-secondary); @@ -22,11 +22,15 @@ &.hide-menu { display: none; } + width: fit-content; min-width: 180px; background-color: var(--wp--preset--color--background-secondary, #FFFFFF ); .wpcloud-site-list-menu__title { text-align: center; } + p { + max-width: 360px; + } } .wpcloud-more-menu__row { diff --git a/plugin/blocks/src/components/more-menu/save.js b/plugin/blocks/src/components/more-menu/save.js index ece9c4de..18530f7a 100644 --- a/plugin/blocks/src/components/more-menu/save.js +++ b/plugin/blocks/src/components/more-menu/save.js @@ -7,10 +7,13 @@ import classNames from 'classnames'; * WordPress dependencies */ import { InnerBlocks, useBlockProps } from '@wordpress/block-editor'; -import { Icon, moreVertical } from '@wordpress/icons'; +import * as icons from '@wordpress/icons'; +const { Icon } = icons; -export default function save() { +export default function save({ attributes }) { + const { icon, position } = attributes; const blockProps = useBlockProps.save(); + const positionCss = position == 'left' ? {right: 0} : {left: 0}; return (
-
diff --git a/plugin/blocks/src/components/site-card/render.php b/plugin/blocks/src/components/site-card/render.php index 6f965acd..093cb3e3 100644 --- a/plugin/blocks/src/components/site-card/render.php +++ b/plugin/blocks/src/components/site-card/render.php @@ -8,14 +8,23 @@ return; } + + // @TODO get real site thumbnail $site_thumbnail = wpcloud_station_get_assets_url( '/images/Gravatar_filled_' . get_the_ID() % 5 . '.png' ); $wrapper = 'div'; $classNames = $attributes['className'] ?? ''; +$post_in_loop_id = get_the_ID(); +$post_id = get_queried_object_id(); +if ( $post_in_loop_id === $post_id ) { + $classNames .= ' is-current'; +} + $wrapper_attributes = $wrapper . ' ' . get_block_wrapper_attributes( array( 'class' => trim( $classNames ) ) ); -$domain = wpcloud_get_site_detail( get_the_ID(), 'domain_name' ); + +$domain = wpcloud_get_site_detail( $post_in_loop_id, 'domain_name' ); if (is_wp_error($domain)) { error_log('Error getting domain name: ' . $domain->get_error_message()); $domain = ''; diff --git a/plugin/custom-post-types/wpcloud-site.php b/plugin/custom-post-types/wpcloud-site.php index 97681907..daf74962 100644 --- a/plugin/custom-post-types/wpcloud-site.php +++ b/plugin/custom-post-types/wpcloud-site.php @@ -648,6 +648,11 @@ function wpcloud_should_refresh_detail( string $key ): bool { return in_array( $key, $refresh_keys, true ); } + +/** + * Get the current site ID. + * @return int The site ID. + */ function wpcloud_get_current_site_id(): int { $post_id = get_the_ID(); if ( ! $post_id ) { diff --git a/plugin/includes/class-wpcloud-site.php b/plugin/includes/class-wpcloud-site.php index 4a9df7f9..e66f0d7a 100644 --- a/plugin/includes/class-wpcloud-site.php +++ b/plugin/includes/class-wpcloud-site.php @@ -115,7 +115,7 @@ public static function get_detail_options(): array { 'wp_version' => __( 'WP Version' ), 'php_version' => __( 'PHP Version' ), 'static_file_404' => __( 'Static File 404' ), - 'db_pass' => __( 'DB Password' ), + // 'db_pass' => __( 'DB Password' ), 'db_charset' => __( 'DB Charset' ), 'db_collate' => __( 'DB Collate' ), 'cache_prefix' => __( 'Cache Prefix' ), @@ -160,24 +160,28 @@ public static function get_meta_options(): array { 'default' => 'utf8mb4', 'hint' => '', ], + "db_collate" => [ 'type' => 'select', 'options' => [ "latin1_swedish_ci" => "latin1_swedish_ci", "utf8_general_ci" => "utf8_general_ci", "utf8mb4_unicode_ci" => "utf8mb4_unicode_ci" ], 'default' => 'utf8mb4_unicode_ci', 'hint' => '', ], + "suspended" => [ 'type' => 'select', 'options' => ["404" => __("404 - Not Found "), "410" => __( "410 - Gone" ), "451" => __( "451 - Unavailable For Legal Reasons" ), "480" => __( "480 - Temporarily Unavailable" ) ], 'default' => '480', 'hint' => __('Suspends a site. The value is the HTTP 4xx status code the site will respond with. The supported statuses are "404", "410", "451", and "480".'), ], + "suspend_after" => [ 'type' => 'text', 'options' => null, 'default' => false, 'hint' => __( 'Suspends a site after a specified time. The value is a unix Timestamp.' ), ], + "php_version" => [ 'type' => 'select', 'options' => wpcloud_client_php_versions_available(), @@ -217,13 +221,6 @@ public static function get_meta_options(): array { 'hint' => __( 'Facilitates protection of site assets. May be set to "wp_uploads" to block logged-out requests for WP uploads. If set, an AT_PRIVACY_MODEL constant will be defined in the PHP environment. Use the "site-wordpress-version" endpoint to set "wp_version".' ) ], - "geo_affinity" => [ - 'type' => 'select', - 'options' => wpcloud_client_data_centers_available(), - 'default' => '', - 'hint' => __('Sets the sites geo affinity.'), - ], - "static_file_404" => [ 'type' => 'select', 'options' => [ "lightweight" => __( 'Lightweight' ), "wordpress" => __( 'WordPress' )], diff --git a/plugin/includes/wpcloud-client.php b/plugin/includes/wpcloud-client.php index 06665c2d..78111994 100644 --- a/plugin/includes/wpcloud-client.php +++ b/plugin/includes/wpcloud-client.php @@ -556,7 +556,6 @@ function wpcloud_client_site_meta_keys(): array { "max_space_quota" => __( 'Max Space Quota (Gigabytes)' ), "photon_subsizes" => __( 'Photon Subsizes' ), "privacy_model" => __( 'Privacy Model' ), - "geo_affinity" => __( 'Geo Affinity' ), "static_file_404" => __( 'Static File 404' ), "default_php_conns" => __( 'Default PHP Connections' ), "burst_php_conns" => __( 'Burst PHP Connections' ), diff --git a/theme/assets/blocks/src/core-query.css b/theme/assets/blocks/src/core-query.css new file mode 100644 index 00000000..5239f204 --- /dev/null +++ b/theme/assets/blocks/src/core-query.css @@ -0,0 +1,13 @@ +& { + &.wpcloud-site-list--sidebar { + max-width: 400px;; + .wp-block-wpcloud-site-card { + margin: 0; + padding: 11px 16px; + border-bottom: 1px solid var(--wp--preset--color--border-primary); + &.is-current { + background-color: var(--wp--preset--color--background-secondary); + } + } + } +} \ No newline at end of file diff --git a/theme/assets/blocks/src/wpcloud-button.css b/theme/assets/blocks/src/wpcloud-button.css index 8db75165..a4a0f98e 100644 --- a/theme/assets/blocks/src/wpcloud-button.css +++ b/theme/assets/blocks/src/wpcloud-button.css @@ -3,6 +3,7 @@ max-height: 38px; display: flex; align-items: center; + letter-spacing: 0.03rem; .wpcloud-block-button__content { display: flex; @@ -21,6 +22,15 @@ background: transparent; color: var(--wp--preset--color--foreground-primary); padding: 0; + .wpcloud-block-icon { + padding-left: 4px; + } + } + &:not(.wpcloud-block-button__text) { + max-height: 32px; + .wpcloud-block-icon { + padding-left: 8px; + } } .wpcloud-block-button__label { diff --git a/theme/assets/blocks/src/wpcloud-expanding-content.css b/theme/assets/blocks/src/wpcloud-expanding-content.css index 2e806eb5..66258a78 100644 --- a/theme/assets/blocks/src/wpcloud-expanding-content.css +++ b/theme/assets/blocks/src/wpcloud-expanding-content.css @@ -19,6 +19,10 @@ border-top-right-radius: 0; } .wpcloud-block-expanding-section__content-inner { - padding: 5px 16px; + padding: 1rem; + } + .wp-block-wpcloud-form { + margin-top: 0; + } } diff --git a/theme/assets/blocks/src/wpcloud-expanding-header.css b/theme/assets/blocks/src/wpcloud-expanding-header.css index 96a567d8..19dc3287 100644 --- a/theme/assets/blocks/src/wpcloud-expanding-header.css +++ b/theme/assets/blocks/src/wpcloud-expanding-header.css @@ -25,12 +25,18 @@ } .wpcloud-block-expanding-section__header { padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50); + color: var(--wp--preset--color--foreground-secondary); display: flex; align-items: center; gap: 12px; .wp-block-heading { flex: 2; } + .wp-block-heading { + margin: 8px 0; + text-transform: none; + font-weight: normal; + } } .wpcloud_expanding_section_header_chevron { transition: transform 0.5s ease-in-out; diff --git a/theme/assets/blocks/src/wpcloud-form-input.css b/theme/assets/blocks/src/wpcloud-form-input.css index 4dbdd6b1..a3e1551c 100644 --- a/theme/assets/blocks/src/wpcloud-form-input.css +++ b/theme/assets/blocks/src/wpcloud-form-input.css @@ -36,6 +36,12 @@ .toggle-container { margin-right: 6px; } + &:checked + label .toggle-container { + border: none; + } + &:checked { + background-color: blue; + } } .wpcloud-block-expanding-section { background: none; diff --git a/theme/assets/blocks/src/wpcloud-form.css b/theme/assets/blocks/src/wpcloud-form.css index 1f19c585..e2adf4de 100644 --- a/theme/assets/blocks/src/wpcloud-form.css +++ b/theme/assets/blocks/src/wpcloud-form.css @@ -1,6 +1,7 @@ & { display: flex; flex-direction: column; + margin-top: 1rem; &.is-inline { flex-direction: row; justify-content: space-between; diff --git a/theme/assets/blocks/src/wpcloud-more-menu.css b/theme/assets/blocks/src/wpcloud-more-menu.css index df9d83d9..4fc9e89d 100644 --- a/theme/assets/blocks/src/wpcloud-more-menu.css +++ b/theme/assets/blocks/src/wpcloud-more-menu.css @@ -20,14 +20,16 @@ right: 0; z-index: 10; + width: fit-content; + min-width: 180px; + background-color: var(--wp--preset--color--background-secondary); display: none; flex-direction: column; margin: 0; - padding: 16px 24px 8px; - min-width: 138px; + padding: 8px 16px; box-shadow: 0px 2px 10px 0px #00000040; border-radius: 10px; @@ -68,7 +70,10 @@ justify-content: space-between; font-size: var(--wp--preset--font-size--body-medium); } - } - + p { + max-width: 360px; + width: fit-content; + } + } } \ No newline at end of file diff --git a/theme/assets/blocks/src/wpcloud-site-alias-list.css b/theme/assets/blocks/src/wpcloud-site-alias-list.css index fd1ae9ec..8ecc3915 100644 --- a/theme/assets/blocks/src/wpcloud-site-alias-list.css +++ b/theme/assets/blocks/src/wpcloud-site-alias-list.css @@ -21,8 +21,11 @@ } .wpcloud-block-site-alias-list__row, .wpcloud-block-site-alias-list__row--primary { padding: 20px 0; - &:not(:last-child) { - border-bottom: 1px solid var(--wp--preset--color--background-tertiary); + &:not(:first-child) { + border-top: 1px solid var(--wp--preset--color--background-tertiary); + } + &:last-child { + padding-bottom: 0; } } diff --git a/theme/assets/blocks/src/wpcloud-site-card.css b/theme/assets/blocks/src/wpcloud-site-card.css index d6496531..f8e58d30 100644 --- a/theme/assets/blocks/src/wpcloud-site-card.css +++ b/theme/assets/blocks/src/wpcloud-site-card.css @@ -47,11 +47,15 @@ } } - &.wpcloud-site-card--current { + &.wpcloud-site-card--primary { grid-template-columns: 56px 1fr; grid-template-rows: repeat(2, 28px); + h2 { + align-self: center; + } + img { width: 56px; } @@ -68,4 +72,6 @@ } } } + + } diff --git a/theme/assets/blocks/src/wpcloud-site-detail.css b/theme/assets/blocks/src/wpcloud-site-detail.css index a8ff7d1b..b89c0c57 100644 --- a/theme/assets/blocks/src/wpcloud-site-detail.css +++ b/theme/assets/blocks/src/wpcloud-site-detail.css @@ -2,6 +2,7 @@ display: flex; flex-direction: column; gap: 0.25em; + margin-top: 1rem; &.is-inline { flex-direction: row; @@ -24,12 +25,7 @@ } .wpcloud-block-site-detail__title { - margin-top: var(--wp--preset--spacing--50); - margin-bottom: var(--wp--preset--spacing--20); - - h4 { - margin: 0; - } + margin-bottom: var(--wp--preset--spacing--30); } .wpcloud-block-site-detail__title-content { @@ -37,6 +33,7 @@ margin: 0; color: var(--wp--preset--color--foreground-secondary); font-size: var(--wp--preset--font-size--body-small); + font-weight: normal;; } .wpcloud-block-site-detail__value { diff --git a/theme/assets/blocks/src/wpcloud-site-template.css b/theme/assets/blocks/src/wpcloud-site-template.css index d46d0e1e..c51bd9ce 100644 --- a/theme/assets/blocks/src/wpcloud-site-template.css +++ b/theme/assets/blocks/src/wpcloud-site-template.css @@ -3,11 +3,14 @@ border-collapse: collapse; th { - color: var(--wp--preset--color-foreground-secondary); + color: var(--wp--preset--color--foreground-secondary); border: none; + padding-top: 13px; + padding-bottom: 18px; h2 { font-weight: 400; font-size: var(--wp--preset--font-size--small-caps); + color: var(--wp--preset--color--foreground-secondary); text-transform: uppercase; } svg { diff --git a/theme/assets/blocks/src/wpcloud-ssh-user-list.css b/theme/assets/blocks/src/wpcloud-ssh-user-list.css index 1af069e7..9c982175 100644 --- a/theme/assets/blocks/src/wpcloud-ssh-user-list.css +++ b/theme/assets/blocks/src/wpcloud-ssh-user-list.css @@ -25,5 +25,8 @@ &:not(:last-child) { border-bottom: 1px solid var(--wp--preset--color--background-tertiary); } + &:last-child { + padding-bottom: 0; + } } } \ No newline at end of file diff --git a/theme/bin/build-theme-css.js b/theme/bin/build-theme-css.js index 4dd479d1..e5394d66 100755 --- a/theme/bin/build-theme-css.js +++ b/theme/bin/build-theme-css.js @@ -36,6 +36,8 @@ async function main() { const filters = process.argv.slice(2).filter(arg => !arg.startsWith('-')); if (filters.length > 0) { blocks = Object.keys(blocks).filter(block => filters.find(filter => block.startsWith(filter))); + } else { + blocks = Object.keys(blocks); } for (const block of blocks) { diff --git a/theme/package.json b/theme/package.json index 84abf741..9d2b0db0 100644 --- a/theme/package.json +++ b/theme/package.json @@ -7,7 +7,7 @@ "buildThemeCss": "bin/build-theme-css.js" }, "scripts": { - "build:css": "node bin/build-theme-css.js wpcloud", + "build:css": "node bin/build-theme-css.js", "watch:css": "onchange 'assets/blocks/src/*.css' -- npm run build:css" }, "repository": { diff --git a/theme/templates/archive-wpcloud_site.html b/theme/templates/archive-wpcloud_site.html index b6373ee6..4f3c8fea 100644 --- a/theme/templates/archive-wpcloud_site.html +++ b/theme/templates/archive-wpcloud_site.html @@ -11,10 +11,6 @@

Sites

- - - -
@@ -43,8 +39,8 @@

PHP

-
- +
+ @@ -93,16 +89,16 @@

Actions

-
phpMyAdmin - +
phpMyAdmin +
-
WP Admin - +
WP Admin +
diff --git a/theme/templates/single-wpcloud_site.html b/theme/templates/single-wpcloud_site.html index 1bec941e..869c2ef0 100644 --- a/theme/templates/single-wpcloud_site.html +++ b/theme/templates/single-wpcloud_site.html @@ -1,8 +1,12 @@ + + + + -
-
+
+
@@ -22,8 +26,8 @@

Sites

- -
+ +

Site Name

Site Domain

@@ -33,52 +37,40 @@

Sites

- -
-
-

Site Name

Site Domain

+ +
+
+

Site Name

Site Domain

- - - -
-
-

Admin

+
+

Admin

-
WP Admin - +
WP Admin +
- - - -
WP Admin User
{ WP Admin User }
Admin Email
{ Admin Email }
- - - -
WP Admin URL
{ WP Admin URL }
-
-
+
+

Site Info

@@ -86,61 +78,41 @@

Site Info

phpMyAdmin
-
+ - - - - - -
DB Password
{ DB Password }
- - -
-
- -
- -