Skip to content

Commit

Permalink
Polish styles and layouts
Browse files Browse the repository at this point in the history
  • Loading branch information
@t-hamano
t-hamano committed Oct 15, 2024
1 parent cc2c6f2 commit da3fda3
Show file tree
Hide file tree
Showing 131 changed files with 1,363 additions and 1,563 deletions.
8 changes: 4 additions & 4 deletions classes/class-classic-editor.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ public function admin_footer() {
<div class="chbe-dialog__setting">
<h3 class="chbe-dialog__subtitle"><?php esc_html_e( 'Current Indent', 'custom-html-block-extension' ); ?></h3>
<fieldset>
<legend><?php esc_html_e( 'Current indent type', 'custom-html-block-extension' ); ?></legend>
<legend><?php esc_html_e( 'Indent type', 'custom-html-block-extension' ); ?></legend>
<label>
<?php esc_html_e( 'Space', 'custom-html-block-extension' ); ?>
<input type="radio" name="before_insert_spaces" value="1" <?php checked( $settings['insertSpaces'] ); ?>>
Expand All @@ -164,15 +164,15 @@ public function admin_footer() {
</label>
</fieldset>
<p id="chbe-item-before-tab-size" style="<?php if ( ! $settings['insertSpaces'] ) echo 'display:none;'; ?>">
<label for="chbe_before_tab_size"><strong><?php esc_html_e( 'Current indent width', 'custom-html-block-extension' ); ?></strong></label>
<label for="chbe_before_tab_size"><strong><?php esc_html_e( 'Indent width', 'custom-html-block-extension' ); ?></strong></label>
<input type="number" id="chbe_before_tab_size" name="before_tab_size" min="1" max="8" value="<?php echo esc_attr( $settings['tabSize'] ); ?>">
</p>
</div>
<span class="chbe-dialog__arrow dashicons dashicons-arrow-right-alt"></span>
<div class="chbe-dialog__setting">
<h3 class="chbe-dialog__subtitle"><?php esc_html_e( 'New Indent', 'custom-html-block-extension' ); ?></h3>
<fieldset>
<legend><?php esc_html_e( 'New indent type', 'custom-html-block-extension' ); ?></legend>
<legend><?php esc_html_e( 'Indent type', 'custom-html-block-extension' ); ?></legend>
<label>
<?php esc_html_e( 'Space', 'custom-html-block-extension' ); ?>
<input type="radio" name="after_insert_spaces" value="1" <?php checked( $settings['insertSpaces'] ); ?>>
Expand All @@ -183,7 +183,7 @@ public function admin_footer() {
</label>
</fieldset>
<p id="chbe-item-after-tab-size" style="<?php if ( ! $settings['insertSpaces'] ) echo 'display:none;'; ?>">
<label for="chbe_after_tab_size"><strong><?php esc_html_e( 'New indent width', 'custom-html-block-extension' ); ?></strong></label>
<label for="chbe_after_tab_size"><strong><?php esc_html_e( 'Indent width', 'custom-html-block-extension' ); ?></strong></label>
<input type="number" id="chbe_after_tab_size" name="after_tab_size" min="1" max="8" value="<?php echo esc_attr( $settings['tabSize'] ); ?>">
</p>
</div>
Expand Down
28 changes: 16 additions & 12 deletions src/admin/components/header/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,12 @@
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import {
Icon,
__experimentalHeading as Heading,
__experimentalHStack as HStack,
__experimentalVStack as VStack,
} from '@wordpress/components';

/**
* Internal dependencies
Expand All @@ -14,18 +20,16 @@ export default function Header() {
return (
<header className="chbe-admin-header">
<div className="chbe-admin-container">
<h1 className="chbe-admin-header__title">
{ BlockIcon }
{ __( 'Custom HTML Block Extension', 'custom-html-block-extension' ) }
</h1>
<ul className="chbe-admin-header__info">
<li className="chbe-admin-header__info-item">
<WelcomeGuide />
</li>
<li className="chbe-admin-header__info-item">
<Shortcut />
</li>
</ul>
<Heading as="h1" justify="center">
<HStack justify="center">
<Icon icon={ BlockIcon } size={ 32 } />
<span>{ __( 'Custom HTML Block Extension', 'custom-html-block-extension' ) }</span>
</HStack>
</Heading>
<VStack className="chbe-admin-header__info">
<WelcomeGuide />
<Shortcut />
</VStack>
</div>
</header>
);
Expand Down
22 changes: 2 additions & 20 deletions src/admin/components/header/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,29 +1,11 @@
.chbe-admin-header {
padding: $grid-unit-20 0 $grid-unit-10;
padding: $grid-unit-20 0;
background-color: $white;

.chbe-admin-header__title {
display: flex;
gap: $grid-unit-20;
align-items: center;
justify-content: center;
margin: 0 0 $grid-unit-10;
line-height: 1;

@media screen and (max-width: 782px) {
font-size: 20px;
}

svg {
width: $grid-unit-40;
}
}

.chbe-admin-header__info {
position: absolute;
top: 0;
right: $grid-unit-20;
margin: 0;
right: $grid-unit-20 + $grid-unit-05;

@media screen and (max-width: 782px) {
position: static;
Expand Down
91 changes: 49 additions & 42 deletions src/admin/components/shortcut/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,15 +4,20 @@
import { __ } from '@wordpress/i18n';
import { useState } from '@wordpress/element';
import { info } from '@wordpress/icons';
import { Button, ExternalLink, Modal } from '@wordpress/components';
import {
Button,
ExternalLink,
Modal,
__experimentalText as Text,
__experimentalVStack as VStack,
} from '@wordpress/components';

export default function Shortcut() {
const [ isModalOpen, setIsModalOpen ] = useState( false );

return (
<>
<Button
className="chbe-admin-shortcut-toggle"
variant="tertiary"
size="small"
icon={ info }
Expand All @@ -27,46 +32,48 @@ export default function Shortcut() {
title={ __( 'About shortcut', 'custom-html-block-extension' ) }
onRequestClose={ () => setIsModalOpen( false ) }
>
<p>
{ __(
'This plugin is made with "Monaco Editor", the code editor behind VS Code.',
'custom-html-block-extension'
) }
</p>
<p>
{ __(
'So you can use many of keyboard shortcuts available in VS Code on custom HTML block.',
'custom-html-block-extension'
) }
</p>
<p>
{ __(
'Check the following link for a list of shortcuts.',
'custom-html-block-extension'
) }
</p>
<ul>
<li>
<ExternalLink
href={ __(
'https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf',
'custom-html-block-extension'
) }
>
{ __( 'Keyboard shortcuts for Windows', 'custom-html-block-extension' ) }
</ExternalLink>
</li>
<li>
<ExternalLink
href={ __(
'https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf',
'custom-html-block-extension'
) }
>
{ __( 'Keyboard shortcuts for macOS', 'custom-html-block-extension' ) }
</ExternalLink>
</li>
</ul>
<VStack spacing={ 4 }>
<Text as="p">
{ __(
'This plugin is made with "Monaco Editor", the code editor behind VS Code.',
'custom-html-block-extension'
) }
</Text>
<Text as="p">
{ __(
'So you can use many of keyboard shortcuts available in VS Code on custom HTML block.',
'custom-html-block-extension'
) }
</Text>
<Text as="p">
{ __(
'Check the following link for a list of shortcuts.',
'custom-html-block-extension'
) }
</Text>
<ul>
<li>
<ExternalLink
href={ __(
'https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf',
'custom-html-block-extension'
) }
>
{ __( 'Keyboard shortcuts for Windows', 'custom-html-block-extension' ) }
</ExternalLink>
</li>
<li>
<ExternalLink
href={ __(
'https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf',
'custom-html-block-extension'
) }
>
{ __( 'Keyboard shortcuts for macOS', 'custom-html-block-extension' ) }
</ExternalLink>
</li>
</ul>
</VStack>
</Modal>
) }
</>
Expand Down
4 changes: 0 additions & 4 deletions src/admin/components/shortcut/style.scss
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,5 @@
.chbe-admin-shortcut-modal {

p {
margin: 0 0 $grid-unit-20 0;
}

ul {
padding-left: 1.5em;
margin: 0;
Expand Down
Loading

0 comments on commit da3fda3

Please sign in to comment.