[IMP] website: add quick move buttons for sections and columns

This commit adds buttons to move sections up or down and to move columns
left or right, which is more user-friendly than drag-and-drop in some
cases.

Part of https://github.com/odoo/odoo/pull/38959
maintask-2066614
task-2088265

addons/website/static/src/js/editor/snippets.options.js

@@ -1848,4 +1848,37 @@ options.registry.SectionStretch = options.Class.extend({
         this.$el.find('[data-toggle-container-fluid]').toggleClass('active', isFluid);
     },
 });
+
+/**
+ * Allows snippets to be moved before the preceding element or after the following.
+ */
+options.registry.SnippetMove = options.Class.extend({
+
+    /**
+     * @override
+     */
+    isTopOption: function () {
+        return true;
+    },
+
+    //--------------------------------------------------------------------------
+    // Options
+    //--------------------------------------------------------------------------
+
+    /**
+     * Moves the snippet around.
+     *
+     * @see this.selectClass for parameters
+     */
+    moveSnippet: function (previewMode, value, $opt) {
+        switch (value) {
+            case 'prev':
+                this.$target.prev().before(this.$target);
+                break;
+            case 'next':
+                this.$target.next().after(this.$target);
+                break;
+        }
+    },
+});
 });

addons/website/views/snippets.xml

@@ -1220,6 +1220,18 @@
         </we-select>
     </div>
 
+    <!-- Move snippets around -->
+    <div data-js="SnippetMove"
+         data-selector="section">
+        <we-button class="fa fa-fw fa-angle-up" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fa fa-fw fa-angle-down" data-move-snippet="next" data-no-preview="true"/>
+    </div>
+    <div data-js="SnippetMove"
+         data-selector=".row:not(.s_col_no_resize) > div">
+        <we-button class="fa fa-fw fa-angle-left" data-move-snippet="prev" data-no-preview="true"/>
+        <we-button class="fa fa-fw fa-angle-right" data-move-snippet="next" data-no-preview="true"/>
+    </div>
+
     <!--  V-ALIGN -->
     <div id="row_valign_snippet_option" data-selector=".s_text_image, .s_image_text, .s_three_columns" data-target=".row">
         <we-select string="Alignment">