Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Add placement settings header

Browse Source 
[MAILPOET-2738]
This commit is contained in:
Pavel Dohnal
2020-03-16 12:14:43 +01:00
committed by Veljko V
parent 9c4844f77c
commit c9a2a44970
4 changed files with 45 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
assets/css/src/components/formEditor/components/_sidebar.scss
View File

@@ -2,6 +2,8 @@ $gutenberg-control-border-color: #7e8993;
$gutenberg-control-border-color-focus: #007cba;
$form-placement-option-base-color: #e5e9f8;
$form-placement-option-text-color: #23282d;
$form-placement-option-oval: #dcdcdc;
$form-placement-option-oval-border: #969ca1;
.components-panel {
.select2-container {
@@ -120,6 +122,7 @@ $form-placement-option-text-color: #23282d;
height: 142px;
justify-content: space-between;
margin: 0 16px 16px 0;
padding: 6px;
text-align: center;
width: 116px;
}
@@ -139,10 +142,29 @@ $form-placement-option-text-color: #23282d;
}
.form-placement-option-settings {
display: flex;
flex-direction: row;
height: 25px;
justify-content: space-between;
width: 100%;
}
.form-placement-settings-oval {
background-color: $form-placement-option-oval;
border: solid 1px $form-placement-option-oval-border;
border-radius: 7px;
height: 13px;
width: 13px;
}
.form-placement-settings-icon {
svg {
fill: $form-placement-option-base-color;
}
height: 14px;
width: 14px;
}
.form-placement-option-icon {
svg {
height: 63px;

2
assets/js/src/form_editor/components/form_settings/form_placement_options/below_pages_icon.tsx
View File

@@ -24,5 +24,3 @@ export default (
</G>
</SVG>
);

8
assets/js/src/form_editor/components/form_settings/form_placement_options/form_placement_option.tsx
View File

@@ -1,5 +1,7 @@
import React from 'react';
import SettingsIcon from './settings_icon';
type Props = {
label: string,
icon: JSX.Element,
@@ -9,7 +11,11 @@ const FormPlacementOption = ({ label, icon }: Props) => (
<div className="form-placement-option">
<div>
<div className="form-placement-option-settings">
x
<div className="form-placement-settings-icon">
{SettingsIcon}
</div>
{/* todo next line only show on hover */}
<div className="form-placement-settings-oval" />
</div>
<div className="form-placement-option-icon">
{icon}

16
assets/js/src/form_editor/components/form_settings/form_placement_options/settings_icon.tsx Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import {
SVG,
Path,
G,
} from '@wordpress/components';
export default (
<SVG width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg">
<G id="Symbols" stroke="none" strokeWidth="1">
<G id="icons/ic_settings">
<Path d="M8.05,0 L8.05101528,2.11065231 C8.65254335,2.23933489 9.2139617,2.47621094 9.71391655,2.7999267 L11.2072853,1.30779041 L12.6922096,2.79271465 L11.199432,4.28509331 C11.5234762,4.78529701 11.7605802,5.34705952 11.8893477,5.94898472 L14,5.95 L14,8.05 L11.8895604,8.05002048 C11.7608414,8.65232154 11.5236547,9.21442744 11.199432,9.71490669 L12.6922096,11.2072853 L11.2072853,12.6922096 L9.71391655,11.2000733 C9.2139617,11.5237891 8.65254335,11.7606651 8.05101528,11.8893477 L8.05,14 L5.95,14 L5.94898472,11.8893477 C5.34705952,11.7605802 4.78529701,11.5234762 4.28509331,11.199432 L2.79271465,12.6922096 L1.30779041,11.2072853 L2.7999267,9.71391655 C2.4760325,9.21368611 2.23907376,8.65192438 2.11043961,8.05002048 L8.8817842e-16,8.05 L1.01676633e-15,5.95 L2.11065231,5.94898472 C2.23933489,5.34745665 2.47621094,4.7860383 2.7999267,4.28608345 L1.30779041,2.79271465 L2.79271465,1.30779041 L4.28509331,2.80056797 C4.78529701,2.47652376 5.34705952,2.23941984 5.94898472,2.11065231 L5.95,0 L8.05,0 Z M7,4 C5.34314575,4 4,5.34314575 4,7 C4,8.65685425 5.34314575,10 7,10 C8.65685425,10 10,8.65685425 10,7 C10,5.34314575 8.65685425,4 7,4 Z" id="ic_settings" />
</G>
</G>
</SVG>
);