Implement paragraph aligning buttons

Fixes #123
liferay · Mar 17, 2015 · 04a0dca · duracell80 · Dec 4, 2018 · julien
1 parent b8248fe
commit 04a0dca
Show file tree

Hide file tree

Showing 6 changed files with 222 additions and 10 deletions.
diff --git a/...nents/buttons/button-align-image-left.jsx → ...nents/buttons/button-image-align-left.jsx b/...nents/buttons/button-align-image-left.jsx → ...nents/buttons/button-image-align-left.jsx
@@ -2,11 +2,11 @@
     'use strict';
 
     /**
-     * The ButtonAlignImageLeft class provides functionality for aligning an image on left.
+     * The ButtonImageAlignLeft class provides functionality for aligning an image on left.
      *
-     * @class ButtonAlignImageLeft
+     * @class ButtonImageAlignLeft
      */
-    var ButtonAlignImageLeft = React.createClass({
+    var ButtonImageAlignLeft = React.createClass({
         mixins: [global.ButtonStyle, global.ButtonStateClasses, global.ButtonActionStyle],
 
         /**
@@ -42,12 +42,12 @@
             var cssClass = 'alloy-editor-button ' + this.getStateClasses();
 
             return (
-                <button className={cssClass} data-type="button-align-left" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
+                <button className={cssClass} data-type="button-image-align-left" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
                     <span className="alloy-editor-icon-align-left"></span>
                 </button>
             );
         }
     });
 
-    global.AlloyEditor.Buttons[ButtonAlignImageLeft.key] = global.AlloyEditor.ButtonAlignImageLeft = ButtonAlignImageLeft;
+    global.AlloyEditor.Buttons[ButtonImageAlignLeft.key] = global.AlloyEditor.ButtonImageAlignLeft = ButtonImageAlignLeft;
 }());
diff --git a/...ents/buttons/button-align-image-right.jsx → ...ents/buttons/button-image-align-right.jsx b/...ents/buttons/button-align-image-right.jsx → ...ents/buttons/button-image-align-right.jsx
@@ -2,11 +2,11 @@
     'use strict';
 
     /**
-     * The ButtonAlignImageRight class provides functionality for aligning an image on right.
+     * The ButtonImageAlignRight class provides functionality for aligning an image on right.
      *
-     * @class ButtonAlignImageRight
+     * @class ButtonImageAlignRight
      */
-    var ButtonAlignImageRight = React.createClass({
+    var ButtonImageAlignRight = React.createClass({
         mixins: [global.ButtonStyle, global.ButtonStateClasses, global.ButtonActionStyle],
 
         /**
@@ -42,12 +42,12 @@
             var cssClass = 'alloy-editor-button ' + this.getStateClasses();
 
             return (
-                <button className={cssClass} data-type="button-align-right" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
+                <button className={cssClass} data-type="button-image-align-right" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
                     <span className="alloy-editor-icon-align-right"></span>
                 </button>
             );
         }
     });
 
-    global.AlloyEditor.Buttons[ButtonAlignImageRight.key] = global.AlloyEditor.ButtonAlignImageRight = ButtonAlignImageRight;
+    global.AlloyEditor.Buttons[ButtonImageAlignRight.key] = global.AlloyEditor.ButtonImageAlignRight = ButtonImageAlignRight;
 }());
diff --git a/src/ui/react/src/components/buttons/button-paragraph-align-left.jsx b/src/ui/react/src/components/buttons/button-paragraph-align-left.jsx
@@ -0,0 +1,53 @@
+(function () {
+    'use strict';
+
+    /**
+     * The ButtonParagraphAlignLeft class provides functionality for aligning a paragraph on left.
+     *
+     * @class ButtonParagraphAlignLeft
+     */
+    var ButtonParagraphAlignLeft = React.createClass({
+        mixins: [global.ButtonStyle, global.ButtonStateClasses, global.ButtonActionStyle],
+
+        /**
+         * Lifecycle. Provides static properties to the widget.
+         * - key: The name which will be used as an alias of the button in the configuration.
+         */
+        statics: {
+            key: 'paragraphLeft'
+        },
+
+        /**
+         * Lifecycle. Returns the default values of the properties used in the widget.
+         *
+         * @return {Object} The default properties.
+         */
+        getDefaultProps: function() {
+            return {
+                style: {
+                    element: 'p',
+                    styles: {
+                        float: 'left'
+                    }
+                }
+            };
+        },
+
+        /**
+         * Lifecycle. Renders the UI of the button.
+         *
+         * @return {Object} The content which should be rendered.
+         */
+        render: function() {
+            var cssClass = 'alloy-editor-button ' + this.getStateClasses();
+
+            return (
+                <button className={cssClass} data-type="button-paragraph-align-left" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
+                    <span className="alloy-editor-icon-align-left"></span>
+                </button>
+            );
+        }
+    });
+
+    global.AlloyEditor.Buttons[ButtonParagraphAlignLeft.key] = global.AlloyEditor.ButtonParagraphAlignLeft = ButtonParagraphAlignLeft;
+}());
diff --git a/src/ui/react/src/components/buttons/button-paragraph-align-right.jsx b/src/ui/react/src/components/buttons/button-paragraph-align-right.jsx
@@ -0,0 +1,53 @@
+(function () {
+    'use strict';
+
+    /**
+     * The ButtonParagraphAlignRight class provides functionality for aligning a paragraph on right.
+     *
+     * @class ButtonParagraphAlignRight
+     */
+    var ButtonParagraphAlignRight = React.createClass({
+        mixins: [global.ButtonStyle, global.ButtonStateClasses, global.ButtonActionStyle],
+
+        /**
+         * Lifecycle. Provides static properties to the widget.
+         * - key: The name which will be used as an alias of the button in the configuration.
+         */
+        statics: {
+            key: 'paragraphRight'
+        },
+
+        /**
+         * Lifecycle. Returns the default values of the properties used in the widget.
+         *
+         * @return {Object} The default properties.
+         */
+        getDefaultProps: function() {
+            return {
+                style: {
+                    element: 'p',
+                    styles: {
+                        float: 'right'
+                    }
+                }
+            };
+        },
+
+        /**
+         * Lifecycle. Renders the UI of the button.
+         *
+         * @return {Object} The content which should be rendered.
+         */
+        render: function() {
+            var cssClass = 'alloy-editor-button ' + this.getStateClasses();
+
+            return (
+                <button className={cssClass} data-type="button-paragraph-align-right" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
+                    <span className="alloy-editor-icon-align-right"></span>
+                </button>
+            );
+        }
+    });
+
+    global.AlloyEditor.Buttons[ButtonParagraphAlignRight.key] = global.AlloyEditor.ButtonParagraphAlignRight = ButtonParagraphAlignRight;
+}());
diff --git a/src/ui/react/src/components/buttons/button-paragraph-center.jsx b/src/ui/react/src/components/buttons/button-paragraph-center.jsx
@@ -0,0 +1,53 @@
+(function () {
+    'use strict';
+
+    /**
+     * The ButtonParagraphCenter class provides functionality for centering a paragraph.
+     *
+     * @class ButtonParagraphCenter
+     */
+    var ButtonParagraphCenter = React.createClass({
+        mixins: [global.ButtonStyle, global.ButtonStateClasses, global.ButtonActionStyle],
+
+        /**
+         * Lifecycle. Provides static properties to the widget.
+         * - key: The name which will be used as an alias of the button in the configuration.
+         */
+        statics: {
+            key: 'paragraphCenter'
+        },
+
+        /**
+         * Lifecycle. Returns the default values of the properties used in the widget.
+         *
+         * @return {Object} The default properties.
+         */
+        getDefaultProps: function() {
+            return {
+                style: {
+                    element: 'p',
+                    styles: {
+                        'text-align': 'center'
+                    }
+                }
+            };
+        },
+
+        /**
+         * Lifecycle. Renders the UI of the button.
+         *
+         * @return {Object} The content which should be rendered.
+         */
+        render: function() {
+            var cssClass = 'alloy-editor-button ' + this.getStateClasses();
+
+            return (
+                <button className={cssClass} data-type="button-paragraph-center" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
+                    <span className="alloy-editor-icon-center"></span>
+                </button>
+            );
+        }
+    });
+
+    global.AlloyEditor.Buttons[ButtonParagraphCenter.key] = global.AlloyEditor.ButtonParagraphCenter = ButtonParagraphCenter;
+}());
diff --git a/src/ui/react/src/components/buttons/button-paragraph-justify.jsx b/src/ui/react/src/components/buttons/button-paragraph-justify.jsx
@@ -0,0 +1,53 @@
+(function () {
+    'use strict';
+
+    /**
+     * The ButtonParagraphJustify class provides functionality for justfying a paragraph.
+     *
+     * @class ButtonParagraphJustify
+     */
+    var ButtonParagraphJustify = React.createClass({
+        mixins: [global.ButtonStyle, global.ButtonStateClasses, global.ButtonActionStyle],
+
+        /**
+         * Lifecycle. Provides static properties to the widget.
+         * - key: The name which will be used as an alias of the button in the configuration.
+         */
+        statics: {
+            key: 'paragraphJustify'
+        },
+
+        /**
+         * Lifecycle. Returns the default values of the properties used in the widget.
+         *
+         * @return {Object} The default properties.
+         */
+        getDefaultProps: function() {
+            return {
+                style: {
+                    element: 'p',
+                    styles: {
+                        'text-align': 'justify'
+                    }
+                }
+            };
+        },
+
+        /**
+         * Lifecycle. Renders the UI of the button.
+         *
+         * @return {Object} The content which should be rendered.
+         */
+        render: function() {
+            var cssClass = 'alloy-editor-button ' + this.getStateClasses();
+
+            return (
+                <button className={cssClass} data-type="button-paragraph-justify" onClick={this.handleClick} tabIndex={this.props.tabIndex}>
+                    <span className="alloy-editor-icon-justify"></span>
+                </button>
+            );
+        }
+    });
+
+    global.AlloyEditor.Buttons[ButtonParagraphJustify.key] = global.AlloyEditor.ButtonParagraphJustify = ButtonParagraphJustify;
+}());