Skip to content

Commit

Permalink
Remove editor icons for temba-icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@ericnewcomer
ericnewcomer committed Oct 5, 2023
1 parent eacab32 commit 27e4846
Show file tree
Hide file tree
Showing 94 changed files with 2,278 additions and 2,085 deletions.
10 changes: 8 additions & 2 deletions .devcontainer/devcontainer.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,13 @@
"--hostname=floweditor"
],
"remoteUser": "node",
"postCreateCommand": "sudo chown node /workspaces/floweditor && yarn install"
"postCreateCommand": "sudo chown node /workspaces/floweditor && yarn install",
"customizations": {
"vscode": {
"extensions": [
"lfs.vscode-emacs-friendly"
]
}
}
// "features": {},
// "customizations": {},
}
2 changes: 1 addition & 1 deletion src/components/button/Button.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
background: $button_dark;
background-image: linear-gradient(to bottom, $button_light, $button_dark);
color: #ffffff;
padding: 8px 16px 8px 16px;
padding: 8px 10px 8px 10px;
text-decoration: none;
user-select: none;

Expand Down
7 changes: 5 additions & 2 deletions src/components/button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export default class Button extends React.Component<ButtonProps, ButtonState> {
<div
ref={onRef}
style={{
display: 'inline-flex',
marginLeft: leftSpacing ? 10 : 0,
marginTop: topSpacing ? 10 : 0
}}
Expand All @@ -61,8 +62,10 @@ export default class Button extends React.Component<ButtonProps, ButtonState> {
this.state.active ? styles.active : ''
}`}
>
{renderIf(iconName != null)(<span style={{ paddingRight: 4 }} className={iconName} />)}
{name}
{renderIf(iconName != null)(
<temba-icon style={{ paddingRight: 5 }} name={iconName}></temba-icon>
)}
<div style={{ marginBottom: 0 }}>{name}</div>
</div>
);
}
Expand Down
8 changes: 6 additions & 2 deletions src/components/button/__snapshots__/Button.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,13 @@ exports[`Button render should render self, children with base props 1`] = `
<div>
<div
class="btn primary "
style="margin-left: 0px; margin-top: 0px;"
style="display: inline-flex; margin-left: 0px; margin-top: 0px;"
>
Save
<div
style="margin-bottom: 0px;"
>
Save
</div>
</div>
</div>
</body>
Expand Down
55 changes: 18 additions & 37 deletions src/components/dialog/Dialog.module.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,31 +14,10 @@ $curvature: 10px;

.header {
color: #fff;
height: 56px;

border-top-left-radius: $curvature;
border-top-right-radius: $curvature;

&:hover {
.header_overlay {
background: #00000010;
}
}

.header_overlay {
position: absolute;
width: 647px;
height: 28px;
text-align: right;
padding-top: 28px;
padding-right: 8px;

border-top-left-radius: $curvature;
border-top-right-radius: $curvature;
pointer-events: none;
z-index: $z_modal_header;
}

.header_icon {
font-size: 80px;
position: absolute;
Expand All @@ -55,20 +34,23 @@ $curvature: 10px;
&.barber {
$color_1: rgba(0, 0, 0, 0.08);
$color_2: rgba(0, 0, 0, 0.05);
background-image: repeating-linear-gradient(
60deg,
$color_1,
$color_1 12px,
$color_2 12px,
$color_2 24px
);
background-image: repeating-linear-gradient(60deg,
$color_1,
$color_1 12px,
$color_2 12px,
$color_2 24px);
}

&.iconed {
.title_container {
margin-left: 50px;
}
}

.title_container {
display: flex;
align-items: flex-end;
}
}

.content {
Expand Down Expand Up @@ -98,6 +80,7 @@ $curvature: 10px;
.buttons {
display: flex;
}

.left_buttons {
margin-right: auto;
}
Expand All @@ -112,21 +95,18 @@ $curvature: 10px;
.tabs {
z-index: $z_modal_tabs;
padding-right: 18px;
float: right;
margin-top: 33px;
position: relative;
display: flex;
align-items: stretch;
flex-direction: row-reverse;
margin-top: 0px;

.tab {
.tab_icon {
font-size: 8px;
padding-left: 5px;
}

background: rgba(0, 0, 0, 0.1);
display: inline-block;
padding: 5px 10px;
border-top-left-radius: 6px;
border-top-right-radius: 6px;
align-items: center;

margin-left: 7px;
font-size: 11px;
Expand All @@ -143,10 +123,11 @@ $curvature: 10px;
background: #fff;
cursor: default;
color: #000;

&:hover {
background: #fff;
}
}
}
}
}
}
47 changes: 28 additions & 19 deletions src/components/dialog/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -188,23 +188,6 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {

return (
<div className={activeClasses.join(' ')}>
{(this.props.tabs || []).length > 0 ? (
<div className={styles.tabs}>
{(this.props.tabs || []).map((tab: Tab, index: number) => (
<div
key={'tab_' + tab.name}
className={styles.tab + ' ' + (index === this.state.activeTab ? styles.active : '')}
onClick={(evt: React.MouseEvent<HTMLDivElement>) => {
evt.stopPropagation();
this.setState({ activeTab: index });
}}
>
{tab.name} {tab.icon ? <span className={styles.tab_icon + ' ' + tab.icon} /> : null}
{tab.checked ? <span className={styles.tab_icon + ' fe-check'} /> : null}
</div>
))}
</div>
) : null}
<div
onClick={() => {
this.setState({ activeTab: -1 });
Expand All @@ -215,11 +198,37 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
{renderIf(this.props.headerIcon !== undefined)(
<span className={`${styles.header_icon} ${this.props.headerIcon}`} />
)}

<div className={styles.title_container}>
<div className={styles.title}>{this.props.title}</div>
<div className={styles.subtitle}>{this.props.subtitle}</div>
<div style={{ flexGrow: 1 }}>
<div className={styles.title}>{this.props.title}</div>
<div className={styles.subtitle}>{this.props.subtitle}</div>
</div>
{(this.props.tabs || []).length > 0 ? (
<div className={styles.tabs}>
{(this.props.tabs || []).map((tab: Tab, index: number) => (
<div
key={'tab_' + tab.name}
style={{ display: 'flex' }}
className={
styles.tab + ' ' + (index === this.state.activeTab ? styles.active : '')
}
onClick={(evt: React.MouseEvent<HTMLDivElement>) => {
evt.stopPropagation();
this.setState({ activeTab: index });
}}
>
<div>{tab.name}</div>
{tab.checked ? (
<temba-icon name="check" style={{ marginLeft: '8px' }}></temba-icon>
) : null}
</div>
))}
</div>
) : null}
</div>
</div>

<div className={this.props.noPadding ? '' : styles.content}>
{this.state.activeTab > -1
? this.props.tabs![this.state.activeTab].body
Expand Down
42 changes: 29 additions & 13 deletions src/components/dialog/__snapshots__/Dialog.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,18 @@ exports[`Dialog should render 1`] = `
class="title_container"
>
<div
class="title"
style="flex-grow: 1;"
>
My Dialog
</div>
<div
class="subtitle"
>
Subtitlf
<div
class="title"
>
My Dialog
</div>
<div
class="subtitle"
>
Subtitlf
</div>
</div>
</div>
</div>
Expand All @@ -41,9 +45,13 @@ exports[`Dialog should render 1`] = `
>
<div
class="btn tertiary "
style="margin-left: 0px; margin-top: 0px;"
style="display: inline-flex; margin-left: 0px; margin-top: 0px;"
>
Other
<div
style="margin-bottom: 0px;"
>
Other
</div>
</div>
</div>
<div
Expand All @@ -58,15 +66,23 @@ exports[`Dialog should render 1`] = `
>
<div
class="btn secondary "
style="margin-left: 0px; margin-top: 0px;"
style="display: inline-flex; margin-left: 0px; margin-top: 0px;"
>
Cancel
<div
style="margin-bottom: 0px;"
>
Cancel
</div>
</div>
<div
class="btn primary "
style="margin-left: 10px; margin-top: 0px;"
style="display: inline-flex; margin-left: 10px; margin-top: 0px;"
>
Ok
<div
style="margin-bottom: 0px;"
>
Ok
</div>
</div>
</div>
</div>
Expand Down
9 changes: 6 additions & 3 deletions src/components/flow/actions/action/__snapshots__/Action.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ exports[`ActionWrapper can have localized quick replies when empty on default la
data-advanced="true"
style="margin-left: 4px; margin-top: 4px;"
>
Sí
<div>
Sí
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -107,8 +109,9 @@ exports[`ActionWrapper renders a base language 1`] = `
class="remove_button"
data-testid="remove-icon"
>
<span
class="fe-x"
<temba-icon
name="delete_small"
size="1.2"
/>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/flow/actions/addlabels/AddLabel.test.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ describe(AddLabelsComp.name, () => {

// Assert that we're displaying the max labels
// we want to display plus an ellipses.
expect(wrapper.find('div').length).toBe(MAX_TO_SHOW);
expect(wrapper.find('temba-icon').length).toBe(MAX_TO_SHOW - 1);
expect(wrapper).toMatchSnapshot();
});
});
Loading

0 comments on commit 27e4846

Please sign in to comment.