Shikiryu/diaREact
1
0
Fork 0
Code Issues 19 Pull Requests Projects Releases Wiki Activity

🚧 Commence la personnalisation de l'affichage des pages

Browse Source 
Pour #12
This commit is contained in:
Clement Desmidt
2022-04-19 16:55:18 +02:00
parent 2c56eb91af
commit 1dca0951e8
18 changed files with 695 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
resources/js/components/pages/App.tsx
View File

@@ -24,6 +24,7 @@ const sessionPassphrase = sessionStorage.getItem("key") as string;
let pages: IList[] = [];
let getPageContentUrl,
postUrl,
settings,
removeUrl,
checkword,
startDate,
@@ -33,7 +34,8 @@ if (app) {
getPageContentUrl = "" + app.getAttribute('data-url');
pages = JSON.parse("" + app.getAttribute('data-list')) as IList[];
postUrl = "" + app.getAttribute('data-post');
startDate = "" + app.getAttribute('data-start');
startDate = "" + app.getAttribute('data-start');
settings = JSON.parse("" + app.getAttribute('data-settings'));
removeUrl = "" + app.getAttribute('data-remove');
csrf = "" + app.getAttribute('data-csrf');
checkword = "" + app.getAttribute('data-checkword');
@@ -195,6 +197,7 @@ function App() {
csrf={csrf}
removeUrl={removeUrl}
loadPages={loadPages}
settings={settings}
setAllLoaded={setAllLoaded}
/>
<Divider/>

14
resources/js/components/pages/List.tsx
View File

@@ -5,7 +5,7 @@ import {IPages} from "../../interfaces/IPages";
import {IList} from "../../interfaces/IList";
import {isAllLoadedLocally} from "../../utils";
export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPages, setAllLoaded}: IPages) {
export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPages, settings, setAllLoaded}: IPages) {
const isPassphraseSet = passphrase !== null;
const perPage = 1;
const total = pages.length;
@@ -24,26 +24,22 @@ export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPage
const json = await response.json();
if (json.success) {
console.log(listPages.length);
const newListPages = listPages.filter(function (value) {
console.log(value.id);
return value.id !== id;
});
setListPages(newListPages);
console.log(newListPages.length);
console.log(listPages.length);
updateListPages(newListPages.slice((currentPage - 1) * perPage, ((currentPage - 1) * perPage) + perPage).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id}/>));
<Page page={page} url={url} remove={removePage} settings={settings} passphrase={passphrase} key={page.id}/>));
}
}
const [listPagesDisplayed, updateListPages] = React.useState(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage ).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id} />));
<Page page={page} url={url} remove={removePage} settings={settings} passphrase={passphrase} key={page.id} />));
const handlePageChange = (event: React.ChangeEvent<unknown>, value: number) => {
setPage(value);
updateListPages(listPages.slice((value-1) * perPage, ((value-1) * perPage) + perPage).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id}/>));
<Page page={page} url={url} settings={settings} remove={removePage} passphrase={passphrase} key={page.id}/>));
};
const loadAllPages = function() {
@@ -61,7 +57,7 @@ export default function Pages({pages, url, removeUrl, csrf, passphrase, loadPage
localStorage.setItem(page.id + "text", json.content);
updateListPages([]);
updateListPages(listPages.slice((currentPage-1) * perPage, ((currentPage-1) * perPage) + perPage).map(page =>
<Page page={page} url={url} remove={removePage} passphrase={passphrase} key={page.id}/>));
<Page page={page} url={url} remove={removePage} settings={settings} passphrase={passphrase} key={page.id}/>));
}
}

26
resources/js/components/pages/Page.tsx
View File

@@ -3,7 +3,7 @@ import {
AlertTitle,
Card, CardContent,
CardHeader, Collapse,
Grid, IconButton
Grid, IconButton,
} from '@mui/material';
import MoreVertIcon from '@mui/icons-material/MoreVert';
import * as React from 'react';
@@ -12,7 +12,7 @@ import {Delete, Download} from "@mui/icons-material";
import MDEditor from "@uiw/react-md-editor";
import {PropPage} from "../../interfaces/PropPage";
const Page = function({page, url, passphrase, remove}: PropPage) {
const Page = function({page, url, passphrase, settings, remove}: PropPage) {
const [more, setMore] = React.useState<boolean>(false);
const handleMoreClick = () => { setMore(!more); };
@@ -49,10 +49,22 @@ const Page = function({page, url, passphrase, remove}: PropPage) {
);
}
return (
<Grid item xs={12} sm={12} md={12} id={page.id}>
<Grid item xs={12} sm={12} md={12} id={page.id}
sx={{
bgcolor: settings.background_color,
color: settings.text_color,
fontSize: settings.font_size + "px",
fontFamily: settings.font,
lineHeight: settings.line_spacing
}}>
<Card>
<CardHeader
sx={{
bgcolor: settings.background_color,
color: settings.text_color
}}
action={
icons
}
@@ -65,7 +77,13 @@ const Page = function({page, url, passphrase, remove}: PropPage) {
</IconButton>
</Collapse>
</CardHeader>
<CardContent>
<CardContent sx={{
backgroundColor: settings.background_color,
color: settings.text_color,
fontSize: settings.font_size + "px",
fontFamily: settings.font,
lineHeight: settings.line_spacing
}}>
<MDEditor.Markdown source={content} />
</CardContent>
</Card>

8
resources/js/components/user/BasicMenu.tsx
View File

@@ -13,6 +13,12 @@ export default function BasicMenu({nickname}) {
setAnchorEl(null);
};
function gotoSettings() {
const currentHref = location.href.split('/');
currentHref.pop();
location.href = currentHref.join('/') + '/settings';
}
function logout() {
const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
logoutForm.submit();
@@ -39,7 +45,7 @@ export default function BasicMenu({nickname}) {
'aria-labelledby': 'basic-button',
}}
>
{/*<MenuItem onClick={handleClose}>My account</MenuItem>*/}
<MenuItem onClick={gotoSettings}>Settings</MenuItem>
<MenuItem onClick={logout}>Logout</MenuItem>
</Menu>
</div>

16
resources/js/components/user/MobileMenu.tsx
View File

@@ -28,6 +28,12 @@ export default function MobileMenu({nickname}) {
setState( open );
};
function gotoSettings() {
const currentHref = location.href.split('/');
currentHref.pop();
location.href = currentHref.join('/') + '/settings';
}
function logout() {
const logoutForm: HTMLFormElement = document.getElementById("logout-form") as HTMLFormElement;
logoutForm.submit();
@@ -53,7 +59,7 @@ export default function MobileMenu({nickname}) {
onKeyDown={toggleDrawer(false)}
>
<List>
<ListItem button key={"user"}>
<ListItem key={"user"}>
<ListItemIcon>
<MailIcon />
</ListItemIcon>
@@ -62,7 +68,13 @@ export default function MobileMenu({nickname}) {
</List>
<Divider />
<List>
<ListItem button key={"user.logout"} onClick={logout}>
<ListItem key={"user.settings"} onClick={gotoSettings}>
<ListItemIcon>
<MailIcon />
</ListItemIcon>
<ListItemText primary={"Settings"} />
</ListItem>
<ListItem key={"user.logout"} onClick={logout}>
<ListItemIcon>
<InboxIcon />
</ListItemIcon>

2
resources/js/interfaces/IPages.ts
View File

@@ -1,5 +1,6 @@
import {IList} from "./IList";
import * as React from "react";
import {ISettings} from "./ISettings";
export interface IPages {
pages: IList[];
@@ -7,6 +8,7 @@ export interface IPages {
removeUrl: string;
csrf: string;
passphrase: string;
settings: ISettings;
loadPages: React.MutableRefObject<() => void>;
setAllLoaded: React.Dispatch<React.SetStateAction<boolean>>;
}

7
resources/js/interfaces/ISettings.ts Normal file
View File

@@ -0,0 +1,7 @@
export interface ISettings {
background_color: string;
text_color: string;
font_size: number;
font: string;
line_spacing: number;
}

2
resources/js/interfaces/PropPage.ts
View File

@@ -1,9 +1,11 @@
import { Ref } from "react";
import {IList} from "./IList";
import {ISettings} from "./ISettings";
export interface PropPage {
page: IList;
url: string;
settings: ISettings;
passphrase: string;
remove: (id) => void;
ref: Ref<IList>;

1
resources/views/pages/index.blade.php
View File

@@ -17,6 +17,7 @@
data-remove="{{ route('pages.destroy', ['page' => 'replace_me']) }}"
data-csrf="{{ csrf_token() }}"
data-checkword="{{ $checkword }}"
data-settings="{{ $settings }}"
>
</div>
</div>

96
resources/views/user/settings.blade.php Normal file
View File

@@ -0,0 +1,96 @@
<x-app-layout>
<x-slot name="header">
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
{{ __('Settings') }}
</h2>
</x-slot>
<div class="py-12">
<div class="max-w-7xl mx-auto sm:px-6 lg:px-8">
<div class="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<!-- Session Status -->
<x-auth-session-status class="mb-4" :status="session('status')" />
<!-- Validation Errors -->
<x-auth-validation-errors class="mb-4" :errors="$errors" />
<div class="p-6 bg-white border-b border-gray-200">
<form action="{{ route('user.storeSettings') }}" method="post">
@csrf
<div class="md:flex mb-6">
<div class="md:w-1/3">
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="text_color">
{{ __('Text color:') }}
</label>
</div>
<div class="md:w-2/3">
<input class="form-input block w-full focus:bg-white" id="text_color" name="text_color" type="color" value="{{ $settings['text_color'] }}">
</div>
</div>
<div class="md:flex mb-6">
<div class="md:w-1/3">
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="background_color">
{{ __('Background color:') }}
</label>
</div>
<div class="md:w-2/3">
<input class="form-input block w-full focus:bg-white" id="background_color" name="background_color" type="color" value="{{ $settings['background_color'] }}">
</div>
</div>
<div class="md:flex mb-6">
<div class="md:w-1/3">
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="font">
{{ __('Font:') }}
</label>
</div>
<div class="md:w-2/3">
<select class="form-select block w-full focus:bg-white" id="font" name="font">
<option value="Arial" {{ $settings['font'] === 'Arial' ? 'selected' : '' }}>Arial</option>
<option value="Pacifico" {{ $settings['font'] === 'Pacifico' ? 'selected' : '' }}>Pacifico</option>
</select>
</div>
</div>
<div class="md:flex mb-6">
<div class="md:w-1/3">
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="font_size">
{{ __('Font size:') }}
</label>
</div>
<div class="md:w-2/3">
<input class="form-input block w-full focus:bg-white" id="font_size" name="font_size" type="range" min="12" max="18" step="1" value="{{ $settings['font_size'] }}" oninput="this.nextElementSibling.value = this.value">
<output>{{ $settings['font_size'] }}</output>
</div>
</div>
<div class="md:flex mb-6">
<div class="md:w-1/3">
<label class="block text-gray-600 font-bold md:text-left mb-3 md:mb-0 pr-4" for="line_spacing">
{{ __('Line spacing:') }}
</label>
</div>
<div class="md:w-2/3">
<input class="form-input block w-full focus:bg-white" id="line_spacing" name="line_spacing" type="range" min="1" max="3" step="0.1" value="{{ $settings['line_spacing'] }}" oninput="this.nextElementSibling.value = this.value">
<output>{{ $settings['line_spacing'] }}</output>
</div>
</div>
<div class="md:flex md:items-center">
<div class="md:w-1/3"></div>
<div class="md:w-2/3">
<button class="shadow bg-yellow-700 hover:bg-yellow-500 focus:shadow-outline focus:outline-none text-white font-bold py-2 px-4 rounded" type="submit">
{{ __('Save preference') }}
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>