Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Remove editor icons for temba-icon #1202

Merged
merged 1 commit into from
Oct 5, 2023
Merged

Remove editor icons for temba-icon #1202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 8 additions & 2 deletions .devcontainer/devcontainer.json
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading