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