Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Polish styles, layouts and labels #123

Merged
merged 1 commit into from
Oct 15, 2024
Merged

Polish styles, layouts and labels #123

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions classes/class-classic-editor.php
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading