mirror of
https://github.com/chinchang/web-maker.git
synced 2025-07-09 08:02:24 +02:00
fix sharing n err handling
This commit is contained in:
@ -119,6 +119,12 @@ export function Icons() {
|
|||||||
<symbol id="view-list" viewBox="0 0 24 24">
|
<symbol id="view-list" viewBox="0 0 24 24">
|
||||||
<path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" />
|
<path d="M9,5V9H21V5M9,19H21V15H9M9,14H21V10H9M4,9H8V5H4M4,19H8V15H4M4,14H8V10H4V14Z" />
|
||||||
</symbol>
|
</symbol>
|
||||||
|
<symbol id="eye" viewBox="0 0 24 24">
|
||||||
|
<path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z" />
|
||||||
|
</symbol>
|
||||||
|
<symbol id="eye-striked" viewBox="0 0 24 24">
|
||||||
|
<path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z" />
|
||||||
|
</symbol>
|
||||||
<symbol id="loader-icon" viewBox="0 0 44 44">
|
<symbol id="loader-icon" viewBox="0 0 44 44">
|
||||||
{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
|
{/* By Sam Herbert (@sherb), for everyone. More http://goo.gl/7AJzbL */}
|
||||||
<g fill="none" fillRule="evenodd" strokeWidth={10}>
|
<g fill="none" fillRule="evenodd" strokeWidth={10}>
|
||||||
@ -173,9 +179,15 @@ export function Icons() {
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
export const Icon = ({ name, ...rest }) => {
|
export const Icon = ({ name, color, size, ...rest }) => {
|
||||||
return (
|
return (
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" {...rest}>
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width={size}
|
||||||
|
height={size}
|
||||||
|
style={{ fill: color }}
|
||||||
|
{...rest}
|
||||||
|
>
|
||||||
<use xlinkHref={`#${name}`} />
|
<use xlinkHref={`#${name}`} />
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
@ -1,7 +1,8 @@
|
|||||||
import { h } from 'preact';
|
import { h } from 'preact';
|
||||||
import { getHumanDate } from '../utils';
|
import { getHumanDate } from '../utils';
|
||||||
import Modal from './Modal';
|
import Modal from './Modal';
|
||||||
import { HStack } from './Stack';
|
import { HStack, Stack } from './Stack';
|
||||||
|
import { Icon } from './Icons';
|
||||||
|
|
||||||
export function ItemTile({
|
export function ItemTile({
|
||||||
item,
|
item,
|
||||||
@ -23,26 +24,6 @@ export function ItemTile({
|
|||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
>
|
>
|
||||||
<div class="saved-item-tile__btns">
|
<div class="saved-item-tile__btns">
|
||||||
{onToggleVisibilityBtnClick ? (
|
|
||||||
<button
|
|
||||||
class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium"
|
|
||||||
aria-label="Creates a duplicate of this creation (Ctrl/⌘ + F)"
|
|
||||||
onClick={onToggleVisibilityBtnClick}
|
|
||||||
>
|
|
||||||
Toggle Visibility
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
{item.isPublic ? (
|
|
||||||
<path d="M12 9a3 3 0 0 0-3 3 3 3 0 0 0 3 3 3 3 0 0 0 3-3 3 3 0 0 0-3-3m0 8a5 5 0 0 1-5-5 5 5 0 0 1 5-5 5 5 0 0 1 5 5 5 5 0 0 1-5 5m0-12.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5Z" />
|
|
||||||
) : (
|
|
||||||
<path d="M11.83 9 15 12.16V12a3 3 0 0 0-3-3h-.17m-4.3.8 1.55 1.55c-.05.21-.08.42-.08.65a3 3 0 0 0 3 3c.22 0 .44-.03.65-.08l1.55 1.55c-.67.33-1.41.53-2.2.53a5 5 0 0 1-5-5c0-.79.2-1.53.53-2.2M2 4.27l2.28 2.28.45.45C3.08 8.3 1.78 10 1 12c1.73 4.39 6 7.5 11 7.5 1.55 0 3.03-.3 4.38-.84l.43.42L19.73 22 21 20.73 3.27 3M12 7a5 5 0 0 1 5 5c0 .64-.13 1.26-.36 1.82l2.93 2.93c1.5-1.25 2.7-2.89 3.43-4.75-1.73-4.39-6-7.5-11-7.5-1.4 0-2.74.25-4 .7l2.17 2.15C10.74 7.13 11.35 7 12 7Z" />
|
|
||||||
)}
|
|
||||||
</svg>
|
|
||||||
</button>
|
|
||||||
) : null}
|
|
||||||
{onForkBtnClick ? (
|
{onForkBtnClick ? (
|
||||||
<button
|
<button
|
||||||
class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium"
|
class="js-saved-item-tile__fork-btn saved-item-tile__btn hint--left hint--medium"
|
||||||
@ -113,7 +94,16 @@ export function ItemTile({
|
|||||||
</>
|
</>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<div>right</div>
|
<div>
|
||||||
|
<Stack gap={1} align="center">
|
||||||
|
<Icon
|
||||||
|
size="16"
|
||||||
|
color="currentColor"
|
||||||
|
name={item.isPublic ? 'eye' : 'eye-striked'}
|
||||||
|
/>
|
||||||
|
{item.isPublic ? 'Public' : ''}
|
||||||
|
</Stack>
|
||||||
|
</div>
|
||||||
</HStack>
|
</HStack>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -5,6 +5,7 @@ import Switch from './Switch';
|
|||||||
import { itemService } from '../itemService';
|
import { itemService } from '../itemService';
|
||||||
import { alertsService } from '../notifications';
|
import { alertsService } from '../notifications';
|
||||||
import { Button } from './common';
|
import { Button } from './common';
|
||||||
|
import { Icon } from './Icons';
|
||||||
|
|
||||||
const FREE_PUBLIC_ITEM_COUNT = 1;
|
const FREE_PUBLIC_ITEM_COUNT = 1;
|
||||||
const BASE_URL = location.origin;
|
const BASE_URL = location.origin;
|
||||||
@ -25,9 +26,18 @@ export function Share({ user, item, onVisibilityChange }) {
|
|||||||
setVal(newVal);
|
setVal(newVal);
|
||||||
if (newVal) {
|
if (newVal) {
|
||||||
const token = await window.user.getIdToken();
|
const token = await window.user.getIdToken();
|
||||||
const res = await fetch(
|
let res;
|
||||||
`http://127.0.0.1:5001/web-maker-app/us-central1/toggleVisibility?token=${token}&itemId=${item.id}`
|
try {
|
||||||
);
|
res = await fetch(
|
||||||
|
`http://127.0.0.1:5001/web-maker-app/us-central1/toggleVisibility?token=${token}&itemId=${item.id}`
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
alertsService.add('Could not change visibility');
|
||||||
|
setTimeout(() => {
|
||||||
|
setVal(!newVal);
|
||||||
|
}, 1000);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
if (res.status >= 200 && res.status < 400) {
|
if (res.status >= 200 && res.status < 400) {
|
||||||
setPublicItemCount(publicItemCount + 1);
|
setPublicItemCount(publicItemCount + 1);
|
||||||
@ -50,26 +60,32 @@ export function Share({ user, item, onVisibilityChange }) {
|
|||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
<VStack gap={4} align="stretch">
|
<VStack gap={4} align="stretch">
|
||||||
<VStack gap={1} align="stretch">
|
<div style="min-width: 46ch">
|
||||||
<Switch
|
<VStack gap={1} align="stretch">
|
||||||
checked={val}
|
<Switch
|
||||||
onChange={onChange}
|
checked={val}
|
||||||
labels={['Private', 'Public']}
|
onChange={onChange}
|
||||||
>
|
labels={['Private', 'Public']}
|
||||||
Access
|
>
|
||||||
</Switch>
|
Access
|
||||||
{item.isPublic && (
|
</Switch>
|
||||||
<p>
|
{item.isPublic && (
|
||||||
Public at{' '}
|
<p>
|
||||||
<a href={`${BASE_URL}/create/${item.id}`} target="_blank">
|
Public at{' '}
|
||||||
{BASE_URL}/create/{item.id}
|
<a href={`${BASE_URL}/create/${item.id}`} target="_blank">
|
||||||
</a>{' '}
|
{BASE_URL}/create/{item.id}
|
||||||
<Button class="btn btn--dark" onClick={copyUrl}>
|
</a>{' '}
|
||||||
Copy
|
<Button
|
||||||
</Button>
|
class="btn btn--dark hint--bottom hint--rounded"
|
||||||
</p>
|
onClick={copyUrl}
|
||||||
)}
|
aria-label="Copy"
|
||||||
</VStack>
|
>
|
||||||
|
<Icon name="copy" />
|
||||||
|
</Button>
|
||||||
|
</p>
|
||||||
|
)}
|
||||||
|
</VStack>
|
||||||
|
</div>
|
||||||
|
|
||||||
{!user?.isPro ? (
|
{!user?.isPro ? (
|
||||||
<VStack gap={1} align="stretch">
|
<VStack gap={1} align="stretch">
|
||||||
|
Reference in New Issue
Block a user