mirror of
https://github.com/officialdakari/Extera.git
synced 2025-04-11 23:08:46 +02:00
bring back pjsekai auth background
This commit is contained in:
parent
12e0182d3e
commit
630fd8e8d4
10 changed files with 175 additions and 118 deletions
4
COPYRIGHT.md
Normal file
4
COPYRIGHT.md
Normal 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
|
|
@ -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
BIN
public/background.jpg
Normal file
Binary file not shown.
After Width: | Height: | Size: 249 KiB |
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -44,6 +44,10 @@ const copyFiles = {
|
|||
{
|
||||
src: 'public/incoming.mp3',
|
||||
dest: ''
|
||||
},
|
||||
{
|
||||
src: 'public/background.jpg',
|
||||
dest: ''
|
||||
}
|
||||
],
|
||||
};
|
||||
|
|
Loading…
Add table
Reference in a new issue