@social-mail/social-mail-client 1.2.55 → 1.2.56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@social-mail/social-mail-client",
-  "version": "1.2.55",
+  "version": "1.2.56",
   "description": "",
   "main": "index.js",
   "scripts": {

package/src/common/pages/websites/manage/ManageWebSitePage.tsx

@@ -52,7 +52,9 @@ export default class ManageWebSitePage extends ContentPage {
                 label="Hosts"
                 model={this.model}
                 collection="hosts"
-                itemRenderer={(item: IWebSiteFolderHost) => <div text={item.host}></div>}
+                itemRenderer={(item: IWebSiteFolderHost) => <div>
+                    <a href={`https://${item.host}`} target="_blank" text={item.host}/>
+                </div>}
                 itemFactory={() => {
                     const host = prompt("Internet URL Host", "");
                     if (!host) {

package/src/site-editor/blocks/Buttons.tsx

@@ -0,0 +1,21 @@
+import XNode from "@web-atoms/core/dist/core/XNode";
+import { Block } from "./Block";
+import { defaultImageSrc } from "./defaultImage";
+
+export const ImageLink = Block({
+    className: "fad fa-images",
+    title: "Add Photo with Link",
+    factory: () => <a href="/" styler-element="image-link"><img src={defaultImageSrc}/></a>
+});
+
+export const LinkButton = Block({
+    className: "fad fa-link-simple",
+    title: "Add Link Button",
+    factory: () => <a href="/" styler-element="link-button">Button</a>
+});
+
+export const LinkIconButton = Block({
+    className: "fad fa-symbols",
+    title: "Add Link Button",
+    factory: () => <a href="/" styler-element="link-icon-button"><i class="fas fa-check"/>Button</a>
+});

package/src/site-editor/editor/HtmlPageEditor.tsx

@@ -26,6 +26,7 @@ import { Card } from "../blocks/Card";
 import { List } from "../blocks/List";
 import { BlogComponent } from "../blocks/Components";
 import { UMD } from "@web-atoms/core/dist/core/types";
+import { ImageLink, LinkButton } from "../blocks/Buttons";
 
     styled.css `
         display: grid;
@@ -323,6 +324,8 @@ export default class HtmlPageEditor extends AtomControl {
                 <Columns3/>
                 <List/>
                 <BlogComponent/>
+                <ImageLink/>
+                <LinkButton/>
             </EditorToolbar>
             <div data-element="editor"
                 style-max-width={Bind.oneWay(() => this.maxWidth > 768 ? "" : this.maxWidth + "px" )}>

package/src/site-editor/editor/SelectedElement.tsx

@@ -4,6 +4,7 @@ import type HtmlPageEditor from "./HtmlPageEditor";
 export class SelectedElement {
 
     public name: string;
+    public parentName: string;
 
     public top: string;
     public left: string;
@@ -44,6 +45,7 @@ export class SelectedElement {
 
     constructor(private editor: HtmlPageEditor) {
         this.name = "";
+        this.parentName = "";
         this.isImage = false;
         this.mo = new MutationObserver((changes) => {
             AtomBinder.refreshValue(this, "element");
@@ -60,23 +62,31 @@ export class SelectedElement {
     }
 
     public style(name) {
+        let parent;
+        let attributeName = name;
+        if (/^parent\-/.test(name)) {
+            parent = true;
+            attributeName = attributeName.substring(7);
+        }
         let mapper = this.styles.get(name);
         if (!mapper) {
             const owner = this;
-            const customName = "--" + name;
+            const customName = "--" + attributeName;
             mapper = {
                 name,
                 get value() {
-                    return owner.e?.getAttribute(name) ?? "";
+                    const e = parent ? owner.e?.parentElement : owner.e;
+                    return e?.getAttribute(attributeName) ?? "";
                 },
                 set value(v) {
-                    if (!owner.e) {
+                    const e = parent ? owner.e?.parentElement : owner.e;
+                    if (!e) {
                         return;
                     }
                     if (!v) {
-                        owner.e.removeAttribute(name);
+                        e.removeAttribute(attributeName);
                     } else {
-                        owner.e.setAttribute(name, v);
+                        e.setAttribute(attributeName, v);
                     }
                     owner.editor.commit();
                     AtomBinder.refreshValue(this, "value");
@@ -134,6 +144,7 @@ export class SelectedElement {
             return;
         }
         this.name = e.tagName.toLowerCase();
+        this.parentName = e.parentElement?.tagName.toLowerCase();
         const r = e.getBoundingClientRect();
         this.isImage = this.name === "img";
         this.top = `${r.top + 2}px`;

package/src/site-editor/properties/groups/AttributeEditor.tsx

@@ -9,6 +9,10 @@ export default function AttributeEditor() {
             label="Link"
             style-display={BindEditor.oneWay((x) => x.selection.name === "a")}
             attributeName="href"/>
+        <TextProperty
+            label="Link"
+            style-display={BindEditor.oneWay((x) => x.selection.parentName === "a")}
+            attributeName="parent-href"/>
         <TextProperty
             label="Target"
             style-display={BindEditor.oneWay((x) => x.selection.name === "a")}

package/src/site-editor/styler/Styler.ts

@@ -113,12 +113,17 @@ export const stylerVars = prepareVariables({
 
     linkColor: "blue",
 
+    buttonBackground: "lightgreen",
+    buttonText: "gray",
+
     primaryBackground: "#b372dd50",
     primaryColor: "gray",
     primaryAccent: "#6145a9c9",
     primaryAccentText: "white",
     primarySurface: "#FFFFFFA0",
     primarySurfaceText: "gray",
+    primaryButtonBackground: "lightblue",
+    primaryButtonText: "gray",
 
     secondaryBackground: "#00808050",
     secondaryColor: "gray",
@@ -126,6 +131,8 @@ export const stylerVars = prepareVariables({
     secondaryAccentText: "white",
     secondarySurface: "#FFFFFFA0",
     secondarySurfaceText: "gray",
+    secondaryButtonBackground: "lightgreen",
+    secondaryButtonText: "gray",
 
     tertiaryBackground: "#cfa55c87",
     tertiaryColor: "gray",
@@ -133,6 +140,8 @@ export const stylerVars = prepareVariables({
     tertiaryAccentText: "white",
     tertiarySurface: "#FFFFFFA0",
     tertiarySurfaceText: "gray",
+    tertiaryButtonBackground: "lightgreen",
+    tertiaryButtonText: "gray",
 
     navBarBackground: "rgb(114 134 170 / 51%)",
     navBarBackDropFilter: "blur(14px) saturate(180%)"

package/src/site-editor/styler/StylerSet.ts

@@ -10,6 +10,7 @@ import { stylerSpace } from "./properties/stylerSpace";
 import { stylerText } from "./properties/text/stylerText";
 import { stylerBackground } from "./properties/stylerBackground";
 import { stylerColorSets } from "./properties/color-sets/stylerColorSets";
+import { stylerElement } from "./properties/elements/elements";
 
 const vars = [];
 for (const key in stylerVars) {
@@ -29,6 +30,7 @@ export class StylerSet {
 
     properties = {
         stylerLayout,
+        stylerElement,
         stylerColorSets,
         stylerDisplay,
         stylerFlexDirection,

package/src/site-editor/styler/properties/color-sets/stylerColorSets.ts

@@ -16,6 +16,20 @@ export const stylerColorSets =  StylerProperty.create( "styler-colors", {
             background-color: ${stylerVars.primarySurface};
             color: ${stylerVars.primarySurfaceText};
         }
+
+        & [styler-element=image-link] {
+            background: ${stylerVars.primaryButtonBackground};
+            color: ${stylerVars.primaryButtonText};
+        }
+
+        & [styler-element=link-button] {
+            background: ${stylerVars.primaryButtonBackground};
+            color: ${stylerVars.primaryButtonText};
+        }
+        & [styler-element=link-icon-button] {
+            background: ${stylerVars.primaryButtonBackground};
+            color: ${stylerVars.primaryButtonText};
+        }
     `,
 
     "secondary": styled.css `
@@ -31,6 +45,20 @@ export const stylerColorSets =  StylerProperty.create( "styler-colors", {
             background-color: ${stylerVars.secondarySurface};
             color: ${stylerVars.secondarySurfaceText};
         }
+
+        & [styler-element=image-link] {
+            background: ${stylerVars.secondaryButtonBackground};
+            color: ${stylerVars.secondaryButtonText};
+        }
+
+        & [styler-element=link-button] {
+            background: ${stylerVars.secondaryButtonBackground};
+            color: ${stylerVars.secondaryButtonText};
+        }
+        & [styler-element=link-icon-button] {
+            background: ${stylerVars.secondaryButtonBackground};
+            color: ${stylerVars.secondaryButtonText};
+        }
     `,
 
     "tertiary": styled.css `
@@ -46,5 +74,18 @@ export const stylerColorSets =  StylerProperty.create( "styler-colors", {
             background-color: ${stylerVars.tertiarySurface};
             color: ${stylerVars.tertiarySurfaceText};
         }
+        & [styler-element=image-link] {
+            background: ${stylerVars.tertiaryButtonBackground};
+            color: ${stylerVars.tertiaryButtonText};
+        }
+
+        & [styler-element=link-button] {
+            background: ${stylerVars.tertiaryButtonBackground};
+            color: ${stylerVars.tertiaryButtonText};
+        }
+        & [styler-element=link-icon-button] {
+            background: ${stylerVars.tertiaryButtonBackground};
+            color: ${stylerVars.tertiaryButtonText};
+        }
     `
 });

package/src/site-editor/styler/properties/elements/elementImageLink.ts

@@ -0,0 +1,14 @@
+import styled from "@web-atoms/core/dist/style/styled";
+
+export const elementImageLink: any = {
+        "image-link": styled.css `
+            border: solid 1px transparent;
+            outline: none;
+            text-decoration: none;
+            display: flex;
+            &:hover {
+                border-color: green;
+                text-decoration: underline;
+            }
+        `,
+};

package/src/site-editor/styler/properties/elements/elementLinkButton.ts

@@ -0,0 +1,21 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../Styler";
+
+export const elementLinkButton: any = {
+    "link-button": styled.css `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: ${stylerVars.sizeDefault};
+        padding-top: ${stylerVars.sizeTiny};
+        padding-bottom: ${stylerVars.sizeTiny};
+        padding-left: ${stylerVars.sizeLarge};
+        padding-right: ${stylerVars.sizeLarge};
+        background: ${stylerVars.buttonBackground};
+        border: none;
+        color: ${stylerVars.buttonText};
+        &:hover {
+            text-decoration: underline;
+        }
+    `,
+};

package/src/site-editor/styler/properties/elements/elementLinkIconButton.ts

@@ -0,0 +1,21 @@
+import styled from "@web-atoms/core/dist/style/styled";
+import { stylerVars } from "../../Styler";
+
+export const elementLinkIconButton: any = {
+    "link-icon-button": styled.css `
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: ${stylerVars.sizeDefault};
+        padding-top: ${stylerVars.sizeTiny};
+        padding-bottom: ${stylerVars.sizeTiny};
+        padding-left: ${stylerVars.sizeLarge};
+        padding-right: ${stylerVars.sizeLarge};
+        background: ${stylerVars.buttonBackground};
+        color: ${stylerVars.buttonText};
+        border: none;
+        &:hover {
+            text-decoration: underline;
+        }
+    `,
+};

package/src/site-editor/styler/properties/elements/elements.ts

@@ -0,0 +1,10 @@
+import { StylerProperty } from "../../Styler";
+import { elementImageLink } from "./elementImageLink";
+import { elementLinkButton } from "./elementLinkButton";
+import { elementLinkIconButton } from "./elementLinkIconButton";
+
+export const stylerElement = StylerProperty.create( "styler-element", {
+    ... elementImageLink,
+    ... elementLinkButton,
+    ... elementLinkIconButton
+});

package/src/site-editor/styler/properties/layouts/blocks/layoutImageBox.ts

@@ -48,4 +48,44 @@ export const layoutImageBox: any = {
             content: "Container";
         }
     `,
+
+    "vertical-image-box": styled.css `
+        display: flex;
+        flex-direction: column;
+        gap: ${stylerVars.sizeDefault};
+        padding: ${stylerVars.sizeDefault};
+        margin: ${stylerVars.sizeDefault};
+        border-radius: ${stylerVars.sizeDefault};
+        justify-items: center;
+        align-items: stretch;
+        contain: content;
+
+        & > img {
+            align-self: center;
+        }
+
+        & > * {
+            padding: ${stylerVars.sizeDefault};
+            flex: 1 1 100%;
+        }
+
+        & > *:empty:before {
+            background-color: #ddd;
+            color: #000;
+            font-size: 16px;
+            font-weight: bold;
+            font-family: 'Courier New', Courier, monospace;
+            height: 100%;
+            display: flex;
+            justify-items: center;
+            align-items: center;
+            min-height: 30px;
+            opacity: 0.3;
+            border-radius: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            content: "Container";
+        }
+        `,
 };