Skip to content

Commit

Permalink
Contain block values in a subobject on PageResource
Browse files Browse the repository at this point in the history
  • Loading branch information
@elektronaut
elektronaut committed Apr 28, 2023
1 parent cbfcb28 commit b1b34ce
Show file tree
Hide file tree
Showing 9 changed files with 156 additions and 224 deletions.
26 changes: 13 additions & 13 deletions app/assets/builds/pages_core/admin-dist.js
View file

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions app/assets/builds/pages_core/admin-dist.js.map
View file

Large diffs are not rendered by default.

272 changes: 87 additions & 185 deletions app/assets/builds/pages_core/admin.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -350,197 +350,99 @@ template {
display: none;
}

.ReactCrop {
position: relative;
display: inline-block;
cursor: crosshair;
overflow: hidden;
max-width: 100%;
background-color: #000; }
.ReactCrop{position:relative;display:inline-block;cursor:crosshair;overflow:hidden;max-width:100%}

.ReactCrop:focus {
outline: none; }
.ReactCrop *,.ReactCrop *::before,.ReactCrop *::after{box-sizing:border-box}

.ReactCrop--disabled {
cursor: inherit; }
.ReactCrop--disabled,.ReactCrop--locked{cursor:inherit}

.ReactCrop__image {
/* autoprefixer: off */
display: block;
max-width: 100%;
max-height: -webkit-fill-available;
max-height: -moz-available;
max-height: stretch; }
.ReactCrop__child-wrapper{max-height:inherit}

.ReactCrop--crop-invisible .ReactCrop__image {
opacity: 0.5; }
.ReactCrop__child-wrapper>img,.ReactCrop__child-wrapper>video{display:block;max-width:100%;max-height:inherit}

.ReactCrop__crop-selection {
position: absolute;
top: 0;
left: 0;
transform: translate3d(0, 0, 0);
box-sizing: border-box;
cursor: move;
box-shadow: 0 0 0 9999em rgba(0, 0, 0, 0.5);
border: 1px solid;
border-image-source: url("data:image/gif;base64,R0lGODlhCgAKAJECAAAAAP///////wAAACH/C05FVFNDQVBFMi4wAwEAAAAh/wtYTVAgRGF0YVhNUDw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6OEI5RDc5MTFDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6OEI5RDc5MTBDNkE2MTFFM0JCMDZEODI2QTI4MzJBOTIiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjAyODAxMTc0MDcyMDY4MTE4MDgzQzNDMjA5MzREQ0ZDIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Af/+/fz7+vn49/b19PPy8fDv7u3s6+rp6Ofm5eTj4uHg397d3Nva2djX1tXU09LR0M/OzczLysnIx8bFxMPCwcC/vr28u7q5uLe2tbSzsrGwr66trKuqqainpqWko6KhoJ+enZybmpmYl5aVlJOSkZCPjo2Mi4qJiIeGhYSDgoGAf359fHt6eXh3dnV0c3JxcG9ubWxramloZ2ZlZGNiYWBfXl1cW1pZWFdWVVRTUlFQT05NTEtKSUhHRkVEQ0JBQD8+PTw7Ojk4NzY1NDMyMTAvLi0sKyopKCcmJSQjIiEgHx4dHBsaGRgXFhUUExIREA8ODQwLCgkIBwYFBAMCAQAAIfkEBQoAAgAsAAAAAAoACgAAAhWEERkn7W3ei7KlagMWF/dKgYeyGAUAIfkEBQoAAgAsAAAAAAoACgAAAg+UYwLJ7RnQm7QmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYgLJHdiinNSAVfOEKoUCACH5BAUKAAIALAAAAAAKAAoAAAIRVISAdusPo3RAzYtjaMIaUQAAIfkEBQoAAgAsAAAAAAoACgAAAg+MDiem7Q8bSLFaG5il6xQAIfkEBQoAAgAsAAAAAAoACgAAAg+UYRLJ7QnQm7SmsCyVKhUAIfkEBQoAAgAsAAAAAAoACgAAAhCUYBLJDdiinNSEVfOEKoECACH5BAUKAAIALAAAAAAKAAoAAAIRFISBdusPo3RBzYsjaMIaUQAAOw==");
border-image-slice: 1;
border-image-repeat: repeat; }

.ReactCrop--disabled .ReactCrop__crop-selection {
cursor: inherit; }

.ReactCrop__drag-handle {
position: absolute;
width: 9px;
height: 9px;
background-color: rgba(0, 0, 0, 0.2);
border: 1px solid rgba(255, 255, 255, 0.7);
box-sizing: border-box;
outline: 1px solid transparent; }

.ReactCrop .ord-nw {
top: 0;
left: 0;
margin-top: -5px;
margin-left: -5px;
cursor: nw-resize; }

.ReactCrop .ord-n {
top: 0;
left: 50%;
margin-top: -5px;
margin-left: -5px;
cursor: n-resize; }

.ReactCrop .ord-ne {
top: 0;
right: 0;
margin-top: -5px;
margin-right: -5px;
cursor: ne-resize; }

.ReactCrop .ord-e {
top: 50%;
right: 0;
margin-top: -5px;
margin-right: -5px;
cursor: e-resize; }

.ReactCrop .ord-se {
bottom: 0;
right: 0;
margin-bottom: -5px;
margin-right: -5px;
cursor: se-resize; }

.ReactCrop .ord-s {
bottom: 0;
left: 50%;
margin-bottom: -5px;
margin-left: -5px;
cursor: s-resize; }

.ReactCrop .ord-sw {
bottom: 0;
left: 0;
margin-bottom: -5px;
margin-left: -5px;
cursor: sw-resize; }

.ReactCrop .ord-w {
top: 50%;
left: 0;
margin-top: -5px;
margin-left: -5px;
cursor: w-resize; }

.ReactCrop__disabled .ReactCrop__drag-handle {
cursor: inherit; }

.ReactCrop__drag-bar {
position: absolute; }

.ReactCrop__drag-bar.ord-n {
top: 0;
left: 0;
width: 100%;
height: 6px;
margin-top: -3px; }

.ReactCrop__drag-bar.ord-e {
right: 0;
top: 0;
width: 6px;
height: 100%;
margin-right: -3px; }

.ReactCrop__drag-bar.ord-s {
bottom: 0;
left: 0;
width: 100%;
height: 6px;
margin-bottom: -3px; }
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>img,.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__child-wrapper>video{touch-action:none}

.ReactCrop__drag-bar.ord-w {
top: 0;
left: 0;
width: 6px;
height: 100%;
margin-left: -3px; }

.ReactCrop--new-crop .ReactCrop__drag-bar,
.ReactCrop--new-crop .ReactCrop__drag-handle,
.ReactCrop--fixed-aspect .ReactCrop__drag-bar {
display: none; }

.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,
.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w {
display: none; }

@media (max-width: 768px), (pointer: coarse) {
.ReactCrop__drag-handle {
width: 17px;
height: 17px; }
.ReactCrop .ord-nw {
margin-top: -9px;
margin-left: -9px; }
.ReactCrop .ord-n {
margin-top: -9px;
margin-left: -9px; }
.ReactCrop .ord-ne {
margin-top: -9px;
margin-right: -9px; }
.ReactCrop .ord-e {
margin-top: -9px;
margin-right: -9px; }
.ReactCrop .ord-se {
margin-bottom: -9px;
margin-right: -9px; }
.ReactCrop .ord-s {
margin-bottom: -9px;
margin-left: -9px; }
.ReactCrop .ord-sw {
margin-bottom: -9px;
margin-left: -9px; }
.ReactCrop .ord-w {
margin-top: -9px;
margin-left: -9px; }
.ReactCrop__drag-bar.ord-n {
height: 14px;
margin-top: -7px; }
.ReactCrop__drag-bar.ord-e {
width: 14px;
margin-right: -7px; }
.ReactCrop__drag-bar.ord-s {
height: 14px;
margin-bottom: -7px; }
.ReactCrop__drag-bar.ord-w {
width: 14px;
margin-left: -7px; } }
.ReactCrop:not(.ReactCrop--disabled) .ReactCrop__crop-selection{touch-action:none}

.ReactCrop__crop-selection{position:absolute;top:0;left:0;transform:translate3d(0, 0, 0);cursor:move;box-shadow:0 0 0 9999em rgba(0,0,0,.5);border:1px dashed #fff}

.ReactCrop--disabled .ReactCrop__crop-selection{cursor:inherit}

.ReactCrop--circular-crop .ReactCrop__crop-selection{border-radius:50%;box-shadow:0px 0px 1px 1px #fff,0 0 0 9999em rgba(0,0,0,.5)}

.ReactCrop__crop-selection:focus{outline:none;border-color:blue;border-style:solid}

.ReactCrop--invisible-crop .ReactCrop__crop-selection{display:none}

.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after,.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{content:"";display:block;position:absolute;background-color:rgba(255,255,255,.4)}

.ReactCrop__rule-of-thirds-vt::before,.ReactCrop__rule-of-thirds-vt::after{width:1px;height:100%}

.ReactCrop__rule-of-thirds-vt::before{left:33.3333%;left:33.3333333333%}

.ReactCrop__rule-of-thirds-vt::after{left:66.6666%;left:66.6666666667%}

.ReactCrop__rule-of-thirds-hz::before,.ReactCrop__rule-of-thirds-hz::after{width:100%;height:1px}

.ReactCrop__rule-of-thirds-hz::before{top:33.3333%;top:33.3333333333%}

.ReactCrop__rule-of-thirds-hz::after{top:66.6666%;top:66.6666666667%}

.ReactCrop__drag-handle{position:absolute}

.ReactCrop__drag-handle::after{position:absolute;content:"";display:block;width:10px;height:10px;background-color:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.7);outline:1px solid rgba(0,0,0,0)}

.ReactCrop__drag-handle:focus::after{border-color:blue;background:#2dbfff}

.ReactCrop .ord-nw{top:0;left:0;margin-top:-5px;margin-left:-5px;cursor:nw-resize}

.ReactCrop .ord-nw::after{top:0;left:0}

.ReactCrop .ord-n{top:0;left:50%;margin-top:-5px;margin-left:-5px;cursor:n-resize}

.ReactCrop .ord-n::after{top:0}

.ReactCrop .ord-ne{top:0;right:0;margin-top:-5px;margin-right:-5px;cursor:ne-resize}

.ReactCrop .ord-ne::after{top:0;right:0}

.ReactCrop .ord-e{top:50%;right:0;margin-top:-5px;margin-right:-5px;cursor:e-resize}

.ReactCrop .ord-e::after{right:0}

.ReactCrop .ord-se{bottom:0;right:0;margin-bottom:-5px;margin-right:-5px;cursor:se-resize}

.ReactCrop .ord-se::after{bottom:0;right:0}

.ReactCrop .ord-s{bottom:0;left:50%;margin-bottom:-5px;margin-left:-5px;cursor:s-resize}

.ReactCrop .ord-s::after{bottom:0}

.ReactCrop .ord-sw{bottom:0;left:0;margin-bottom:-5px;margin-left:-5px;cursor:sw-resize}

.ReactCrop .ord-sw::after{bottom:0;left:0}

.ReactCrop .ord-w{top:50%;left:0;margin-top:-5px;margin-left:-5px;cursor:w-resize}

.ReactCrop .ord-w::after{left:0}

.ReactCrop__disabled .ReactCrop__drag-handle{cursor:inherit}

.ReactCrop__drag-bar{position:absolute}

.ReactCrop__drag-bar.ord-n{top:0;left:0;width:100%;height:6px;margin-top:-3px}

.ReactCrop__drag-bar.ord-e{right:0;top:0;width:6px;height:100%;margin-right:-3px}

.ReactCrop__drag-bar.ord-s{bottom:0;left:0;width:100%;height:6px;margin-bottom:-3px}

.ReactCrop__drag-bar.ord-w{top:0;left:0;width:6px;height:100%;margin-left:-3px}

.ReactCrop--new-crop .ReactCrop__drag-bar,.ReactCrop--new-crop .ReactCrop__drag-handle,.ReactCrop--fixed-aspect .ReactCrop__drag-bar{display:none}

.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-n,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-e,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-s,.ReactCrop--fixed-aspect .ReactCrop__drag-handle.ord-w{display:none}

@media(pointer: coarse){.ReactCrop .ord-n,.ReactCrop .ord-e,.ReactCrop .ord-s,.ReactCrop .ord-w{display:none}.ReactCrop__drag-handle{width:24px;height:24px}}

/*!
* Font Awesome Free 6.2.1 by @fontawesome - https://fontawesome.com
Expand Down
5 changes: 3 additions & 2 deletions app/javascript/components/PageForm/Content.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";

import { blockValue, errorsOn, PageBlockValue, PageFormAction, PageFormState } from "./usePage";
import { PageBlockValue } from "../../types";
import { blockValue, errorsOn, PageFormAction, PageFormState } from "./usePage";
import LabelledField from "../LabelledField";
import TagEditor from "../TagEditor";
import Block from "./Block";
Expand All @@ -17,7 +18,7 @@ export default function Content(props: ContentProps) {
const { page, locale, inputDir, templateConfig } = state;

const handleChange = (attr: string) => (value: PageBlockValue) => {
dispatch({ type: "update", payload: { [attr]: value } });
dispatch({ type: "updateBlocks", payload: { [attr]: value } });
};

return (
Expand Down
5 changes: 3 additions & 2 deletions app/javascript/components/PageForm/Metadata.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from "react";

import { blockValue, errorsOn, PageBlockValue, PageFormAction, PageFormState } from "./usePage";
import { PageBlockValue } from "../../types";
import { blockValue, errorsOn, PageFormAction, PageFormState } from "./usePage";
import Block from "./Block";
import PathSegment from "./PathSegment";
import LabelledField from "../LabelledField";
Expand All @@ -17,7 +18,7 @@ export default function Metadata(props: MetadataProps) {
const { page, locale, locales, inputDir, templateConfig } = state;

const handleChange = (attr: string) => (value: PageBlockValue) => {
dispatch({ type: "update", payload: { [attr]: value } });
dispatch({ type: "updateBlocks", payload: { [attr]: value } });
};

return (
Expand Down
11 changes: 7 additions & 4 deletions app/javascript/components/PageForm/PageDescription.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import React from "react";

import { PageResource } from "../../types";
import { PageAncestor, PageResource } from "../../types";
import { PageFormAction, PageFormState } from "./usePage";
import LocaleLinks from "./LocaleLinks";

Expand All @@ -10,16 +10,19 @@ interface PageDescriptionProps {
children: JSX.Element
}

function editLink(locale: string, page: PageResource): string {
function editLink(locale: string, page: PageAncestor | PageResource): string {
return(
<a href={`/admin/${locale}/pages/${page.id}/edit`}>
{pageName(locale, page)}
</a>
);
}

function pageName(locale: string, page: PageResource) {
return page.name[locale] || <i>Untitled</i>;
function pageName(locale: string, page: PageAncestor | PageResource) {
if ("name" in page) {
return page.name[locale];
}
return page.blocks.name[locale] || <i>Untitled</i>;
}

export default function PageDescription(props: PageDescriptionProps) {
Expand Down
Loading

0 comments on commit b1b34ce

Please sign in to comment.