Merge pull request #7 from alexander-nitsche/task-adapt-button-size

TASK: Support large button labels
code-q-web-factory · May 22, 2023 · d9db327 · d9db327
2 parents 961cdb4 + f44b85c
commit d9db327
Show file tree

Hide file tree

Showing 10 changed files with 129 additions and 114 deletions.
diff --git a/Configuration/Settings.yaml b/Configuration/Settings.yaml
@@ -27,6 +27,9 @@ Neos:
         CodeQ.JumpMarkers/Views: 'resource://CodeQ.JumpMarkers/Public/JavaScript/Inspector/Views'
     Ui:
       resources:
+        stylesheets:
+          'CodeQ.JumpMarkers:AnchorView':
+            resource: resource://CodeQ.JumpMarkers/Public/JavaScript/AnchorView/Plugin.css
         javascript:
           'CodeQ.JumpMarkers:AnchorView':
             resource: resource://CodeQ.JumpMarkers/Public/JavaScript/AnchorView/Plugin.js
diff --git a/Resources/Private/JavaScript/AnchorView/src/AnchorView.js b/Resources/Private/JavaScript/AnchorView/src/AnchorView.js
@@ -1,21 +1,30 @@
 import React, {Component} from 'react';
 import PropTypes from 'prop-types';
 import {Button} from '@neos-project/react-ui-components';
+import {Icon} from '@neos-project/react-ui-components';
 import {connect} from 'react-redux';
+import {neos} from '@neos-project/neos-ui-decorators';
 import {selectors} from '@neos-project/neos-ui-redux-store';
 import I18n from '@neos-project/neos-ui-i18n';
 import {$get} from 'plow-js';
+import style from './style.css';
 
 @connect(state => ({
     documentNode: selectors.CR.Nodes.documentNodeSelector(state),
     focusedNode: selectors.CR.Nodes.focusedSelector(state),
     transientSectionId: $get('sectionId.value', selectors.UI.Inspector.transientValues(state))
 }))
+@neos(globalRegistry => ({
+	i18nRegistry: globalRegistry.get('i18n')
+}))
+
 export default class AnchorView extends Component {
     static propTypes = {
         focusedNode: PropTypes.object,
         documentNode: PropTypes.object,
-        transientSectionId: PropTypes.string
+        transientSectionId: PropTypes.string,
+
+		i18nRegistry: PropTypes.object.isRequired
     };
 
     state = {
@@ -60,60 +69,43 @@ export default class AnchorView extends Component {
 	};
 
 	getIcon = (state) => {
-		return (
-			<div style={{
-				display: 'inline-block',
-				width: '16px',
-				height: '16px',
-				fill: 'white',
-				marginLeft: '8px',
-				verticalAlign: 'sub'
-			}}>
-				{state === 'default' ?
-					<svg viewBox="0 0 896 1024" width="100%" xmlns="http://www.w3.org/2000/svg">
-						<path
-							d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z"/>
-					</svg>
-					: ''}
-				{state === 'loading' ?
-					<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="spinner" role="img"
-						 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
-						 className="svg-inline--fa fa-spinner fa-w-16 fa-spin fa-lg">
-						<path fill="currentColor"
-							  d="M304 48c0 26.51-21.49 48-48 48s-48-21.49-48-48 21.49-48 48-48 48 21.49 48 48zm-48 368c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zm208-208c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.49-48-48-48zM96 256c0-26.51-21.49-48-48-48S0 229.49 0 256s21.49 48 48 48 48-21.49 48-48zm12.922 99.078c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.491-48-48-48zm294.156 0c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48c0-26.509-21.49-48-48-48zM108.922 60.922c-26.51 0-48 21.49-48 48s21.49 48 48 48 48-21.49 48-48-21.491-48-48-48z"/>
-					</svg>
-					: ''}
-				{state === 'copied' ?
-					<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="clipboard-check"
-						 className="svg-inline--fa fa-clipboard-check fa-w-12" role="img"
-						 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512">
-						<path fill="currentColor"
-							  d="M336 64h-80c0-35.3-28.7-64-64-64s-64 28.7-64 64H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h288c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zM192 40c13.3 0 24 10.7 24 24s-10.7 24-24 24-24-10.7-24-24 10.7-24 24-24zm121.2 231.8l-143 141.8c-4.7 4.7-12.3 4.6-17-.1l-82.6-83.3c-4.7-4.7-4.6-12.3.1-17L99.1 285c4.7-4.7 12.3-4.6 17 .1l46 46.4 106-105.2c4.7-4.7 12.3-4.6 17 .1l28.2 28.4c4.7 4.8 4.6 12.3-.1 17z"/>
-					</svg>
-					: ''}
-			</div>
-		);
+		if (state === 'default') {
+			return <Icon icon="copy" size="" fixedWidth padded="right" />
+		} else if (state === 'loading') {
+			return <Icon icon="spinner" size="" fixedWidth padded="right" spin />
+		} else if (state === 'copied') {
+			return <Icon icon="clipboard-check" size="" fixedWidth padded="right" />
+		}
 	};
 
     render() {
+		const {i18nRegistry} = this.props;
+
         return this.getSectionId() && (
-        	<div style={{
-				display: 'flex',
-				justifyContent: 'space-between'
-			}}>
-				<Button style="brand" onClick={this.copyNeosLinkToClipboard}>
+        	<div className={style.flexAuto}>
+				<Button
+					style="brand"
+					onClick={this.copyNeosLinkToClipboard}
+					title={i18nRegistry.translate(
+						'CodeQ.JumpMarkers:NodeTypes.Mixin.SectionConfiguration:properties.sectionId.copy-neos-link.tooltip',
+					)}
+					>
+					{this.getIcon(this.state.copyNeosLinkState)}
 					<I18n
-						id={`CodeQ.JumpMarkers:NodeTypes.Mixin.SectionConfiguration:properties.sectionId.copy-neos-link`}
-						fallback="Copy Neos link"
+						id="CodeQ.JumpMarkers:NodeTypes.Mixin.SectionConfiguration:properties.sectionId.copy-neos-link.label"
 					/>
-					{this.getIcon(this.state.copyNeosLinkState)}
 				</Button>
-				<Button style="brand" onClick={this.copyUriToClipboard}>
+				<Button
+					style="brand"
+					onClick={this.copyUriToClipboard}
+					title={i18nRegistry.translate(
+						'CodeQ.JumpMarkers:NodeTypes.Mixin.SectionConfiguration:properties.sectionId.copy-uri.tooltip'
+					)}
+					>
+					{this.getIcon(this.state.copyUriState)}
 					<I18n
-						id={`CodeQ.JumpMarkers:NodeTypes.Mixin.SectionConfiguration:properties.sectionId.copy-uri`}
-						fallback="Copy link"
+						id="CodeQ.JumpMarkers:NodeTypes.Mixin.SectionConfiguration:properties.sectionId.copy-uri.label"
 					/>
-					{this.getIcon(this.state.copyUriState)}
 				</Button>
 			</div>
         );

diff --git a/Resources/Private/JavaScript/AnchorView/src/style.css b/Resources/Private/JavaScript/AnchorView/src/style.css
@@ -1,3 +1,10 @@
 .syncButton {
     outline: none !important;
 }
+.flexAuto {
+	display: flex;
+	gap: 0px 8px;
+}
+.flexAuto > * {
+	flex: auto;
+}
diff --git a/Resources/Private/Translations/de/NodeTypes/Mixin/SectionConfiguration.xlf b/Resources/Private/Translations/de/NodeTypes/Mixin/SectionConfiguration.xlf
@@ -22,14 +22,22 @@
 				<source>Enter here an URL fragment of the type lowercase-with-hyphens (without special characters). After you click Save, a button for copying the link appears below it. This link can be pasted in the text editor or in fields of the Inspector and will lead directly to the section.</source>
 				<target>Gib hier ein URL-Fragment in der Form kleinbuchstaben-mit-bindestrichen (ohne Sonderzeichen) ein. Nachdem Du auf Speichern geklickt hast, erscheint darunter eine Schaltfläche zum Kopieren des Links. Dieser Link kann in den Texteditor oder in Felder des Inspektors eingefügt werden und führt direkt zu dem Abschnitt.</target>
 			</trans-unit>
-            <trans-unit id="properties.sectionId.copy-neos-link" xml:space="preserve">
-				<source>Copy Neos link</source>
-                <target>Kopiere Neos-Link</target>
-			</trans-unit>
-            <trans-unit id="properties.sectionId.copy-uri" xml:space="preserve">
-				<source>Copy link</source>
-                <target>Kopiere Link</target>
-			</trans-unit>
+            <trans-unit id="properties.sectionId.copy-neos-link.label" xml:space="preserve">
+                <source>Neos link</source>
+                <target>Neos-Link</target>
+            </trans-unit>
+            <trans-unit id="properties.sectionId.copy-neos-link.tooltip" xml:space="preserve">
+                <source>Copy the link to the section as Neos URI (node://).</source>
+                <target>Kopieren Sie den Link zu dem Abschnitt als Neos URI (node://).</target>
+            </trans-unit>
+            <trans-unit id="properties.sectionId.copy-uri.label" xml:space="preserve">
+                <source>Link</source>
+                <target>Link</target>
+            </trans-unit>
+            <trans-unit id="properties.sectionId.copy-uri.tooltip" xml:space="preserve">
+                <source>Copy the link to the section as an absolute URI (https://).</source>
+                <target>Kopieren Sie den Link zum Abschnitt als absolute URI (https://).</target>
+            </trans-unit>
             <trans-unit id="syncSectionId" xml:space="preserve">
 				<source>Synchronize the URL fragment with the title.</source>
 				<target>URL-Fragment mit dem Titel synchronisieren.</target>

diff --git a/Resources/Private/Translations/en/NodeTypes/Mixin/SectionConfiguration.xlf b/Resources/Private/Translations/en/NodeTypes/Mixin/SectionConfiguration.xlf
@@ -17,12 +17,18 @@
 			<trans-unit id="properties.sectionId.ui.help.message" xml:space="preserve">
 				<source>Enter here an URL fragment of the type lowercase-with-hyphens (without special characters). After you click Save, a button for copying the link appears below it. This link can be pasted in the text editor or in fields of the Inspector and will lead directly to the section.</source>
 			</trans-unit>
-            <trans-unit id="properties.sectionId.copy-neos-link" xml:space="preserve">
-				<source>Copy Neos link</source>
-			</trans-unit>
-            <trans-unit id="properties.sectionId.copy-uri" xml:space="preserve">
-				<source>Copy link</source>
-			</trans-unit>
+            <trans-unit id="properties.sectionId.copy-neos-link.label" xml:space="preserve">
+				<source>Neos link</source>
+			</trans-unit>
+			<trans-unit id="properties.sectionId.copy-neos-link.tooltip" xml:space="preserve">
+                <source>Copy the link to the section as Neos URI (node://).</source>
+            </trans-unit>
+            <trans-unit id="properties.sectionId.copy-uri.label" xml:space="preserve">
+				<source>Link</source>
+			</trans-unit>
+			<trans-unit id="properties.sectionId.copy-uri.tooltip" xml:space="preserve">
+                <source>Copy the link to the section as an absolute URI (https://).</source>
+            </trans-unit>
             <trans-unit id="syncSectionId" xml:space="preserve">
 				<source>Synchronize the URL fragment with the title.</source>
 			</trans-unit>

diff --git a/Resources/Public/JavaScript/AnchorView/Plugin.css b/Resources/Public/JavaScript/AnchorView/Plugin.css
diff --git a/Resources/Public/JavaScript/AnchorView/Plugin.css.map b/Resources/Public/JavaScript/AnchorView/Plugin.css.map
diff --git a/Resources/Public/JavaScript/AnchorView/Plugin.js b/Resources/Public/JavaScript/AnchorView/Plugin.js
diff --git a/Resources/Public/JavaScript/AnchorView/Plugin.js.map b/Resources/Public/JavaScript/AnchorView/Plugin.js.map
diff --git a/editor-demo.png b/editor-demo.png