bring back pjsekai auth background

This commit is contained in:
OfficialDakari 2024-10-04 21:24:04 +05:00
parent 12e0182d3e
commit 630fd8e8d4
10 changed files with 175 additions and 118 deletions

4
COPYRIGHT.md Normal file
View file

@ -0,0 +1,4 @@
Since this update includes some sound effects/images and you are copyright owner, email `squiggle_ground671@simplelogin.com` if you have any questions regarding content or want to get that content removed.
- [Better Call Nokia - Saul Goodman Ringtone](https://www.youtube.com/watch?v=Ax4JcYZStcA) as Incoming Call Ringtone
- [Instagram Outgoing Call Sound Effect](https://www.youtube.com/watch?v=h0rAleDp77o) as Ringing Sound
- [Niigo new Empty Sekai](https://www.reddit.com/r/ProjectSekai/comments/17zuuse/niigo_new_empty_sekai/) as Auth Background

View file

@ -1,9 +1,10 @@
# Extera
[Discussion on Matrix](https://matrix.to/#/#extera:extera.xyz)
Since this update includes some sound effects and you are copyright owner, email `squiggle_ground671@simplelogin.com` if you have any questions regarding content or want to get that content removed.
Since this update includes some sound effects/images and you are copyright owner, email `squiggle_ground671@simplelogin.com` if you have any questions regarding content or want to get that content removed.
- [Better Call Nokia - Saul Goodman Ringtone](https://www.youtube.com/watch?v=Ax4JcYZStcA) as Incoming Call Ringtone
- [Instagram Outgoing Call Sound Effect](https://www.youtube.com/watch?v=h0rAleDp77o) as Ringing Sound
- [Niigo new Empty Sekai](https://www.reddit.com/r/ProjectSekai/comments/17zuuse/niigo_new_empty_sekai/) as Auth Background
This is a fork of Cinny with some improvements and new features:
- New commands: /lenny /tableflip /unflip

BIN
public/background.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 249 KiB

View file

@ -1,49 +1,55 @@
.img-upload__wrapper {
display: flex;
flex-direction: column;
align-items: center;
display: flex;
flex-direction: column;
align-items: center;
}
.img-upload {
display: flex;
cursor: pointer;
position: relative;
display: flex;
cursor: pointer;
position: relative;
&__process {
width: 100%;
height: 100%;
border-radius: var(--bo-radius);
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .6);
position: absolute;
left: 0;
right: 0;
z-index: 1;
& .text {
text-transform: uppercase;
color: white;
}
&--stopped {
display: none;
}
& .donut-spinner {
border-color: rgb(255, 255, 255, .3);
border-left-color: white;
}
}
&:hover .img-upload__process--stopped {
display: flex;
}
&__process {
width: 100%;
height: 100%;
border-radius: var(--bo-radius);
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, .6);
position: absolute;
left: 0;
right: 0;
z-index: 1;
& .text {
text-transform: uppercase;
color: white;
}
&--stopped {
display: none;
}
& .donut-spinner {
border-color: rgb(255, 255, 255, .3);
border-left-color: white;
}
}
&:hover .img-upload__process--stopped {
display: flex;
border-radius: 50%;
}
&__btn-cancel {
margin-top: var(--sp-extra-tight);
cursor: pointer;
& .text {
color: var(--tc-danger-normal)
}
}
}
&__btn-cancel {
margin-top: var(--sp-extra-tight);
cursor: pointer;
& .text {
color: var(--tc-danger-normal)
}
}
}

View file

@ -5,16 +5,16 @@ import initMatrix from '../../../client/initMatrix';
import colorMXID from '../../../util/colorMXID';
import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton';
import Button from '../../atoms/button/Button';
import ImageUpload from '../../molecules/image-upload/ImageUpload';
import Input from '../../atoms/input/Input';
import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
import './ProfileEditor.scss';
import { getText } from '../../../lang';
import { mdiPencil } from '@mdi/js';
import { Button, IconButton, TextField } from '@mui/material';
import { Close, Edit, Save } from '@mui/icons-material';
import { Box } from 'folds';
function ProfileEditor({ userId }) {
const [isEditing, setIsEditing] = useState(false);
@ -86,16 +86,22 @@ function ProfileEditor({ userId }) {
saveDisplayName();
}}
>
<Input
<TextField
label={getText('profile_editor.displayname')}
onChange={onDisplayNameInputChange}
value={mx.getUser(mx.getUserId()).displayName}
forwardRef={displayNameRef}
defaultValue={mx.getUser(mx.getUserId()).displayName}
inputRef={displayNameRef}
size='small'
variant='standard'
/>
<Button variant="primary" type="submit" disabled={disabled}>
{getText('btn.profile_editor.save_name')}
</Button>
<Button onClick={cancelDisplayNameChanges}>{getText('btn.cancel')}</Button>
<Box grow='Yes'>
<IconButton color="primary" type="submit" disabled={disabled}>
<Save />
</IconButton>
<IconButton onClick={cancelDisplayNameChanges}>
<Close />
</IconButton>
</Box>
</form>
);
@ -106,10 +112,10 @@ function ProfileEditor({ userId }) {
{username ?? userId}
</Text>
<IconButton
src={mdiPencil}
tooltip="Edit"
onClick={() => setIsEditing(true)}
/>
>
<Edit />
</IconButton>
</div>
<Text variant="b2">{mx.getUserId()}</Text>
</div>

View file

@ -14,12 +14,10 @@ import {
import { usePermission } from '../../hooks/usePermission';
import Text from '../../atoms/text/Text';
import IconButton from '../../atoms/button/IconButton';
import Tabs from '../../atoms/tabs/Tabs';
import { MenuHeader } from '../../atoms/context-menu/ContextMenu';
import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls';
import PopupWindow from '../../molecules/popup-window/PopupWindow';
import SettingTile from '../../molecules/setting-tile/SettingTile';
import ImportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ImportE2ERoomKeys';
import ExportE2ERoomKeys from '../../molecules/import-export-e2e-room-keys/ExportE2ERoomKeys';
@ -33,7 +31,7 @@ import CrossSigning from './CrossSigning';
import KeyBackup from './KeyBackup';
import DeviceManage from './DeviceManage';
import { Switch, Button, ToggleButtonGroup, ToggleButton, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Dialog } from '@mui/material';
import { Switch, Button, ToggleButtonGroup, ToggleButton, DialogTitle, DialogContent, DialogContentText, TextField, DialogActions, Dialog, AppBar, IconButton } from '@mui/material';
import CinnySVG from '../../../../public/res/svg/cinny.svg';
import { confirmDialog } from '../../molecules/confirm-dialog/ConfirmDialog';
@ -54,6 +52,8 @@ import FocusTrap from 'focus-trap-react';
import getCachedURL from '../../utils/cache';
import wallpaperDB from '../../utils/wallpaper';
import { useAccountData } from '../../hooks/useAccountData';
import ProminientToolbar from '../../components/prominient-toolbar/ProminientToolbar';
import { Close, HideImage, Image, Logout } from '@mui/icons-material';
function AppearanceSection() {
const [, updateState] = useState({});
@ -880,31 +880,67 @@ function Settings() {
useBackButton(requestClose);
return (
<PopupWindow
isOpen={isOpen}
className="settings-window"
title={<Text variant="s1" weight="medium" primary>{getText('settings.title')}</Text>}
contentOptions={(
<>
{bannerSrc && <Button iconSrc={mdiClose} onClick={handleBannerRemove}>
{getText('btn.remove_banner')}
</Button>}
<Button variant="outlined" color='error' iconSrc={mdiArrowLeft} onClick={handleLogout}>
{getText('btn.logout_session')}
</Button>
<IconButton src={mdiClose} onClick={requestClose} tooltip="Close" />
</>
)}
onRequestClose={requestClose}
<Dialog
open={isOpen}
// contentOptions={(
// <>
// {bannerSrc && <Button iconSrc={mdiClose} onClick={handleBannerRemove}>
// {getText('btn.remove_banner')}
// </Button>}
// <Button variant="outlined" color='error' iconSrc={mdiArrowLeft} onClick={handleLogout}>
// {getText('btn.logout_session')}
// </Button>
// <IconButton src={mdiClose} onClick={requestClose} tooltip="Close" />
// </>
// )}
onClose={requestClose}
>
{isOpen && (
<AppBar position='relative'>
<ProminientToolbar>
{/* {
bannerSrc ?
<Banner noBorder={true} url={bannerSrc} onUpload={handleBannerChange} /> :
<Banner noBorder={true} emptyBanner='transparent' onUpload={handleBannerChange} />
} */}
<Box grow='Yes'>
<ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
</Box>
<IconButton
size='large'
edge='end'
onClick={handleBannerChange}
>
<Image />
</IconButton>
<IconButton
size='large'
edge='end'
color='error'
onClick={handleBannerRemove}
>
<HideImage />
</IconButton>
<IconButton
size='large'
edge='end'
color='error'
onClick={handleLogout}
>
<Logout />
</IconButton>
<IconButton
size='large'
edge='end'
onClick={requestClose}
>
<Close />
</IconButton>
</ProminientToolbar>
</AppBar>
)}
{isOpen && (
<div className="settings-window__content">
{
bannerSrc ?
<Banner noBorder={true} url={bannerSrc} onUpload={handleBannerChange} /> :
<Banner noBorder={true} emptyBanner='transparent' onUpload={handleBannerChange} />
}
<ProfileEditor userId={initMatrix.matrixClient.getUserId()} />
<Tabs
items={tabItems}
defaultSelected={tabItems.findIndex((tab) => tab.text === selectedTab.text)}
@ -915,7 +951,7 @@ function Settings() {
</div>
</div>
)}
</PopupWindow>
</Dialog>
);
}

View file

@ -13,7 +13,7 @@
}
& .profile-editor {
padding: var(--sp-loose) var(--sp-extra-loose);
padding: var(--sp-loose) var(--sp-extraloose);
}
& .tabs__content {
@ -22,7 +22,7 @@
&__cards-wrapper {
padding: 0 var(--sp-normal);
@include dir.side(padding, var(--sp-normal), var(--sp-extra-tight));
@include dir.side(padding, var(--sp-normal), var(--sp-normal));
}
}

View file

@ -2,53 +2,53 @@ import { style } from '@vanilla-extract/css';
import { DefaultReset, color, config, toRem } from 'folds';
export const AuthLayout = style({
minHeight: '100%',
backgroundImage: 'url(https://officialdakari.ru/_matrix/media/r0/download/officialdakari.ru/JUqbxJuKHpqOplBXEvhagArF)',
backgroundSize: 'cover',
color: color.Background.OnContainer,
padding: config.space.S400,
paddingRight: config.space.S200,
paddingBottom: 0,
position: 'relative',
minHeight: '100%',
backgroundImage: 'url(/background.jpg)',
backgroundSize: 'cover',
color: color.Background.OnContainer,
padding: config.space.S400,
paddingRight: config.space.S200,
paddingBottom: 0,
position: 'relative',
});
export const AuthCard = style({
marginTop: '1vh',
maxWidth: toRem(460),
width: '100%',
backgroundColor: color.Surface.Container,
color: color.Surface.OnContainer,
borderRadius: config.radii.R400,
boxShadow: config.shadow.E100,
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
overflow: 'hidden',
marginTop: '1vh',
maxWidth: toRem(460),
width: '100%',
backgroundColor: color.Surface.Container,
color: color.Surface.OnContainer,
borderRadius: config.radii.R400,
boxShadow: config.shadow.E100,
border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
overflow: 'hidden',
});
export const AuthLogo = style([
DefaultReset,
{
width: toRem(26),
height: toRem(26),
DefaultReset,
{
width: toRem(26),
height: toRem(26),
borderRadius: '50%',
},
borderRadius: '50%',
},
]);
export const AuthHeader = style({
padding: `0 ${config.space.S400}`,
borderBottomWidth: config.borderWidth.B300,
padding: `0 ${config.space.S400}`,
borderBottomWidth: config.borderWidth.B300,
});
export const AuthCardContent = style({
maxWidth: toRem(402),
width: '100%',
margin: 'auto',
padding: config.space.S400,
paddingTop: config.space.S700,
paddingBottom: toRem(44),
gap: toRem(44),
maxWidth: toRem(402),
width: '100%',
margin: 'auto',
padding: config.space.S400,
paddingTop: config.space.S700,
paddingBottom: toRem(44),
gap: toRem(44),
});
export const AuthFooter = style({
padding: config.space.S200,
padding: config.space.S200,
});

View file

@ -20,7 +20,7 @@ export default function SyncStateAlert() {
};
});
return syncState && syncState !== SyncState.Syncing && (
return syncState && syncState !== SyncState.Prepared && syncState !== SyncState.Syncing && (
<Alert severity={syncState === SyncState.Error ? 'error' : 'info'}>
{getText(`sync_state.${syncState}`)}
</Alert>

View file

@ -44,6 +44,10 @@ const copyFiles = {
{
src: 'public/incoming.mp3',
dest: ''
},
{
src: 'public/background.jpg',
dest: ''
}
],
};