From 3ae76c84f6fae2292df8fb678f6034c07652e292 Mon Sep 17 00:00:00 2001 From: Travis Ralston Date: Mon, 12 Jul 2021 23:55:08 -0600 Subject: [PATCH] Add a simple TagComposer for the keywords entry --- res/css/_components.scss | 3 +- res/css/views/elements/_TagComposer.scss | 77 ++++++++++++++++ res/img/subtract.svg | 3 + src/components/views/elements/TagComposer.tsx | 91 +++++++++++++++++++ 4 files changed, 173 insertions(+), 1 deletion(-) create mode 100644 res/css/views/elements/_TagComposer.scss create mode 100644 res/img/subtract.svg create mode 100644 src/components/views/elements/TagComposer.tsx diff --git a/res/css/_components.scss b/res/css/_components.scss index 8f80f1bf97..c623eba9d8 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -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"; diff --git a/res/css/views/elements/_TagComposer.scss b/res/css/views/elements/_TagComposer.scss new file mode 100644 index 0000000000..2ffd601765 --- /dev/null +++ b/res/css/views/elements/_TagComposer.scss @@ -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 + } + + .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; + } + } +} diff --git a/res/img/subtract.svg b/res/img/subtract.svg new file mode 100644 index 0000000000..55e25831ef --- /dev/null +++ b/res/img/subtract.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/components/views/elements/TagComposer.tsx b/src/components/views/elements/TagComposer.tsx new file mode 100644 index 0000000000..ff104748a0 --- /dev/null +++ b/src/components/views/elements/TagComposer.tsx @@ -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 { + public constructor(props: IProps) { + super(props); + + this.state = { + newTag: "", + }; + } + + private onInputChange = (ev: ChangeEvent) => { + 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
+
+ + + { _t("Add") } + + +
+ { this.props.tags.map((t, i) => (
+ { t } + +
)) } +
+
; + } +}