Compare commits
2 Commits
13b506960b
...
19733eb22a
| Author | SHA1 | Date |
|---|---|---|
 Bhagwan Singh
|
19733eb22a | |
|
Bhagwan Singh
|
300e5474d9 |
|
|
@ -3,9 +3,6 @@ import { useEffect, useState } from "react";
|
|||
import { useNavigate, useLocation } from "react-router-dom";
|
||||
import LoginForm from "./LoginForm";
|
||||
import RegisterForm from "./RegisterForm";
|
||||
import { useDispatch } from "react-redux";
|
||||
import { AppDispatch } from "../../store/store";
|
||||
import { fetchUserDetails } from "../../store/slices/userSlice";
|
||||
import LoginRegisterImg from "../../assets/illustration_1_.png";
|
||||
import SMELogo from "../../assets/SMELogo.png";
|
||||
import api from "../../config/api";
|
||||
|
|
@ -75,7 +72,10 @@ function UserAuthUI() {
|
|||
</div>
|
||||
|
||||
{/* Right Side - Form */}
|
||||
<div className="flex-1 flex items-center justify-center p-8 lg:p-12">
|
||||
<div className="flex-1 flex-col sm:flex items-center justify-center p-8 lg:p-12">
|
||||
<div className="h-[82px] sm:hidden w-full flex justify-center items-center p-4 bg-[var(--primary)] rounded-lg">
|
||||
<img loading="lazy" height={50} src={SMELogo} alt="" />
|
||||
</div>
|
||||
{pageType === PAGE_TYPE_ENUM.LOGIN && <LoginForm onSwitchToRegister={() => navigate("/register")} />}
|
||||
{pageType === PAGE_TYPE_ENUM.REGISTER && <RegisterForm onSwitchToLogin={() => navigate("/login")} />}
|
||||
{pageType === PAGE_TYPE_ENUM.FORGOT_PASSWORD && <ForgotPasswordForm />}
|
||||
|
|
|
|||
|
|
@ -143,6 +143,21 @@ const TagProperties: React.FC<DroppedItemProps> = (
|
|||
setDropDownToggle(null)
|
||||
}
|
||||
|
||||
{/* Font */ }
|
||||
const smeFonts = [
|
||||
"Arial",
|
||||
"Helvetica",
|
||||
"Times New Roman",
|
||||
"Georgia",
|
||||
"Verdana",
|
||||
"Tahoma",
|
||||
"Trebuchet MS",
|
||||
"Courier New",
|
||||
"Lucida Console",
|
||||
"Impact",
|
||||
];
|
||||
|
||||
|
||||
// useEffect(() => {
|
||||
// if (selectedTag.label == "temporal" && !("dateFormat" in selectedTag)) {
|
||||
// handlePropertyChange("dateFormat", TEMPORAL.DATE);
|
||||
|
|
@ -360,7 +375,11 @@ const TagProperties: React.FC<DroppedItemProps> = (
|
|||
|
||||
{
|
||||
selectedTag.type.toLowerCase() == TagsTypes.TEMPORAL &&
|
||||
<CurrTimeStampAttr type={selectedTag.type} handlePropertyChange={handlePropertyChange} />
|
||||
<CurrTimeStampAttr
|
||||
type={selectedTag.type}
|
||||
currentTimeStamp={selectedTag.currentTimeStamp ?? false}
|
||||
handlePropertyChange={handlePropertyChange}
|
||||
/>
|
||||
}
|
||||
|
||||
<LabelAttr label={selectedTag.label ?? ""} handlePropertyChange={handlePropertyChange} />
|
||||
|
|
@ -451,66 +470,104 @@ const TagProperties: React.FC<DroppedItemProps> = (
|
|||
className="block mb-2 font-medium">Styles</label>
|
||||
<IoIosArrowDown className={`${styleOpen ? "rotate-[-90deg]" : ""} transition-all`} />
|
||||
</div>
|
||||
{
|
||||
styleOpen && <>
|
||||
{styleOpen && (
|
||||
<div className="rounded-sm border border-slate-200 bg-white p-4 shadow-sm">
|
||||
<div className="flex flex-wrap items-center gap-3">
|
||||
{/* Font */}
|
||||
<div className="mb-2">
|
||||
<label className="mr-2">Font</label>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="e.g. Arial"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
<div className="flex flex-col min-w-[140px] flex-1">
|
||||
<label className="text-xs font-medium text-slate-500 mb-1">
|
||||
Font
|
||||
</label>
|
||||
<select
|
||||
className="h-10 rounded-sm border border-slate-300 px-3 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={styles.font}
|
||||
onChange={(e) => handleStyleChange("font", e.target.value)}
|
||||
/>
|
||||
>
|
||||
{smeFonts.map((font) => (
|
||||
<option key={font} value={font}>
|
||||
{font}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Text Size */}
|
||||
<div className="mb-2">
|
||||
<label className="mr-2">Text Size</label>
|
||||
<input
|
||||
// value={}
|
||||
type="number"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200"
|
||||
{/* Font Size */}
|
||||
<div className="flex flex-col w-24">
|
||||
<label className="text-xs font-medium text-slate-500 mb-1">
|
||||
Size
|
||||
</label>
|
||||
<select
|
||||
className="h-10 rounded-sm border border-slate-300 px-2 text-sm focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
value={styles.textSize}
|
||||
onChange={(e) =>
|
||||
handleStyleChange("textSize", parseInt(e.target.value, 10) || 0)
|
||||
handleStyleChange("textSize", Number(e.target.value))
|
||||
}
|
||||
/>
|
||||
>
|
||||
{[7, 8, 9, 10, 11, 12, 14, 16, 18, 20, 22, 24, 26, 28, 36, 38, 72].map(
|
||||
(size) => (
|
||||
<option key={size} value={size}>
|
||||
{size}
|
||||
</option>
|
||||
)
|
||||
)}
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Color */}
|
||||
<div className="mb-2">
|
||||
<label className="mr-2">Color</label>
|
||||
<div className="flex flex-col">
|
||||
<label className="text-xs font-medium text-slate-500 mb-1">
|
||||
Color
|
||||
</label>
|
||||
<input
|
||||
type="color"
|
||||
className="outline-none border-1 rounded px-2 py-1 border-slate-200 w-10 h-8"
|
||||
className="h-10 w-14 cursor-pointer rounded-sm border border-slate-300 bg-white"
|
||||
value={styles.color}
|
||||
onChange={(e) => handleStyleChange("color", e.target.value)}
|
||||
onChange={(e) =>
|
||||
handleStyleChange("color", e.target.value)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Toggles for Bold, Italic, Underline */}
|
||||
<div className="flex gap-4 items-center mt-2">
|
||||
<label className="flex gap-1 items-center">
|
||||
<input type="checkbox" checked={styles.bold}
|
||||
onChange={(e) => handleStyleChange("bold", e.target.checked)} />
|
||||
Bold
|
||||
</label>
|
||||
<label className="flex gap-1 items-center">
|
||||
<input type="checkbox" checked={styles.italic} onChange={(e) => handleStyleChange("italic", e.target.checked)} />
|
||||
Italic
|
||||
</label>
|
||||
<label className="flex gap-1 items-center">
|
||||
<input type="checkbox" checked={styles.underline}
|
||||
onChange={(e) =>
|
||||
handleStyleChange("underline", e.target.checked)
|
||||
} />
|
||||
Underline
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
|
||||
{/* Style Buttons */}
|
||||
<div className="mt-4 flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleStyleChange("bold", !styles.bold)}
|
||||
className={`h-10 w-10 rounded-sm border transition ${styles.bold
|
||||
? "bg-blue-600 text-white border-blue-600"
|
||||
: "bg-white border-slate-300 hover:bg-slate-100"
|
||||
}`}
|
||||
>
|
||||
<strong>B</strong>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleStyleChange("italic", !styles.italic)}
|
||||
className={`h-10 w-10 rounded-sm border transition ${styles.italic
|
||||
? "bg-blue-600 text-white border-blue-600"
|
||||
: "bg-white border-slate-300 hover:bg-slate-100"
|
||||
}`}
|
||||
>
|
||||
<em>I</em>
|
||||
</button>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() =>
|
||||
handleStyleChange("underline", !styles.underline)
|
||||
}
|
||||
className={`h-10 w-10 rounded-sm border transition ${styles.underline
|
||||
? "bg-blue-600 text-white border-blue-600"
|
||||
: "bg-white border-slate-300 hover:bg-slate-100"
|
||||
}`}
|
||||
>
|
||||
<span className="underline">U</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,37 +1,42 @@
|
|||
import React, { useState } from 'react'
|
||||
|
||||
interface CurrTimeStampAttrInt {
|
||||
type: string;
|
||||
handlePropertyChange: (changeTo: string, changeWith: string | boolean | number) => void;
|
||||
currentTimeStamp?: boolean;
|
||||
handlePropertyChange: (
|
||||
changeTo: string,
|
||||
changeWith: string | boolean | number
|
||||
) => void;
|
||||
}
|
||||
|
||||
const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({ type, handlePropertyChange}) => {
|
||||
|
||||
const [isCurrentTimeStamp, setIsCurrentTimeStamp] = useState<boolean>(true);
|
||||
|
||||
const CurrTimeStampAttr: React.FC<CurrTimeStampAttrInt> = ({
|
||||
type,
|
||||
currentTimeStamp = false,
|
||||
handlePropertyChange,
|
||||
}) => {
|
||||
const handleIsCurrentTimeStamp = (checked: boolean) => {
|
||||
if (type.toLowerCase() == "temporal") {
|
||||
setIsCurrentTimeStamp(checked)
|
||||
if (type.toLowerCase() === "temporal") {
|
||||
handlePropertyChange("currentTimeStamp", checked);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="flex justify-between items-center border-1 p-1.5 rounded-sm border-slate-200">
|
||||
<div className="flex justify-between items-center border p-1.5 rounded-sm border-slate-200">
|
||||
<label
|
||||
className="text-slate-600 transitions-all duration-150 font-medium"
|
||||
className="text-slate-600 font-medium"
|
||||
htmlFor="use_current_timestamp"
|
||||
>
|
||||
Use Current Timestamp
|
||||
</label>
|
||||
|
||||
<input
|
||||
checked={isCurrentTimeStamp ? isCurrentTimeStamp : false}
|
||||
onChange={(e) => handleIsCurrentTimeStamp(e.target.checked)}
|
||||
id="use_current_timestamp"
|
||||
type="checkbox"
|
||||
checked={currentTimeStamp}
|
||||
onChange={(e) =>
|
||||
handleIsCurrentTimeStamp(e.target.checked)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
export default CurrTimeStampAttr
|
||||
export default CurrTimeStampAttr;
|
||||
Loading…
Reference in New Issue