Edison/powerpoint-toolbox
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Changed for gride and guidelines

Browse Source
This commit is contained in:
Heiko Joerg Schick
2025-03-13 23:30:58 +01:00
parent 044bd9ebec
commit ebd698d17d
2 changed files with 113 additions and 73 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/taskpane/components/App.tsx
+1 -1
View File
@@ -198,7 +198,7 @@ const App: React.FC<AppProps> = () => {
<div className={styles.section}>
<Subtitle1 block className={styles.sectionTitle}>
Grid & Guidelines
Layout
</Subtitle1>
<GridGuidelineManager />
</div>
src/taskpane/components/GridGuidelineManager.tsx
+112 -72
View File
@@ -49,7 +49,14 @@ const useStyles = makeStyles({
marginBottom: "0"
},
controlInput: {
flex: 1
flex: 1,
"& input[type=number]::-webkit-inner-spin-button, & input[type=number]::-webkit-outer-spin-button": {
"-webkit-appearance": "none",
margin: 0
},
"& input[type=number]": {
"-moz-appearance": "textfield"
}
},
guidesContainer: {
marginTop: "16px"
@@ -394,7 +401,79 @@ export const GridGuidelineManager: React.FC = () => {
return (
<div className={commonStyles.container} style={{ maxHeight: "400px", overflowY: "auto" }}>
{/* Grid Controls */}
<div className={styles.buttonGrid}>
<Label style={{
fontWeight: "600",
marginBottom: "12px",
fontSize: "16px"
}}>
Grid
</Label>
<div className={styles.controlRow}>
<Label className={styles.controlLabel}>Spacing</Label>
<div style={{ width: "80px", flex: "none" }}>
<input
type="text"
value={gridSpacing}
onChange={(e) => {
const newValue = e.target.value;
const parsed = parseInt(newValue);
if (newValue === '') {
setGridSpacing(0);
} else if (!isNaN(parsed)) {
setGridSpacing(parsed);
}
}}
onClick={(e) => (e.target as HTMLInputElement).select()}
style={{
width: "100%",
padding: "5px 8px",
border: "1px solid #d1d1d1",
borderRadius: "4px",
fontSize: "14px"
}}
/>
</div>
</div>
<div className={styles.controlRow}>
<Label className={styles.controlLabel}>Opacity</Label>
<div style={{ width: "80px", flex: "none" }}>
<input
type="text"
value={gridOpacity}
onChange={(e) => {
const newValue = e.target.value;
const parsed = parseInt(newValue);
if (newValue === '') {
setGridOpacity(0);
} else if (!isNaN(parsed)) {
setGridOpacity(parsed);
}
}}
onClick={(e) => (e.target as HTMLInputElement).select()}
style={{
width: "100%",
padding: "5px 8px",
border: "1px solid #d1d1d1",
borderRadius: "4px",
fontSize: "14px"
}}
/>
</div>
</div>
<div className={styles.controlRow}>
<Label className={styles.controlLabel}>Color</Label>
<div style={{ display: "flex" }}>
<ColorButton color="blue" selectedColor={gridColor} onClick={setGridColor} />
<ColorButton color="red" selectedColor={gridColor} onClick={setGridColor} />
<ColorButton color="yellow" selectedColor={gridColor} onClick={setGridColor} />
<ColorButton color="green" selectedColor={gridColor} onClick={setGridColor} />
</div>
</div>
<div className={styles.buttonGrid} style={{ marginTop: "12px" }}>
<Button
appearance="primary"
className={styles.gridButton}
@@ -417,82 +496,43 @@ export const GridGuidelineManager: React.FC = () => {
</Button>
</div>
<div className={styles.controlRow}>
<Label className={styles.controlLabel}>Spacing</Label>
<Input
className={styles.controlInput}
value={gridSpacing.toString()}
type="number"
min={10}
max={200}
onChange={(_event, data) => {
const value = parseInt(data.value);
if (!isNaN(value) && value >= 10 && value <= 200) {
setGridSpacing(value);
}
}}
/>
</div>
<div className={styles.controlRow}>
<Label className={styles.controlLabel}>Opacity</Label>
<div style={{ display: "flex", flex: 1, gap: "8px", alignItems: "center" }}>
<Input
className={styles.controlInput}
style={{ width: "70px" }}
value={gridOpacity.toString()}
type="number"
min={10}
max={100}
onChange={(_event, data) => {
const value = parseInt(data.value);
if (!isNaN(value) && value >= 10 && value <= 100) {
setGridOpacity(value);
}
}}
/>
<Slider
style={{ flex: 1 }}
value={gridOpacity}
min={10}
max={100}
step={10}
onChange={(_event, data) => setGridOpacity(data.value)}
/>
</div>
</div>
<div className={styles.controlRow}>
<Label className={styles.controlLabel}>Color</Label>
<div style={{ display: "flex" }}>
<ColorButton color="blue" selectedColor={gridColor} onClick={setGridColor} />
<ColorButton color="red" selectedColor={gridColor} onClick={setGridColor} />
<ColorButton color="yellow" selectedColor={gridColor} onClick={setGridColor} />
<ColorButton color="green" selectedColor={gridColor} onClick={setGridColor} />
</div>
</div>
{/* Guidelines Section */}
<div className={styles.guidesContainer}>
<Divider />
<Label style={{ marginTop: "12px", marginBottom: "8px" }}>Guidelines</Label>
<Label style={{
fontWeight: "600",
marginTop: "12px",
marginBottom: "12px",
fontSize: "16px"
}}>
Guidelines
</Label>
<div className={styles.controlRow}>
<Label className={styles.controlLabel}>Position</Label>
<Input
className={styles.controlInput}
value={guidePosition.toString()}
type="number"
min={0}
max={guideDirection === "horizontal" ? 540 : 960}
onChange={(_event, data) => {
const value = parseInt(data.value);
const maxVal = guideDirection === "horizontal" ? 540 : 960;
if (!isNaN(value) && value >= 0 && value <= maxVal) {
setGuidePosition(value);
}
}}
/>
<div style={{ width: "80px", flex: "none" }}>
<input
type="text"
value={guidePosition}
onChange={(e) => {
const newValue = e.target.value;
const parsed = parseInt(newValue);
if (newValue === '') {
setGuidePosition(0);
} else if (!isNaN(parsed)) {
setGuidePosition(parsed);
}
}}
onClick={(e) => (e.target as HTMLInputElement).select()}
style={{
width: "100%",
padding: "5px 8px",
border: "1px solid #d1d1d1",
borderRadius: "4px",
fontSize: "14px"
}}
/>
</div>
</div>
<div className={styles.controlRow}>