BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot / 4.9.5

BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot v4.9.5

betterdocs / react-src / gutenberg / blocks / breadcrumb / src / inspector.js

inspector.js in BetterDocs – AI Documentation, Knowledge Base, MCP Server, Docs, Wikis, FAQ & Chatbot 4.9.5, at react-src/gutenberg/blocks/breadcrumb/src/inspector.js

168 lines 7.7 KB

Raw Download Zip

1	import { __ } from '@wordpress/i18n';
2	import { InspectorControls } from '@wordpress/block-editor';
3	import { BaseControl, ButtonGroup, Button, PanelBody, TabPanel, SelectControl } from '@wordpress/components';
4
5	import {
6	typoPrefix_title,
7	typoPrefix_title_two
8	} from "./typographyPrefixConstants";
9	import { BREADCRUMB_ICON_PADDING_LAYOUT_TWO, BREADCRUMB_TEXT_ALIGN, BREADCRUMB_TITLE_MARGIN_LAYOUT_TWO, BREADCRUMB_TITLE_PADDING_LAYOUT_TWO, LAYOUT } from './constants';
10	import { BREADCRUMB_TITLE_MARGIN, BREADCRUMB_TITLE_PADDING, BREADCRUMB_ICON_MARGIN, BREADCRUMB_ICON_PADDING } from './constants';
11	import ResponsiveDimensionsControl from "../../../util/dimensions-control-v2";
12	import ColorControl from "../../../util/color-control";
13	import TypographyDropdown from "../../../util/typography-control-v2";
14	import objAttributes from './atttributes';
15
16	const Inspector = ({attributes, setAttributes}) => {
17	const {align, align_layout_two, wrapper_background_color_layout_two, breadcrumb_title_color_layout_two, resOption, breadcrumb_title_color, breadcrumb_icon_color, breadcrumb_icon_color_two, layout} = attributes;
18
19	const resRequiredProps = {
20	setAttributes,
21	resOption,
22	attributes,
23	objAttributes,
24	};
25
26	return(
27	<InspectorControls key="controls">
28	<div className="eb-panel-control">
29	<TabPanel
30	className="eb-parent-tab-panel"
31	activeClass="active-tab"
32	tabs={[
33	{
34	name:"general",
35	title:__("General", "betterdocs"),
36	className: "eb-tab styles"
37	},
38	{
39	name: "styles",
40	title: __("Styles", "betterdocs"),
41	className: "eb-tab styles",
42	}
43	]}
44	>
45	{
46	(tab) => {
47	return(
48	<div className={"eb-tab-controls " + tab.name}>
49	{tab.name == 'general' &&
50	<PanelBody title={__("General", "betterdocs")} initialOpen={true}>
51	<SelectControl
52	label={__("Select layout", "betterdocs")}
53	value={layout}
54	options={LAYOUT}
55	onChange={(newLayout) =>
56	setAttributes({
57	layout: newLayout,
58	})
59	}
60	__next40pxDefaultSize
61	__nextHasNoMarginBottom
62	/>
63	</PanelBody>}
64	{tab.name === 'styles' && (
65	<>
66	<PanelBody title={__("Breadcrumb Title", "betterdocs")} initialOpen={false}>
67	<>
68	<TypographyDropdown
69	baseLabel={__("Typography", "betterdocs")}
70	typographyPrefixConstant={layout == 'layout-1' ? typoPrefix_title : typoPrefix_title_two}
71	resRequiredProps={resRequiredProps}
72	defaultFontSize={layout == 'layout-1' ? 15: 12}
73	/>
74
75	<BaseControl label={__("Alignment", "betterdocs")} id="eb-advance-heading-alignment">
76	<ButtonGroup id="eb-advance-heading-alignment">
77	{BREADCRUMB_TEXT_ALIGN.map((item, key) => (
78	<Button
79	key={key}
80	// isLarge
81	isPrimary={layout == 'layout-1' ? align === item.value : align_layout_two == item.value}
82	isSecondary={layout == 'layout-1' ? align !== item.value : align_layout_two != item.value}
83	onClick={() => {
84	if( layout == 'layout-1' ){
85	setAttributes({
86	align: item.value,
87	})
88	} else {
89	setAttributes({
90	align_layout_two: item.value,
91	})
92	}
93	}}
94	>
95	{item.label}
96	</Button>
97	))}
98	</ButtonGroup>
99	</BaseControl>
100
101	<ColorControl
102	label={__("Color", "betterdocs")}
103	color={layout == 'layout-1' ? breadcrumb_title_color : breadcrumb_title_color_layout_two}
104	onChange={(colorValue) => {
105	if( layout == 'layout-1' ) {
106	setAttributes({breadcrumb_title_color:colorValue})
107	} else {
108	setAttributes({breadcrumb_title_color_layout_two:colorValue})
109	}
110	}}
111	/>
112
113	{layout == 'layout-2' && <ColorControl
114	label={__("Wrapper Background Color", "betterdocs")}
115	color={wrapper_background_color_layout_two}
116	onChange={(colorValue) => {
117	setAttributes({wrapper_background_color_layout_two:colorValue});
118	}}
119	/>}
120	</>
121	<ResponsiveDimensionsControl
122	baseLabel={__("Margin", "betterdocs")}
123	resRequiredProps={resRequiredProps}
124	controlName={layout == 'layout-1' ? BREADCRUMB_TITLE_MARGIN : BREADCRUMB_TITLE_MARGIN_LAYOUT_TWO}
125	/>
126	<ResponsiveDimensionsControl
127	baseLabel={__("Padding", "betterdocs")}
128	resRequiredProps={resRequiredProps}
129	controlName={layout == 'layout-1' ? BREADCRUMB_TITLE_PADDING : BREADCRUMB_TITLE_PADDING_LAYOUT_TWO}
130	/>
131	</PanelBody>
132	<PanelBody title={__("Breadcrumb Icon", "betterdocs")} initialOpen={false}>
133	<ColorControl
134	label={__("Color", "betterdocs")}
135	color={layout == 'layout-1' ? breadcrumb_icon_color : breadcrumb_icon_color_two}
136	onChange={(colorValue) =>{
137	if( layout == 'layout-1' ) {
138	setAttributes({breadcrumb_icon_color:colorValue})
139	} else {
140	setAttributes({breadcrumb_icon_color_two:colorValue})}
141	}
142	}
143	/>
144	<ResponsiveDimensionsControl
145	baseLabel={__("Margin", "betterdocs")}
146	resRequiredProps={resRequiredProps}
147	controlName={layout == 'layout-1' ? BREADCRUMB_ICON_MARGIN : BREADCRUMB_TITLE_MARGIN_LAYOUT_TWO}
148	/>
149	<ResponsiveDimensionsControl
150	baseLabel={__("Padding", "betterdocs")}
151	resRequiredProps={resRequiredProps}
152	controlName={layout == 'layout-1' ? BREADCRUMB_ICON_PADDING : BREADCRUMB_ICON_PADDING_LAYOUT_TWO}
153	/>
154	</PanelBody>
155	</>
156	)}
157	</div>
158	)
159	}
160	}
161	</TabPanel>
162	</div>
163	</InspectorControls>
164	);
165	}
166
167	export default Inspector;
168