Added hidden indicator to title and feature image (#17177)

No ref

ghost/admin/.lint-todo

@@ -593,3 +593,5 @@ remove|ember-template-lint|no-forbidden-elements|152|20|152|20|966511a5bc154d469
 remove|ember-template-lint|require-input-label|28|20|28|20|dc08ecbcb2f3358fe94e7e2b8f24f7ca17bf77b5|1675296000000|1685660400000|1690844400000|app/components/custom-theme-settings/color.hbs
 add|ember-template-lint|require-input-label|33|16|33|16|91baa7e6ceea36e93d45f5dc9ac213cb7f1d8a59|1686700800000|1697068800000|1702256400000|app/components/custom-theme-settings/color.hbs
 add|ember-template-lint|style-concatenation|3|40|3|40|ba5764956a2805ed8d72306fd9a8b8cd10a97119|1686700800000|1697068800000|1702256400000|app/components/custom-theme-settings/color.hbs
+add|ember-template-lint|no-invalid-interactive|3|4|3|4|1fcf990141becf2a97482e17ba7205413916e11d|1688342400000|1698714000000|1703898000000|app/components/gh-editor-feature-image.hbs
+remove|ember-template-lint|no-invalid-interactive|3|4|3|4|6f7786d5ed3e8c09f39e3595839ee291749aeb01|1685664000000|1696032000000|1701219600000|app/components/gh-editor-feature-image.hbs

ghost/admin/app/components/gh-editor-feature-image.hbs

@@ -34,9 +34,15 @@
             {{/each}}
         {{else if @image}}
             {{!-- image is present --}}
-            <span class="gh-editor-feature-image-indicator" data-tooltip="A feature image is publicly visible to anyone">
-                {{svg-jar "feature-image"}}
-            </span>
+            {{#if (and (feature 'pageImprovements') (feature 'lexicalEditor'))}}
+                <span class="gh-editor-hidden-indicator" data-tooltip="Feature image and post title are hidden">
+                    {{svg-jar "eye-closed"}}
+                </span>
+            {{else}}
+                <span class="gh-editor-feature-image-indicator" data-tooltip="A feature image is publicly visible to anyone">
+                    {{svg-jar "feature-image"}}
+                </span>
+            {{/if}}
             <div class="gh-editor-feature-image">
                 <img src={{@image}}>
                 <div class="gh-editor-feature-image-overlay"></div>

ghost/admin/app/components/gh-koenig-editor-lexical.hbs

@@ -17,24 +17,32 @@
             @forceButtonDisplay={{or (not @title) (eq @title "(Untitled)") this.titleIsHovered this.titleIsFocused}}
         />
 
-        <GhTextarea
-            @class="gh-editor-title"
-            @placeholder={{@titlePlaceholder}}
-            @shouldFocus={{or @titleAutofocus false}}
-            @tabindex="1"
-            @autoExpand=".gh-koenig-editor"
-            @value={{readonly this.title}}
-            @input={{this.updateTitle}}
-            @focus-out={{optional @onTitleBlur}}
-            @keyDown={{this.onTitleKeydown}}
-            @didCreateTextarea={{this.registerTitleElement}}
-            {{on "focus" (fn (mut this.titleIsFocused) true)}}
-            {{on "blur" (fn (mut this.titleIsFocused) false)}}
-            {{on "mouseover" (fn (mut this.titleIsHovered) true)}}
-            {{on "mouseleave" (fn (mut this.titleIsHovered) false)}}
-            {{on "paste" this.cleanPastedTitle}}
-            data-test-editor-title-input={{true}}
-        />
+        <div class="gh-editor-title-container {{if (feature "pageImprovements") "page-improvements"}}">
+            {{#if (and (feature 'pageImprovements') (feature 'lexicalEditor'))}}
+                <span class="gh-editor-hidden-indicator" data-tooltip="Feature image and post title are hidden">
+                    {{svg-jar "eye-closed"}}
+                </span>
+            {{/if}}
+
+            <GhTextarea
+                @class="gh-editor-title"
+                @placeholder={{@titlePlaceholder}}
+                @shouldFocus={{or @titleAutofocus false}}
+                @tabindex="1"
+                @autoExpand=".gh-koenig-editor"
+                @value={{readonly this.title}}
+                @input={{this.updateTitle}}
+                @focus-out={{optional @onTitleBlur}}
+                @keyDown={{this.onTitleKeydown}}
+                @didCreateTextarea={{this.registerTitleElement}}
+                {{on "focus" (fn (mut this.titleIsFocused) true)}}
+                {{on "blur" (fn (mut this.titleIsFocused) false)}}
+                {{on "mouseover" (fn (mut this.titleIsHovered) true)}}
+                {{on "mouseleave" (fn (mut this.titleIsHovered) false)}}
+                {{on "paste" this.cleanPastedTitle}}
+                data-test-editor-title-input={{true}}
+            />
+        </div>
 
         <KoenigLexicalEditor
             @lexical={{@body}}

ghost/admin/app/styles/layouts/editor.css

@@ -1188,3 +1188,49 @@ figure {
 .gh-announcement-editor div {
     width: 100%;
 }
+
+/* Labs
+/* ---------------------------------------------------------- */
+
+.gh-editor-title-container.page-improvements {
+    position: relative;
+    max-width: 740px;
+    width: 100%;
+    margin-right: auto;
+    margin-left: auto;
+    border: none;
+    background: transparent;
+}
+
+.gh-editor .page-improvements .gh-editor-title {
+    display: block;
+    width: 100%;
+    max-width: unset;
+    min-height: auto;
+    margin: 0 0 1.2rem;
+    border: none;
+    background: transparent;
+    color: var(--black);
+    font-size: 4.8rem;
+    letter-spacing: -0.017em;
+    line-height: 1.1em;
+    font-weight: 700;
+    overflow: hidden;
+    box-shadow: none;
+}
+
+.gh-editor-hidden-indicator {
+    position: absolute;
+    top: -1px;
+    height: 2.4rem;
+    margin-left: -6rem;
+    color: var(--midgrey-l2);
+}
+
+.gh-editor-title-container .gh-editor-hidden-indicator {
+    top: 1.8rem;
+}
+
+.gh-editor-hidden-indicator svg {
+    height: 2.4rem;
+}

ghost/admin/public/assets/icons/eye-closed.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+    <title>eye-closed</title>
+    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M1.5 8S6 14 12 14s10.5-6 10.5-6M9.576 13.68l-.904 2.882m5.752-2.882.904 2.882M4.922 11.328l-1.816 2.31m15.972-2.31 1.816 2.31"/>
+</svg>