craftcms · gcamacho079 · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023 · Mar 10, 2023
diff --git a/src/templates/_includes/revisionmenu.twig b/src/templates/_includes/revisionmenu.twig
diff --git a/src/translations/en/app.php b/src/translations/en/app.php
@@ -694,6 +694,7 @@
     'Global sets' => 'Global sets',
     'Global' => 'Global',
     'Globals' => 'Globals',
+    'Go' => 'Go',
     'Go to Craft CMS' => 'Go to Craft CMS',
     'Go to Updates' => 'Go to Updates',
     'Got it' => 'Got it',
@@ -1401,6 +1402,7 @@
     'Suspend' => 'Suspend',
     'Suspended' => 'Suspended',
     'Switch' => 'Switch',
+    'Switch version' => 'Switch version',
     'Switching sites will lose unsaved changes. Are you sure you want to switch sites?' => 'Switching sites will lose unsaved changes. Are you sure you want to switch sites?',
     'System Email Address' => 'System Email Address',
     'System Messages' => 'System Messages',
@@ -1904,6 +1906,7 @@
     'path/to/subfolder' => 'path/to/subfolder',
     'revision' => 'revision',
     'revisions' => 'revisions',
+    'Revisions' => 'Revisions',
     'second' => 'second',
     'seconds' => 'seconds',
     'seven' => 'seven',

diff --git a/src/web/assets/cp/dist/cp.js b/src/web/assets/cp/dist/cp.js
diff --git a/src/web/assets/cp/dist/cp.js.map b/src/web/assets/cp/dist/cp.js.map
diff --git a/src/web/assets/cp/dist/css/cp.css b/src/web/assets/cp/dist/css/cp.css
diff --git a/src/web/assets/cp/dist/css/cp.css.map b/src/web/assets/cp/dist/css/cp.css.map
diff --git a/src/web/assets/cp/src/css/_main.scss b/src/web/assets/cp/src/css/_main.scss
@@ -467,6 +467,61 @@ button {
   background-color: transparentize($grey200, 0.5) !important;
 }
 
+.context-btn {
+  @include margin-left(var(--s));
+}
+
+.context-indicator {
+  --border-color: var(--gray-700);
+  display: flex;
+  border: 1px solid var(--border-color);
+  border-radius: var(--large-border-radius);
+  min-height: var(--ui-control-height);
+
+  .context-block {
+    display: flex;
+  }
+
+  .context-block__name,
+  .context-block__value {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .context-block__name {
+    background-color: var(--border-color);
+    color: var(--white);
+    width: 2rem;
+
+    [data-icon] {
+      display: flex;
+    }
+  }
+
+  .context-block__value {
+    padding: 0 0.3rem;
+  }
+}
+
+.revision-menu__form {
+  display: grid;
+  gap: var(--s);
+}
+
+.revision-menu__field {
+  position: relative;
+}
+
+.revision-menu__field-inner {
+  display: grid;
+  gap: var(--s);
+
+  select {
+    width: 100%;
+  }
+}
+
 /* status icons */
 .checkmark-icon,
 .alert-icon {
@@ -504,48 +559,15 @@ button {
 }
 
 .menu.revision-menu {
-  padding: 10px 24px;
+  padding: 18px 24px 20px;
 
-  hr {
-    margin: 10px -24px;
+  label {
+    font-weight: var(--font-weight-bold);
+    color: var(--medium-dark-text-color);
   }
 
-  ul {
-    li {
-      &.sel {
-        margin: 0 -14px;
-        padding: 0 14px;
-        background: var(--gray-050);
-        border-radius: var(--large-border-radius);
-
-        .edited-desc {
-          display: flex;
-          align-items: center;
-          @include margin-left(10px);
-          border-top: 1px solid var(--hairline-color);
-          padding: 10px 0;
-          color: var(--light-text-color);
-          white-space: normal;
-
-          p {
-            margin: 0;
-          }
-
-          .btn {
-            @include margin-left(14px);
-          }
-        }
-      }
-
-      a {
-        padding-top: 7px;
-        border-radius: var(--large-border-radius);
-      }
-    }
-  }
-
-  .extralight {
-    margin-top: 2px;
+  .submit {
+    margin-top: var(--s);
   }
 }
 

diff --git a/src/web/assets/cp/src/js/CP.js b/src/web/assets/cp/src/js/CP.js
@@ -15,6 +15,8 @@ Craft.CP = Garnish.Base.extend(
     $globalContainer: null,
     $mainContainer: null,
     $alerts: null,
+    $contextMenu: null,
+    $contextSubmit: null,
     $crumbs: null,
     $breadcrumbList: null,
     $breadcrumbItems: null,
@@ -30,6 +32,8 @@ Craft.CP = Garnish.Base.extend(
     $sidebar: null,
     $contentContainer: null,
     $edition: null,
+    $revisionBtn: null,
+    $revisionContainer: null,
 
     $confirmUnloadForms: null,
     $deltaForms: null,
@@ -89,6 +93,7 @@ Craft.CP = Garnish.Base.extend(
       this.$sidebar = $('#sidebar');
       this.$contentContainer = $('#content-container');
       this.$collapsibleTables = $('table.collapsible');
+      this.$revisionBtn = this.$mainContainer.find('.context-btn');
 
       this.isMobile = Garnish.isMobileBrowser();
 
@@ -134,6 +139,11 @@ Craft.CP = Garnish.Base.extend(
         // Wait a frame before initializing any confirm-unload forms,
         // so other JS that runs on ready() has a chance to initialize
         Garnish.requestAnimationFrame(this.initSpecialForms.bind(this));
+
+        // Revision Menu
+        if (this.$revisionBtn.length) {
+          this.initContextMenu();
+        }
       });
 
       // Alerts
@@ -555,6 +565,84 @@ Craft.CP = Garnish.Base.extend(
       Garnish.$bod.toggleClass('showing-sidebar');
     },
 
+    updateRevisionForm: function (url) {
+      const revisionFieldSelector = '#revision-field';
+      const loadParam = `${url} #revision-field-inner`;
+      const $allRevisionsLink = this.$contextMenu.find('#revision-link');
+      const $revisionField = this.$contextMenu.find('#revision-field');
+      const $revisionFieldInner = this.$contextMenu.find(
+        '#revision-field-inner'
+      );
+      const $loadingSpinner = $revisionField.find('.spinner');
+      const $revisionSelect = $revisionField.find('#revision-select');
+      const $liveRegion = this.$contextMenu.find('[role="status"]');
+
+      // Activate loading visual
+      $revisionFieldInner.addClass('disabled');
+      $loadingSpinner.removeClass('hidden');
+
+      // Disable current field and submit btn
+      $revisionSelect.attr('aria-disabled', 'true');
+      this.$contextSubmit.attr('aria-disabled', 'true').addClass('disabled');
+
+      // Disable revision link
+      $allRevisionsLink.removeAttr('href').attr({
+        role: 'link',
+        'aria-disabled': true,
+      });
+
+      // Update screen reader message
+      $liveRegion.text(Craft.t('app', 'Loading'));
+
+      $(revisionFieldSelector).load(loadParam, () => {
+        // Check to see if focus was on select element
+        if (Garnish.getFocusedElement().length === 0) {
+          // Refocus newly added select
+          this.$contextMenu.find('#revision-select').trigger('focus');
+        }
+
+        this.$contextSubmit
+          .attr('aria-disabled', 'false')
+          .removeClass('disabled');
+        $revisionFieldInner.removeClass('disabled');
+        $revisionField.append(
+          '<div class="spinner spinner-absolute hidden" aria-hidden="true"></div>'
+        );
+        $liveRegion.text(Craft.t('app', 'Success'));
+        setTimeout(() => {
+          $liveRegion.empty();
+        }, 3000);
+      });
+    },
+
+    initContextMenu: function () {
+      this.$contextMenu = this.$revisionBtn.data('trigger').$container;
+      this.$contextSubmit = this.$contextMenu.find('.revision-menu__submit');
+      const $siteSelect = this.$contextMenu.find('#site-select');
+
+      // If all optgroups are hidden in site select, hide the field
+      const hideSiteSelect =
+        $siteSelect.find('optgroup:not(.hidden)').length === 0;
+
+      if (hideSiteSelect) {
+        $siteSelect.closest('.revision-menu__field').addClass('hidden');
+      }
+
+      this.addListener($siteSelect, 'change', (event) => {
+        const $selected = $siteSelect.find(':selected');
+        this.updateRevisionForm($selected.data('href'));
+      });
+
+      this.addListener(this.$contextSubmit, 'click', (event) => {
+        if ($(event.target).attr('aria-disabled') === 'true') return;
+
+        const $form = $(event.target).closest('.revision-menu__form');
+        const $selected = $form.find('#revision-select :selected');
+        const url = $selected.data('href');
+        window.location.href = url;
+      });
+    },
+
     initTabs: function () {
       if (this.tabManager) {
         this.tabManager.destroy();

diff --git a/src/web/assets/pluginstore/dist/css/app.css b/src/web/assets/pluginstore/dist/css/app.css
diff --git a/src/web/assets/pluginstore/dist/css/app.css.map b/src/web/assets/pluginstore/dist/css/app.css.map
diff --git a/src/web/assets/pluginstore/dist/js/app.js b/src/web/assets/pluginstore/dist/js/app.js
diff --git a/src/web/assets/pluginstore/dist/js/app.js.map b/src/web/assets/pluginstore/dist/js/app.js.map