Add a simple TagComposer for the keywords entry
This commit is contained in:
Travis Ralston
parent
fd5a36fd0c
commit
3ae76c84f6
4 changed files with 173 additions and 1 deletions
|
|
@ -148,6 +148,7 @@
|
|||
@import "./views/elements/_StyledCheckbox.scss";
|
||||
@import "./views/elements/_StyledRadioButton.scss";
|
||||
@import "./views/elements/_SyntaxHighlight.scss";
|
||||
@import "./views/elements/_TagComposer.scss";
|
||||
@import "./views/elements/_TextWithTooltip.scss";
|
||||
@import "./views/elements/_ToggleSwitch.scss";
|
||||
@import "./views/elements/_Tooltip.scss";
|
||||
|
|
@ -260,9 +261,9 @@
|
|||
@import "./views/toasts/_NonUrgentEchoFailureToast.scss";
|
||||
@import "./views/verification/_VerificationShowSas.scss";
|
||||
@import "./views/voip/_CallContainer.scss";
|
||||
@import "./views/voip/_CallPreview.scss";
|
||||
@import "./views/voip/_CallView.scss";
|
||||
@import "./views/voip/_CallViewForRoom.scss";
|
||||
@import "./views/voip/_CallPreview.scss";
|
||||
@import "./views/voip/_DialPad.scss";
|
||||
@import "./views/voip/_DialPadContextMenu.scss";
|
||||
@import "./views/voip/_DialPadModal.scss";
|
||||
|
|
|
|||
77
res/css/views/elements/_TagComposer.scss
Normal file
77
res/css/views/elements/_TagComposer.scss
Normal file
|
|
@ -0,0 +1,77 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
.mx_TagComposer {
|
||||
.mx_TagComposer_input {
|
||||
display: flex;
|
||||
|
||||
.mx_Field {
|
||||
flex: 1;
|
||||
margin: 0; // override from field styles
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
min-width: 70px;
|
||||
padding: 0; // override from button styles
|
||||
margin-left: 16px; // distance from <Field>
|
||||
}
|
||||
|
||||
.mx_Field, .mx_Field input, .mx_AccessibleButton {
|
||||
// So they look related to each other by feeling the same
|
||||
border-radius: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_TagComposer_tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-top: 12px; // this plus 12px from the tags makes 24px from the input
|
||||
|
||||
.mx_TagComposer_tag {
|
||||
padding: 6px 8px 8px 12px;
|
||||
position: relative;
|
||||
margin-right: 12px;
|
||||
margin-top: 12px;
|
||||
|
||||
// Cheaty way to get an opacified variable colour background
|
||||
&::before {
|
||||
content: '';
|
||||
border-radius: 20px;
|
||||
background-color: $tertiary-fg-color;
|
||||
opacity: 0.15;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
// Pass through the pointer otherwise we have effectively put a whole div
|
||||
// on top of the component, which makes it hard to interact with buttons.
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mx_AccessibleButton {
|
||||
background-image: url('$(res)/img/subtract.svg');
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 8px;
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
3
res/img/subtract.svg
Normal file
3
res/img/subtract.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M8 16C12.4183 16 16 12.4183 16 8C16 3.58167 12.4183 0 8 0C3.58173 0 0 3.58167 0 8C0 12.4183 3.58173 16 8 16ZM3.96967 5.0304L6.93933 8L3.96967 10.9697L5.03033 12.0304L8 9.06067L10.9697 12.0304L12.0303 10.9697L9.06067 8L12.0303 5.0304L10.9697 3.96973L8 6.93945L5.03033 3.96973L3.96967 5.0304Z" fill="#8D97A5"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 461 B |
91
src/components/views/elements/TagComposer.tsx
Normal file
91
src/components/views/elements/TagComposer.tsx
Normal file
|
|
@ -0,0 +1,91 @@
|
|||
/*
|
||||
Copyright 2021 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { ChangeEvent, FormEvent } from "react";
|
||||
import { replaceableComponent } from "../../../utils/replaceableComponent";
|
||||
import Field from "./Field";
|
||||
import { _t } from "../../../languageHandler";
|
||||
import AccessibleButton from "./AccessibleButton";
|
||||
|
||||
interface IProps {
|
||||
tags: string[];
|
||||
onAdd: (tag: string) => void;
|
||||
onRemove: (tag: string) => void;
|
||||
disabled?: boolean;
|
||||
label?: string;
|
||||
placeholder?: string;
|
||||
}
|
||||
|
||||
interface IState {
|
||||
newTag: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* A simple, controlled, composer for entering string tags. Contains a simple
|
||||
* input, add button, and per-tag remove button.
|
||||
*/
|
||||
@replaceableComponent("views.elements.TagComposer")
|
||||
export default class TagComposer extends React.PureComponent<IProps, IState> {
|
||||
public constructor(props: IProps) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
newTag: "",
|
||||
};
|
||||
}
|
||||
|
||||
private onInputChange = (ev: ChangeEvent<HTMLInputElement>) => {
|
||||
this.setState({ newTag: ev.target.value });
|
||||
};
|
||||
|
||||
private onAdd = (ev: FormEvent) => {
|
||||
ev.preventDefault();
|
||||
if (!this.state.newTag) return;
|
||||
|
||||
this.props.onAdd(this.state.newTag);
|
||||
this.setState({ newTag: "" });
|
||||
};
|
||||
|
||||
private onRemove = (tag: string) => {
|
||||
// We probably don't need to proxy this, but for
|
||||
// sanity of `this` we'll do so anyways.
|
||||
this.props.onRemove(tag);
|
||||
};
|
||||
|
||||
public render() {
|
||||
return <div className='mx_TagComposer'>
|
||||
<form className='mx_TagComposer_input' onSubmit={this.onAdd}>
|
||||
<Field
|
||||
value={this.state.newTag}
|
||||
onChange={this.onInputChange}
|
||||
label={this.props.label || _t("Keyword")}
|
||||
placeholder={this.props.placeholder || _t("New keyword")}
|
||||
disabled={this.props.disabled}
|
||||
autoComplete="off"
|
||||
/>
|
||||
<AccessibleButton onClick={this.onAdd} kind='primary' disabled={this.props.disabled}>
|
||||
{ _t("Add") }
|
||||
</AccessibleButton>
|
||||
</form>
|
||||
<div className='mx_TagComposer_tags'>
|
||||
{ this.props.tags.map((t, i) => (<div className='mx_TagComposer_tag' key={i}>
|
||||
<span>{ t }</span>
|
||||
<AccessibleButton onClick={this.onRemove.bind(this, t)} disabled={this.props.disabled} />
|
||||
</div>)) }
|
||||
</div>
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in a new issue