mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-09 10:34:17 +00:00
remove wip component
This commit is contained in:
parent
0ed4ad7241
commit
c237b3b823
@ -15,370 +15,349 @@ import StepsContext from "./context"
|
|||||||
|
|
||||||
import "./index.less"
|
import "./index.less"
|
||||||
|
|
||||||
const RegisterNewTagSteps = [
|
const RegisterNewTagSteps = [CheckRegister, DataEditor, TagWritter, Success]
|
||||||
CheckRegister,
|
|
||||||
DataEditor,
|
|
||||||
TagWritter,
|
|
||||||
Success,
|
|
||||||
]
|
|
||||||
|
|
||||||
const RegisterNewTag = (props) => {
|
const RegisterNewTag = (props) => {
|
||||||
const [step, setStep] = React.useState(0)
|
const [step, setStep] = React.useState(0)
|
||||||
const [stepsValues, setStepsValues] = React.useState({
|
const [stepsValues, setStepsValues] = React.useState({
|
||||||
...props.tagData ?? {}
|
...(props.tagData ?? {}),
|
||||||
})
|
})
|
||||||
|
|
||||||
const nextStep = () => {
|
const nextStep = () => {
|
||||||
setStep((step) => step + 1)
|
setStep((step) => step + 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
const prevStep = () => {
|
const prevStep = () => {
|
||||||
setStep((step) => step - 1)
|
setStep((step) => step - 1)
|
||||||
}
|
}
|
||||||
|
|
||||||
const finish = () => {
|
const finish = () => {
|
||||||
if (typeof props.onFinish === "function") {
|
if (typeof props.onFinish === "function") {
|
||||||
props.onFinish()
|
props.onFinish()
|
||||||
}
|
}
|
||||||
|
|
||||||
if (typeof props.close === "function") {
|
if (typeof props.close === "function") {
|
||||||
props.close()
|
props.close()
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// create a react context for the steps
|
// create a react context for the steps
|
||||||
const StepsContextValue = {
|
const StepsContextValue = {
|
||||||
next: nextStep,
|
next: nextStep,
|
||||||
prev: prevStep,
|
prev: prevStep,
|
||||||
values: stepsValues,
|
values: stepsValues,
|
||||||
setValue: (key, value) => {
|
setValue: (key, value) => {
|
||||||
setStepsValues((stepsValues) => {
|
setStepsValues((stepsValues) => {
|
||||||
return {
|
return {
|
||||||
...stepsValues,
|
...stepsValues,
|
||||||
[key]: value
|
[key]: value,
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
onFinish: finish,
|
onFinish: finish,
|
||||||
nfcReader: app.cores.nfc.instance(),
|
nfcReader: app.cores.nfc.instance(),
|
||||||
close: props.close
|
close: props.close,
|
||||||
}
|
}
|
||||||
|
|
||||||
if (props.tagData) {
|
if (props.tagData) {
|
||||||
return <div className="tap-share-register">
|
return (
|
||||||
<div className="tap-share-register-content">
|
<div className="tap-share-register">
|
||||||
<StepsContext.Provider value={StepsContextValue}>
|
<div className="tap-share-register-content">
|
||||||
<DataEditor
|
<StepsContext.Provider value={StepsContextValue}>
|
||||||
onFinish={finish}
|
<DataEditor onFinish={finish} />
|
||||||
/>
|
</StepsContext.Provider>
|
||||||
</StepsContext.Provider>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
if (app.cores.nfc.incompatible) {
|
if (app.cores.nfc.incompatible) {
|
||||||
return <antd.Result
|
return (
|
||||||
status="error"
|
<antd.Result
|
||||||
title="Error"
|
status="error"
|
||||||
subTitle="Your device doesn't support NFC."
|
title="Error"
|
||||||
/>
|
subTitle="Your device doesn't support NFC."
|
||||||
}
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
return <div
|
return (
|
||||||
className={classnames(
|
<div
|
||||||
"tap-share-register",
|
className={classnames("tap-share-register", {
|
||||||
{
|
["compact"]: step > 0,
|
||||||
["compact"]: step > 0
|
})}
|
||||||
}
|
>
|
||||||
)}
|
<div className="tap-share-register-header">
|
||||||
>
|
<antd.Button
|
||||||
<div className="tap-share-register-header">
|
type="link"
|
||||||
<antd.Button
|
onClick={prevStep}
|
||||||
type="link"
|
disabled={step === 0}
|
||||||
onClick={prevStep}
|
icon={<Icons.MdChevronLeft />}
|
||||||
disabled={step === 0}
|
className={classnames("tap-share-register-header-back", {
|
||||||
icon={<Icons.MdChevronLeft />}
|
["hidden"]: step === 0,
|
||||||
className={classnames(
|
})}
|
||||||
"tap-share-register-header-back",
|
/>
|
||||||
{
|
|
||||||
["hidden"]: step === 0
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<div className="tap-share-register-header-icon">
|
<div className="tap-share-register-header-icon">
|
||||||
<Icons.MdNfc />
|
<Icons.MdNfc />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<h1>
|
<h1>Register new tag</h1>
|
||||||
Register new tag
|
</div>
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="tap-share-register-content">
|
<div className="tap-share-register-content">
|
||||||
<StepsContext.Provider value={StepsContextValue}>
|
<StepsContext.Provider value={StepsContextValue}>
|
||||||
{
|
{React.createElement(RegisterNewTagSteps[step])}
|
||||||
React.createElement(RegisterNewTagSteps[step])
|
</StepsContext.Provider>
|
||||||
}
|
</div>
|
||||||
</StepsContext.Provider>
|
</div>
|
||||||
</div>
|
)
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const TagItem = (props) => {
|
const TagItem = (props) => {
|
||||||
return <div
|
return (
|
||||||
key={props.tag.serialNumber}
|
<div
|
||||||
id={props.tag.serialNumber}
|
key={props.tag.serialNumber}
|
||||||
className="tap-share-own_tags-item"
|
id={props.tag.serialNumber}
|
||||||
>
|
className="tap-share-own_tags-item"
|
||||||
<div className="tap-share-own_tags-item-icon">
|
>
|
||||||
<Icons.MdNfc />
|
<div className="tap-share-own_tags-item-icon">
|
||||||
</div>
|
<Icons.MdNfc />
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="tap-share-own_tags-item-title">
|
<div className="tap-share-own_tags-item-title">
|
||||||
<h4>
|
<h4>{props.tag.alias}</h4>
|
||||||
{props.tag.alias}
|
|
||||||
</h4>
|
|
||||||
|
|
||||||
<span>
|
<span>{props.tag.serial}</span>
|
||||||
{props.tag.serial}
|
</div>
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="tap-share-own_tags-item-actions">
|
<div className="tap-share-own_tags-item-actions">
|
||||||
<antd.Button
|
<antd.Button icon={<Icons.MdEdit />} onClick={props.onEdit} />
|
||||||
icon={<Icons.MdEdit />}
|
<antd.Button
|
||||||
onClick={props.onEdit}
|
icon={<Icons.MdDelete />}
|
||||||
/>
|
danger
|
||||||
<antd.Button
|
onClick={props.onDelete}
|
||||||
icon={<Icons.MdDelete />}
|
/>
|
||||||
danger
|
</div>
|
||||||
onClick={props.onDelete}
|
</div>
|
||||||
/>
|
)
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
class OwnTags extends React.Component {
|
class OwnTags extends React.Component {
|
||||||
state = {
|
state = {
|
||||||
loading: true,
|
loading: true,
|
||||||
error: null,
|
error: null,
|
||||||
data: null,
|
data: null,
|
||||||
editorOpen: false,
|
editorOpen: false,
|
||||||
}
|
}
|
||||||
|
|
||||||
loadData = async () => {
|
loadData = async () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
loading: true,
|
loading: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
const result = await NFCModel.getOwnTags()
|
const result = await NFCModel.getOwnTags().catch((err) => {
|
||||||
.catch((err) => {
|
console.error(err)
|
||||||
console.error(err)
|
this.setState({
|
||||||
this.setState({
|
error: err.message,
|
||||||
error: err.message,
|
loading: false,
|
||||||
loading: false,
|
data: null,
|
||||||
data: null
|
})
|
||||||
})
|
return false
|
||||||
return false
|
})
|
||||||
})
|
|
||||||
|
|
||||||
if (!result) {
|
if (!result) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
this.setState({
|
this.setState({
|
||||||
loading: false,
|
loading: false,
|
||||||
data: result,
|
data: result,
|
||||||
error: null
|
error: null,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleOpenEditor = (props) => {
|
handleOpenEditor = (props) => {
|
||||||
this.setState({
|
this.setState({
|
||||||
editorOpen: true
|
editorOpen: true,
|
||||||
})
|
})
|
||||||
|
|
||||||
OpenTagEditor({
|
OpenTagEditor({
|
||||||
...props,
|
...props,
|
||||||
onFinish: () => {
|
onFinish: () => {
|
||||||
this.setState({
|
this.setState({
|
||||||
editorOpen: false
|
editorOpen: false,
|
||||||
})
|
})
|
||||||
|
|
||||||
this.loadData()
|
this.loadData()
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleTagDelete = (tag) => {
|
handleTagDelete = (tag) => {
|
||||||
antd.Modal.confirm({
|
antd.Modal.confirm({
|
||||||
title: "Are you sure you want to delete this tag?",
|
title: "Are you sure you want to delete this tag?",
|
||||||
content: `This action cannot be undone.`,
|
content: `This action cannot be undone.`,
|
||||||
onOk: async () => {
|
onOk: async () => {
|
||||||
NFCModel.deleteTag(tag._id)
|
NFCModel.deleteTag(tag._id)
|
||||||
.then(() => {
|
.then(() => {
|
||||||
app.message.success("Tag deleted")
|
app.message.success("Tag deleted")
|
||||||
this.loadData()
|
this.loadData()
|
||||||
})
|
})
|
||||||
.catch((err) => {
|
.catch((err) => {
|
||||||
console.error(err)
|
console.error(err)
|
||||||
app.message.error(err.message)
|
app.message.error(err.message)
|
||||||
return false
|
return false
|
||||||
})
|
})
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
handleTagRead = async (error, tag) => {
|
handleTagRead = async (error, tag) => {
|
||||||
if (this.state.editorOpen) {
|
if (this.state.editorOpen) {
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
console.error(error)
|
console.error(error)
|
||||||
return false
|
return false
|
||||||
}
|
}
|
||||||
|
|
||||||
const ownedTag = this.state.data.find((ownedTag) => {
|
const ownedTag = this.state.data.find((ownedTag) => {
|
||||||
return ownedTag.serial === tag.serialNumber
|
return ownedTag.serial === tag.serialNumber
|
||||||
})
|
})
|
||||||
|
|
||||||
if (!ownedTag) {
|
if (!ownedTag) {
|
||||||
app.message.error("This tag is not registered or you don't have permission to edit it.")
|
app.message.error(
|
||||||
return false
|
"This tag is not registered or you don't have permission to edit it.",
|
||||||
}
|
)
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
return this.handleOpenEditor({
|
return this.handleOpenEditor({
|
||||||
tag: ownedTag
|
tag: ownedTag,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
componentDidMount = async () => {
|
componentDidMount = async () => {
|
||||||
await this.loadData()
|
await this.loadData()
|
||||||
|
|
||||||
app.cores.nfc.subscribe(this.handleTagRead)
|
app.cores.nfc.subscribe(this.handleTagRead)
|
||||||
}
|
}
|
||||||
|
|
||||||
componentWillUnmount = () => {
|
componentWillUnmount = () => {
|
||||||
app.cores.nfc.unsubscribe(this.handleTagRead)
|
app.cores.nfc.unsubscribe(this.handleTagRead)
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
console.log(this.state)
|
console.log(this.state)
|
||||||
if (this.state.loading) {
|
if (this.state.loading) {
|
||||||
return <div className="tap-share-own_tags">
|
return (
|
||||||
<antd.Skeleton />
|
<div className="tap-share-own_tags">
|
||||||
</div>
|
<antd.Skeleton />
|
||||||
}
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
if (!this.state.data) {
|
if (!this.state.data) {
|
||||||
return <antd.Empty
|
return <antd.Empty description="You don't have any tags yet." />
|
||||||
description="You don't have any tags yet."
|
}
|
||||||
/>
|
|
||||||
}
|
|
||||||
|
|
||||||
return <div className="tap-share-own_tags">
|
return (
|
||||||
{
|
<div className="tap-share-own_tags">
|
||||||
this.state.data.length === 0 && <antd.Empty
|
{this.state.data.length === 0 && (
|
||||||
description="You don't have any tags yet."
|
<antd.Empty description="You don't have any tags yet." />
|
||||||
/>
|
)}
|
||||||
}
|
|
||||||
|
|
||||||
{
|
{this.state.data.length > 0 &&
|
||||||
this.state.data.length > 0 && this.state.data.map((tag) => {
|
this.state.data.map((tag) => {
|
||||||
return <TagItem
|
return (
|
||||||
key={tag.serialNumber}
|
<TagItem
|
||||||
tag={tag}
|
key={tag.serialNumber}
|
||||||
onEdit={() => {
|
tag={tag}
|
||||||
this.handleOpenEditor({
|
onEdit={() => {
|
||||||
tag: tag
|
this.handleOpenEditor({
|
||||||
})
|
tag: tag,
|
||||||
}}
|
})
|
||||||
onDelete={() => {
|
}}
|
||||||
this.handleTagDelete(tag)
|
onDelete={() => {
|
||||||
}}
|
this.handleTagDelete(tag)
|
||||||
/>
|
}}
|
||||||
})
|
/>
|
||||||
}
|
)
|
||||||
|
})}
|
||||||
|
|
||||||
{
|
{app.isMobile && (
|
||||||
app.isMobile && <antd.Button
|
<antd.Button
|
||||||
type="primary"
|
type="primary"
|
||||||
icon={<Icons.FiPlus />}
|
icon={<Icons.FiPlus />}
|
||||||
onClick={() => this.handleOpenEditor({})}
|
onClick={() => this.handleOpenEditor({})}
|
||||||
className="tap-share-own_tags-add"
|
className="tap-share-own_tags-add"
|
||||||
>
|
>
|
||||||
Add new
|
Add new
|
||||||
</antd.Button>
|
</antd.Button>
|
||||||
}
|
)}
|
||||||
</div>
|
</div>
|
||||||
}
|
)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const OpenTagEditor = ({ tag, onFinish = () => app.navigation.softReload() } = {}) => {
|
const OpenTagEditor = ({
|
||||||
if (!app.layout.draggable) {
|
tag,
|
||||||
return app.layout.drawer.open("tag_register", RegisterNewTag, {
|
onFinish = () => app.navigation.softReload(),
|
||||||
props: {
|
} = {}) => {
|
||||||
onFinish: onFinish,
|
if (!app.layout.draggable) {
|
||||||
tagData: tag,
|
return app.layout.drawer.open("tag_register", RegisterNewTag, {
|
||||||
}
|
props: {
|
||||||
})
|
onFinish: onFinish,
|
||||||
}
|
tagData: tag,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
return app.layout.draggable.open("tag_register", RegisterNewTag, {
|
return app.layout.draggable.open("tag_register", RegisterNewTag, {
|
||||||
componentProps: {
|
componentProps: {
|
||||||
onFinish: onFinish,
|
onFinish: onFinish,
|
||||||
tagData: tag,
|
tagData: tag,
|
||||||
}
|
},
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const TapShareRender = () => {
|
const TapShareRender = () => {
|
||||||
return <div className="tap-share-render">
|
return (
|
||||||
{
|
<div className="tap-share-render">
|
||||||
!app.cores.nfc.scanning && app.isMobile && <antd.Alert
|
{!app.cores.nfc.scanning && app.isMobile && (
|
||||||
type="warning"
|
<antd.Alert
|
||||||
message="NFC is disabled"
|
type="warning"
|
||||||
description="You can enable it in your device settings."
|
message="NFC is disabled"
|
||||||
/>
|
description="You can enable it in your device settings."
|
||||||
}
|
/>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="tap-share-field">
|
<div className="tap-share-field">
|
||||||
<div className="tap-share-field_header">
|
<div className="tap-share-field_header">
|
||||||
<h1>
|
<h1>
|
||||||
<Icons.MdSpoke /> Registered Tags
|
<Icons.MdSpoke /> Registered Tags
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{
|
{app.cores.nfc.scanning && (
|
||||||
app.cores.nfc.scanning && <span className="tip">
|
<span className="tip">
|
||||||
<Icons.MdInfo /> You can quickly edit your tags by tapping them.
|
<Icons.MdInfo /> You can quickly edit your tags by
|
||||||
</span>
|
tapping them.
|
||||||
}
|
</span>
|
||||||
|
)}
|
||||||
|
|
||||||
<OwnTags />
|
<OwnTags />
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
<div className="tap-share-field">
|
)
|
||||||
<div className="tap-share-field_header">
|
|
||||||
<h1>
|
|
||||||
<Icons.MdBadge /> Your Badge
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<UserShareBadge
|
|
||||||
user={app.userData}
|
|
||||||
editMode
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
id: "tap_share",
|
id: "tap_share",
|
||||||
icon: "MdNfc",
|
icon: "MdNfc",
|
||||||
label: "Tap Share",
|
label: "Tap Share",
|
||||||
group: "app",
|
group: "app",
|
||||||
render: TapShareRender
|
render: TapShareRender,
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,290 +1,286 @@
|
|||||||
.tap-share-render {
|
.tap-share-render {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
.tap-share-field {
|
.tap-share-field {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
background-color: var(--background-color-accent);
|
background-color: var(--background-color-accent);
|
||||||
padding: 20px;
|
padding: 15px;
|
||||||
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
span {
|
span {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-field_header {
|
.tap-share-field_header {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
h1,
|
h1,
|
||||||
p {
|
p {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-own_tags {
|
.tap-share-own_tags {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
gap: 10px;
|
|
||||||
|
|
||||||
.tap-share-own_tags-add {
|
gap: 10px;
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tap-share-own_tags-item {
|
.tap-share-own_tags-add {
|
||||||
display: flex;
|
width: 100%;
|
||||||
flex-direction: row;
|
}
|
||||||
|
|
||||||
align-items: center;
|
.tap-share-own_tags-item {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
width: 100%;
|
align-items: center;
|
||||||
|
|
||||||
gap: 10px;
|
width: 100%;
|
||||||
padding: 10px;
|
|
||||||
|
|
||||||
background-color: var(--background-color-primary);
|
gap: 10px;
|
||||||
|
padding: 10px;
|
||||||
|
|
||||||
border-radius: 8px;
|
background-color: var(--background-color-primary);
|
||||||
|
|
||||||
.tap-share-own_tags-item-icon {
|
border-radius: 8px;
|
||||||
font-size: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tap-share-own_tags-item-title {
|
.tap-share-own_tags-item-icon {
|
||||||
display: flex;
|
font-size: 2rem;
|
||||||
flex-direction: column;
|
}
|
||||||
|
|
||||||
width: 100%;
|
.tap-share-own_tags-item-title {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
gap: 10px;
|
width: 100%;
|
||||||
|
|
||||||
color: var(--text-color);
|
gap: 10px;
|
||||||
|
|
||||||
h1,
|
color: var(--text-color);
|
||||||
h2,
|
|
||||||
h3,
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6,
|
|
||||||
p,
|
|
||||||
span {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
span {
|
h1,
|
||||||
font-size: 0.7rem;
|
h2,
|
||||||
opacity: 0.7px;
|
h3,
|
||||||
}
|
h4,
|
||||||
}
|
h5,
|
||||||
|
h6,
|
||||||
|
p,
|
||||||
|
span {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.tap-share-own_tags-item-actions {
|
span {
|
||||||
display: flex;
|
font-size: 0.7rem;
|
||||||
flex-direction: row;
|
opacity: 0.7px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
align-items: center;
|
.tap-share-own_tags-item-actions {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
|
||||||
gap: 10px;
|
align-items: center;
|
||||||
|
|
||||||
|
gap: 10px;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-register {
|
.tap-share-register {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
&.compact {
|
&.compact {
|
||||||
.tap-share-register-header {
|
.tap-share-register-header {
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
|
|
||||||
.tap-share-register-header-icon {
|
.tap-share-register-header-icon {
|
||||||
font-size: 0;
|
font-size: 0;
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-register-header {
|
.tap-share-register-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
background-color: var(--background-color-accent);
|
background-color: var(--background-color-accent);
|
||||||
|
|
||||||
border-radius: 12px;
|
border-radius: 12px;
|
||||||
|
|
||||||
transition: all 150ms ease-in-out;
|
transition: all 150ms ease-in-out;
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-register-header-back {
|
.tap-share-register-header-back {
|
||||||
font-size: 2rem;
|
font-size: 2rem;
|
||||||
color: var(--colorPrimary);
|
color: var(--colorPrimary);
|
||||||
|
|
||||||
&.hidden {
|
&.hidden {
|
||||||
width: 0;
|
width: 0;
|
||||||
height: 0;
|
height: 0;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-register-header-icon {
|
.tap-share-register-header-icon {
|
||||||
font-size: 5rem;
|
font-size: 5rem;
|
||||||
color: var(--colorPrimary);
|
color: var(--colorPrimary);
|
||||||
|
|
||||||
svg {
|
svg {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-register-content {
|
.tap-share-register-content {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
||||||
.tap-share-register_step {
|
.tap-share-register_step {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
height: 100%;
|
height: 100%;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
padding: 0 10px;
|
padding: 0 10px;
|
||||||
|
|
||||||
transition: all 150ms ease-in-out;
|
transition: all 150ms ease-in-out;
|
||||||
|
|
||||||
.adm-input-element {
|
.adm-input-element {
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
h1 {
|
h1 {
|
||||||
transition: all 150ms ease-in-out;
|
transition: all 150ms ease-in-out;
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
&.centered {
|
&.centered {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-form {
|
.ant-form {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.ant-form-item {
|
.ant-form-item {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
|
||||||
.ant-form_with_selector {
|
.ant-form_with_selector {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
gap: 10px;
|
gap: 10px;
|
||||||
|
|
||||||
.ant-select {
|
.ant-select {
|
||||||
width: fit-content;
|
width: fit-content;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-input {
|
.ant-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-form-item-label {
|
.ant-form-item-label {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
|
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
label {
|
label {
|
||||||
height: fit-content;
|
height: fit-content;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.description {
|
.description {
|
||||||
font-size: 0.8rem;
|
font-size: 0.8rem;
|
||||||
opacity: 0.8;
|
opacity: 0.8;
|
||||||
|
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tap-share-register_step_actions {
|
.tap-share-register_step_actions {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
gap: 20px;
|
gap: 20px;
|
||||||
|
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
|
||||||
color: var(--text-color);
|
color: var(--text-color);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.animation-player {
|
.animation-player {
|
||||||
width: 50%;
|
width: 50%;
|
||||||
|
|
||||||
&.loading {
|
&.loading {
|
||||||
.phone-loop {
|
.phone-loop {
|
||||||
color: #17b2ff;
|
color: #17b2ff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.phone-loop {
|
.phone-loop {
|
||||||
color: var(--colorPrimary);
|
color: var(--colorPrimary);
|
||||||
|
|
||||||
path {
|
path {
|
||||||
fill: currentColor;
|
fill: currentColor;
|
||||||
stroke: currentColor;
|
stroke: currentColor;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user