mirror of
https://github.com/WenPai-org/wpmind.git
synced 2025-08-06 13:47:16 +08:00
improved structure
added store to control the popup changed popup colors
This commit is contained in:
Nikita
parent
1fc59be401
commit
26081c84ec
20 changed files with 454 additions and 12970 deletions
|
|
@ -1 +1 @@
|
|||
<?php return array('dependencies' => array('lodash', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n', 'wp-react-refresh-runtime'), 'version' => '7a7febaf218bcb4733d0');
|
||||
<?php return array('dependencies' => array('lodash', 'wp-block-editor', 'wp-components', 'wp-compose', 'wp-data', 'wp-dom-ready', 'wp-element', 'wp-hooks', 'wp-i18n'), 'version' => '6dac87034627fdfc401f');
|
||||
|
|
|
|||
12745
build/index.js
12745
build/index.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,57 +1,5 @@
|
|||
/*!***************************************************************************************************************************************************************************************************************************************!*\
|
||||
!*** css ./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[4].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[4].use[2]!./node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[4].use[3]!./src/style.scss ***!
|
||||
\***************************************************************************************************************************************************************************************************************************************/
|
||||
.mind-toolbar-icon {
|
||||
color: #e455df;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mind-toolbar-dropdown-wrapper {
|
||||
width: 100%;
|
||||
}
|
||||
.mind-toolbar-dropdown-wrapper button {
|
||||
width: 100%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
}
|
||||
.mind-toolbar-dropdown-wrapper button .dashicon {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.mind-editor-toolbar-toggle {
|
||||
flex: 100%;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mind-editor-toolbar-toggle button {
|
||||
color: #e455df;
|
||||
}
|
||||
.mind-editor-toolbar-toggle button:hover, .mind-editor-toolbar-toggle button:focus {
|
||||
color: #e455df;
|
||||
background: rgba(228, 85, 223, 0.05);
|
||||
}
|
||||
.mind-editor-toolbar-toggle svg {
|
||||
margin-top: -2px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.mind-popup {
|
||||
width: 800px;
|
||||
margin-top: 100px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2), 0 25px 70px 10px rgba(0, 0, 0, 0.25);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
}
|
||||
.mind-popup .components-modal__header {
|
||||
padding: 24px 20px 12px;
|
||||
}
|
||||
.mind-popup .components-modal__content {
|
||||
padding: 0 20px 20px;
|
||||
}
|
||||
|
||||
.mind-popup-overlay {
|
||||
background-color: rgba(143, 135, 143, 0.25);
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style-index.css.map*/
|
||||
:root{--mind-brand-color:#e455df}
|
||||
.mind-popup{color:#000;margin-top:0;max-height:380px;position:relative;top:15%;width:750px}.mind-popup .components-modal__content{padding:0}.mind-popup .components-modal__content>div{display:flex;flex-direction:column;height:100%}.mind-popup-overlay{z-index:1000001}.mind-popup-content{flex:1;overflow:auto;padding:10px}.mind-popup-footer{background-color:#f6f6f6;border-top:1px solid #e8e7e7;padding:10px}.mind-popup-footer-logo{color:var(--mind-brand-color);display:flex;font-weight:500;gap:6px}.mind-popup-prompts{display:flex;flex-direction:column}.mind-popup-prompts .mind-popup-prompts-category{color:#b5b1b1;font-weight:500;padding:20px 10px 10px}.mind-popup-prompts .mind-popup-prompts-button{background-color:transparent;border:none;border-radius:5px;color:#000;padding:10px;text-align:left}.mind-popup-prompts .mind-popup-prompts-button:focus,.mind-popup-prompts .mind-popup-prompts-button:hover{background-color:rgba(0,0,0,.05)}
|
||||
.mind-icon{color:var(--mind-brand-color);height:20px;width:20px}
|
||||
.mind-toolbar-dropdown-wrapper{width:100%}.mind-toolbar-dropdown-wrapper button{padding-left:8px;padding-right:8px;width:100%}.mind-toolbar-dropdown-wrapper button .dashicon{margin-left:auto}
|
||||
.mind-post-toolbar-toggle{flex:100%;white-space:nowrap}.mind-post-toolbar-toggle button{--wp-components-color-accent:var(--mind-brand-color);color:var(--mind-brand-color);font-weight:500;position:relative}.mind-post-toolbar-toggle button:after{bottom:0;content:"";left:0;opacity:.05;position:absolute;right:0;top:0}.mind-post-toolbar-toggle button:focus,.mind-post-toolbar-toggle button:hover{color:var(--mind-brand-color)}.mind-post-toolbar-toggle button:focus:after,.mind-post-toolbar-toggle button:hover:after{background-color:var(--mind-brand-color)}.mind-post-toolbar-toggle svg{margin-bottom:-2px;margin-right:6px;margin-top:-2px}
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"file":"./style-index.css","mappings":";;;AAGA;EACC,cAJO;EAKP;EACA;AAFD;;AAKA;EACC;AAFD;AAIC;EACC;EACA;EACA;AAFF;AAIE;EACC;AAFH;;AAQA;EACC;EACA;AALD;AAOC;EACC,cA7BM;AAwBR;AAOE;EAEC,cAjCK;EAkCL;AANH;AAUC;EACC;EACA;EACA;AARF;;AAaA;EACC;EACA;EACA;EACA;EACA;AAVD;AAYC;EACC;AAVF;AAYC;EACC;AAVF;;AAaA;EACC;AAVD,C","sources":["webpack://mind/./src/style.scss"],"sourcesContent":["$color: #e455df;\n$popup_padding: 20px;\n\n.mind-toolbar-icon {\n\tcolor: $color;\n\twidth: 20px;\n\theight: 20px;\n}\n\n.mind-toolbar-dropdown-wrapper {\n\twidth: 100%;\n\n\tbutton {\n\t\twidth: 100%;\n\t\tpadding-left: 8px;\n\t\tpadding-right: 8px;\n\n\t\t.dashicon {\n\t\t\tmargin-left: auto;\n\t\t}\n\t}\n}\n\n// Button in editor Toolbar.\n.mind-editor-toolbar-toggle {\n\tflex: 100%;\n\twhite-space: nowrap;\n\n\tbutton {\n\t\tcolor: $color;\n\n\t\t&:hover,\n\t\t&:focus {\n\t\t\tcolor: $color;\n\t\t\tbackground: rgba($color, 5%);\n\t\t}\n\t}\n\n\tsvg {\n\t\tmargin-top: -2px;\n\t\tmargin-right: 6px;\n\t\tmargin-bottom: -2px;\n\t}\n}\n\n// Popup.\n.mind-popup {\n\twidth: 800px;\n\tmargin-top: 100px;\n\tbackground-color: rgb(243, 243, 243);\n\tbox-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%), 0 25px 70px 10px rgba(0, 0, 0, 25%);\n\tborder: 1px solid rgba(255, 255, 255, 40%);\n\n\t.components-modal__header {\n\t\tpadding: 24px $popup_padding 12px;\n\t}\n\t.components-modal__content {\n\t\tpadding: 0 $popup_padding $popup_padding;\n\t}\n}\n.mind-popup-overlay {\n\tbackground-color: rgba(143, 135, 143, 25%);\n}\n"],"names":[],"sourceRoot":""}
|
||||
|
|
@ -1,8 +1,16 @@
|
|||
/**
|
||||
* Styles
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { useSelect } from '@wordpress/data';
|
||||
import { addFilter } from '@wordpress/hooks';
|
||||
import { BlockControls } from '@wordpress/block-editor';
|
||||
import { createHigherOrderComponent } from '@wordpress/compose';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import {
|
||||
ToolbarGroup,
|
||||
DropdownMenu,
|
||||
|
|
@ -14,7 +22,7 @@ import {
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TOOLBAR_ICON from './icon';
|
||||
import TOOLBAR_ICON from '../../utils/icon';
|
||||
|
||||
const ALLOWED_BLOCKS = ['core/paragraph', 'core/heading'];
|
||||
|
||||
|
|
@ -24,11 +32,11 @@ const ALLOWED_BLOCKS = ['core/paragraph', 'core/heading'];
|
|||
* @param {Object} data - block data.
|
||||
* @return {boolean} allowed.
|
||||
*/
|
||||
export function isToolbarAllowed(data) {
|
||||
function isToolbarAllowed(data) {
|
||||
return ALLOWED_BLOCKS.includes(data.name);
|
||||
}
|
||||
|
||||
export function Toolbar() {
|
||||
function Toolbar() {
|
||||
const { selectedBlocks, selectedClientIds, canRemove } = useSelect(
|
||||
(select) => {
|
||||
const {
|
||||
|
|
@ -47,6 +55,8 @@ export function Toolbar() {
|
|||
[]
|
||||
);
|
||||
|
||||
const { open } = useDispatch('mind/popup');
|
||||
|
||||
console.log(selectedClientIds);
|
||||
|
||||
// const { replaceBlocks } = useDispatch( blockEditorStore );
|
||||
|
|
@ -71,11 +81,21 @@ export function Toolbar() {
|
|||
return (
|
||||
<>
|
||||
<MenuGroup>
|
||||
<MenuItem>{__('Improve', 'mind')}</MenuItem>
|
||||
<MenuItem>{__('Paraphrase', 'mind')}</MenuItem>
|
||||
<MenuItem>{__('Simplify', 'mind')}</MenuItem>
|
||||
<MenuItem>{__('Expand', 'mind')}</MenuItem>
|
||||
<MenuItem>{__('Shorten', 'mind')}</MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Improve', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Paraphrase', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Simplify', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Expand', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Shorten', 'mind')}
|
||||
</MenuItem>
|
||||
</MenuGroup>
|
||||
<MenuGroup>
|
||||
<DropdownMenu
|
||||
|
|
@ -95,13 +115,13 @@ export function Toolbar() {
|
|||
return (
|
||||
<>
|
||||
<MenuGroup>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Casual', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Neutral', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Formal', 'mind')}
|
||||
</MenuItem>
|
||||
</MenuGroup>
|
||||
|
|
@ -126,25 +146,25 @@ export function Toolbar() {
|
|||
return (
|
||||
<>
|
||||
<MenuGroup>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Friendly', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__(
|
||||
'Professional',
|
||||
'mind'
|
||||
)}
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__('Witty', 'mind')}
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__(
|
||||
'Heartfelt',
|
||||
'mind'
|
||||
)}
|
||||
</MenuItem>
|
||||
<MenuItem>
|
||||
<MenuItem onClick={open}>
|
||||
{__(
|
||||
'Educational',
|
||||
'mind'
|
||||
|
|
@ -163,3 +183,34 @@ export function Toolbar() {
|
|||
</ToolbarGroup>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Override the default edit UI to include a new block inspector control for
|
||||
* assigning the custom attribute if needed.
|
||||
*
|
||||
* @param {Function} BlockEdit Original component.
|
||||
*
|
||||
* @return {string} Wrapped component.
|
||||
*/
|
||||
const withToolbarControl = createHigherOrderComponent((OriginalComponent) => {
|
||||
function MindToolbarToggle(props) {
|
||||
const allow = isToolbarAllowed(props);
|
||||
|
||||
if (!allow) {
|
||||
return <OriginalComponent {...props} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<OriginalComponent {...props} />
|
||||
<BlockControls group="other">
|
||||
<Toolbar />
|
||||
</BlockControls>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return MindToolbarToggle;
|
||||
}, 'withToolbarControl');
|
||||
|
||||
addFilter('editor.BlockEdit', 'mind/block-toolbar-toggle', withToolbarControl);
|
||||
13
src/extensions/block-toolbar/style.scss
Normal file
13
src/extensions/block-toolbar/style.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
.mind-toolbar-dropdown-wrapper {
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
|
||||
.dashicon {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,9 +1,11 @@
|
|||
import './style.scss';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { createRoot, useState } from '@wordpress/element';
|
||||
import { subscribe } from '@wordpress/data';
|
||||
import { createRoot } from '@wordpress/element';
|
||||
import { subscribe, useDispatch } from '@wordpress/data';
|
||||
import domReady from '@wordpress/dom-ready';
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { throttle } from 'lodash';
|
||||
|
|
@ -11,13 +13,12 @@ import { throttle } from 'lodash';
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TOOLBAR_ICON from './icon';
|
||||
import Popup from './popup';
|
||||
import TOOLBAR_ICON from '../../utils/icon';
|
||||
|
||||
const TOOLBAR_TOGGLE_CONTAINER_CLASS = 'mind-editor-toolbar-toggle';
|
||||
const TOOLBAR_TOGGLE_CONTAINER_CLASS = 'mind-post-toolbar-toggle';
|
||||
|
||||
function Toggle() {
|
||||
const [isOpened, setIsOpened] = useState(false);
|
||||
const { toggle } = useDispatch('mind/popup');
|
||||
|
||||
return (
|
||||
<>
|
||||
|
|
@ -27,19 +28,12 @@ function Toggle() {
|
|||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
|
||||
setIsOpened(!isOpened);
|
||||
toggle();
|
||||
}}
|
||||
>
|
||||
{TOOLBAR_ICON}
|
||||
{__('Open Mind', '@@text_domain')}
|
||||
</button>
|
||||
{isOpened ? (
|
||||
<Popup
|
||||
onClose={() => {
|
||||
setIsOpened(!isOpened);
|
||||
}}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
37
src/extensions/post-toolbar/style.scss
Normal file
37
src/extensions/post-toolbar/style.scss
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
.mind-post-toolbar-toggle {
|
||||
flex: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
button {
|
||||
--wp-components-color-accent: var(--mind-brand-color);
|
||||
|
||||
position: relative;
|
||||
color: var(--mind-brand-color);
|
||||
font-weight: 500;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
opacity: 0.05;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: var(--mind-brand-color);
|
||||
|
||||
&::after {
|
||||
background-color: var(--mind-brand-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: -2px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
}
|
||||
46
src/index.js
46
src/index.js
|
|
@ -3,48 +3,10 @@
|
|||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { addFilter } from '@wordpress/hooks';
|
||||
import { BlockControls } from '@wordpress/block-editor';
|
||||
import { createHigherOrderComponent } from '@wordpress/compose';
|
||||
|
||||
console.log(2);
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import './editor-toolbar-toggle';
|
||||
import { Toolbar, isToolbarAllowed } from './toolbar';
|
||||
|
||||
/**
|
||||
* Override the default edit UI to include a new block inspector control for
|
||||
* assigning the custom attribute if needed.
|
||||
*
|
||||
* @param {Function} BlockEdit Original component.
|
||||
*
|
||||
* @return {string} Wrapped component.
|
||||
*/
|
||||
const withToolbarControl = createHigherOrderComponent((OriginalComponent) => {
|
||||
function MindToolbarToggle(props) {
|
||||
const allow = isToolbarAllowed(props);
|
||||
|
||||
if (!allow) {
|
||||
return <OriginalComponent {...props} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<OriginalComponent {...props} />
|
||||
<BlockControls group="other">
|
||||
<Toolbar />
|
||||
</BlockControls>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return MindToolbarToggle;
|
||||
}, 'withToolbarControl');
|
||||
|
||||
addFilter('editor.BlockEdit', 'mind/block-toolbar-toggle', withToolbarControl);
|
||||
import './store';
|
||||
import './popup';
|
||||
import './extensions/block-toolbar';
|
||||
import './extensions/post-toolbar';
|
||||
|
|
|
|||
30
src/popup.js
30
src/popup.js
|
|
@ -1,30 +0,0 @@
|
|||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { Button, Modal } from '@wordpress/components';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TOOLBAR_ICON from './icon';
|
||||
|
||||
export default function Popup(props) {
|
||||
const { onClose } = props;
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={
|
||||
<>
|
||||
{TOOLBAR_ICON}
|
||||
{__('Mind', '@@text_domain')}
|
||||
</>
|
||||
}
|
||||
className="mind-popup"
|
||||
overlayClassName="mind-popup-overlay"
|
||||
onRequestClose={onClose}
|
||||
>
|
||||
{__('Hello there :)', '@@text_domain')}
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
175
src/popup/index.js
Normal file
175
src/popup/index.js
Normal file
|
|
@ -0,0 +1,175 @@
|
|||
/**
|
||||
* Styles
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { __ } from '@wordpress/i18n';
|
||||
import { createRoot } from '@wordpress/element';
|
||||
import { Modal } from '@wordpress/components';
|
||||
import { useSelect, useDispatch } from '@wordpress/data';
|
||||
import domReady from '@wordpress/dom-ready';
|
||||
|
||||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import TOOLBAR_ICON from '../utils/icon';
|
||||
|
||||
const POPUP_CONTAINER_CLASS = 'mind-popup-container';
|
||||
|
||||
const prompts = [
|
||||
// Base.
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Improve', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Paraphrase', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Simplify', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Expand', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Shorten', 'mind'),
|
||||
},
|
||||
|
||||
// Formality.
|
||||
{
|
||||
type: 'category',
|
||||
label: __('Formality', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Casual', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Neutral', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Formal', 'mind'),
|
||||
},
|
||||
|
||||
// Tone.
|
||||
{
|
||||
type: 'category',
|
||||
label: __('Tone', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Friendly', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Professional', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Witty', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Heartfelt', 'mind'),
|
||||
},
|
||||
{
|
||||
type: 'prompt',
|
||||
label: __('Educational', 'mind'),
|
||||
},
|
||||
];
|
||||
|
||||
export default function Popup(props) {
|
||||
const { onClose } = props;
|
||||
|
||||
const { close } = useDispatch('mind/popup');
|
||||
|
||||
const { isOpen } = useSelect((select) => {
|
||||
const { isOpen: checkIsOpen } = select('mind/popup');
|
||||
|
||||
return { isOpen: checkIsOpen() };
|
||||
});
|
||||
|
||||
if (!isOpen) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={false}
|
||||
className="mind-popup"
|
||||
overlayClassName="mind-popup-overlay"
|
||||
onRequestClose={() => {
|
||||
close();
|
||||
|
||||
if (onClose) {
|
||||
onClose();
|
||||
}
|
||||
}}
|
||||
__experimentalHideHeader
|
||||
>
|
||||
<div className="mind-popup-content">
|
||||
<div className="mind-popup-prompts">
|
||||
{prompts.map((data) => {
|
||||
if (data.type === 'category') {
|
||||
return (
|
||||
<span
|
||||
key={data.type + data.label}
|
||||
className="mind-popup-prompts-category"
|
||||
>
|
||||
{data.label}
|
||||
</span>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<button
|
||||
key={data.type + data.label}
|
||||
className="mind-popup-prompts-button"
|
||||
>
|
||||
{data.label}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mind-popup-footer">
|
||||
<div className="mind-popup-footer-logo">
|
||||
{TOOLBAR_ICON}
|
||||
{__('Mind', '@@text_domain')}
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
}
|
||||
|
||||
// .block-editor
|
||||
// Insert popup renderer in editor.
|
||||
domReady(() => {
|
||||
// Check if popup exists already.
|
||||
if (document.querySelector(`.${POPUP_CONTAINER_CLASS}`)) {
|
||||
return;
|
||||
}
|
||||
|
||||
const blockEditor = document.querySelector('.block-editor');
|
||||
|
||||
if (!blockEditor) {
|
||||
return;
|
||||
}
|
||||
|
||||
const toggleContainer = document.createElement('div');
|
||||
toggleContainer.classList.add(POPUP_CONTAINER_CLASS);
|
||||
|
||||
blockEditor.appendChild(toggleContainer);
|
||||
|
||||
const root = createRoot(toggleContainer);
|
||||
root.render(<Popup />);
|
||||
});
|
||||
66
src/popup/style.scss
Normal file
66
src/popup/style.scss
Normal file
|
|
@ -0,0 +1,66 @@
|
|||
// Popup.
|
||||
.mind-popup {
|
||||
position: relative;
|
||||
top: 15%;
|
||||
margin-top: 0;
|
||||
width: 750px;
|
||||
max-height: 380px;
|
||||
color: #000;
|
||||
|
||||
.components-modal__content {
|
||||
padding: 0;
|
||||
|
||||
> div {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
.mind-popup-overlay {
|
||||
// Upper then dropdown.
|
||||
z-index: 1000001;
|
||||
}
|
||||
|
||||
.mind-popup-content {
|
||||
overflow: auto;
|
||||
flex: 1;
|
||||
padding: 10px;
|
||||
}
|
||||
.mind-popup-footer {
|
||||
padding: 10px;
|
||||
background-color: #f6f6f6;
|
||||
border-top: 1px solid #e8e7e7;
|
||||
}
|
||||
.mind-popup-footer-logo {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
font-weight: 500;
|
||||
color: var(--mind-brand-color);
|
||||
}
|
||||
|
||||
.mind-popup-prompts {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.mind-popup-prompts-category {
|
||||
font-weight: 500;
|
||||
padding: 10px;
|
||||
padding-top: 20px;
|
||||
color: #b5b1b1;
|
||||
}
|
||||
|
||||
.mind-popup-prompts-button {
|
||||
background-color: transparent;
|
||||
color: #000;
|
||||
border: none;
|
||||
text-align: left;
|
||||
padding: 10px;
|
||||
border-radius: 5px;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(#000, 5%);
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/store/actions.js
Normal file
17
src/store/actions.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
export function open() {
|
||||
return {
|
||||
type: 'OPEN',
|
||||
};
|
||||
}
|
||||
|
||||
export function close() {
|
||||
return {
|
||||
type: 'CLOSE',
|
||||
};
|
||||
}
|
||||
|
||||
export function toggle() {
|
||||
return {
|
||||
type: 'TOGGLE',
|
||||
};
|
||||
}
|
||||
17
src/store/index.js
Normal file
17
src/store/index.js
Normal file
|
|
@ -0,0 +1,17 @@
|
|||
/**
|
||||
* Internal dependencies
|
||||
*/
|
||||
import reducer from './reducer';
|
||||
import * as selectors from './selectors';
|
||||
import * as actions from './actions';
|
||||
|
||||
/**
|
||||
* WordPress dependencies
|
||||
*/
|
||||
import { registerStore } from '@wordpress/data';
|
||||
|
||||
registerStore('mind/popup', {
|
||||
reducer,
|
||||
selectors,
|
||||
actions,
|
||||
});
|
||||
26
src/store/reducer.js
Normal file
26
src/store/reducer.js
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
function reducer(state = { isOpen: false }, action = {}) {
|
||||
switch (action.type) {
|
||||
case 'CLOSE':
|
||||
if (state.isOpen) {
|
||||
return {
|
||||
isOpen: false,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case 'OPEN':
|
||||
if (!state.isOpen) {
|
||||
return {
|
||||
isOpen: true,
|
||||
};
|
||||
}
|
||||
break;
|
||||
case 'TOGGLE':
|
||||
return {
|
||||
isOpen: !state.isOpen,
|
||||
};
|
||||
}
|
||||
|
||||
return state;
|
||||
}
|
||||
|
||||
export default reducer;
|
||||
3
src/store/selectors.js
Normal file
3
src/store/selectors.js
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
export function isOpen(state) {
|
||||
return state?.isOpen || false;
|
||||
}
|
||||
|
|
@ -1,63 +1,3 @@
|
|||
$color: #e455df;
|
||||
$popup_padding: 20px;
|
||||
|
||||
.mind-toolbar-icon {
|
||||
color: $color;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.mind-toolbar-dropdown-wrapper {
|
||||
width: 100%;
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding-left: 8px;
|
||||
padding-right: 8px;
|
||||
|
||||
.dashicon {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Button in editor Toolbar.
|
||||
.mind-editor-toolbar-toggle {
|
||||
flex: 100%;
|
||||
white-space: nowrap;
|
||||
|
||||
button {
|
||||
color: $color;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $color;
|
||||
background: rgba($color, 5%);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
margin-top: -2px;
|
||||
margin-right: 6px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
}
|
||||
|
||||
// Popup.
|
||||
.mind-popup {
|
||||
width: 800px;
|
||||
margin-top: 100px;
|
||||
background-color: rgb(243, 243, 243);
|
||||
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 20%), 0 25px 70px 10px rgba(0, 0, 0, 25%);
|
||||
border: 1px solid rgba(255, 255, 255, 40%);
|
||||
|
||||
.components-modal__header {
|
||||
padding: 24px $popup_padding 12px;
|
||||
}
|
||||
.components-modal__content {
|
||||
padding: 0 $popup_padding $popup_padding;
|
||||
}
|
||||
}
|
||||
.mind-popup-overlay {
|
||||
background-color: rgba(143, 135, 143, 25%);
|
||||
:root {
|
||||
--mind-brand-color: #e455df;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,8 @@
|
|||
/**
|
||||
* Styles
|
||||
*/
|
||||
import './style.scss';
|
||||
|
||||
export default (
|
||||
<svg
|
||||
width="20"
|
||||
|
|
@ -5,7 +10,7 @@ export default (
|
|||
viewBox="0 0 66 66"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className="mind-toolbar-icon"
|
||||
className="mind-icon"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
5
src/utils/icon/style.scss
Normal file
5
src/utils/icon/style.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
.mind-icon {
|
||||
color: var(--mind-brand-color);
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue
