Fix action menu for 4.6 - 5.3 (#752)

* working on action menu * fix typo * fix action menu for 4.6-5.3
elan-ev · Aug 5, 2023 · 9210c35 · 9210c35
1 parent 85a2ffb
commit 9210c35
Show file tree

Hide file tree

Showing 3 changed files with 105 additions and 34 deletions.
diff --git a/assets/css/opencast.scss b/assets/css/opencast.scss
@@ -6,6 +6,7 @@ $item-width : 20em;
 $item-height-small: auto;
 $item-width-small : 16em;
 $episode-background: $light-gray-color-20;
+$action-menu-icon-size: 20px;
 
 /* * * * * * * * * * * * * * * * * */
 /* G L O B A L E K L A S S E N */
@@ -465,6 +466,10 @@ h2.oc--loadingbar, .oc--loadingbar-title {
  }
 }
 
+/* * * * * * * * * * * * * * */
+/* A C T I O N M E N U */
+/* * * * * * * * * * * * * * */
+
 .oc--actions-container {
  min-width: 2em;
  border-left: 1px solid $light-gray-color-40;
@@ -475,6 +480,65 @@ h2.oc--loadingbar, .oc--loadingbar-title {
  align-items: center;
 }
 
+.action-menu-icon {
+ background: transparent;
+ border: 0;
+
+ // Create animated icon that changes to close icon on activation/hover
+ span {
+ width: 5px;
+ height: 5px;
+ transform: translate(-2.5px);
+ transition: all .25s ease-in-out;
+
+ display: block;
+ position: absolute;
+ background: $base-color;
+ border-radius: 50%;
+ opacity: 1;
+ left: 50%;
+
+ &:nth-child(1) {
+ top: 0px;
+ }
+
+ &:nth-child(2) {
+ top: 10px;
+ transform: translate(-2.5px, -2.5px);
+ }
+
+ &:nth-child(3) {
+ bottom: 0;
+ }
+ }
+}
+
+.action-menu-wrapper.is-open {
+ z-index: 3;
+ .action-menu-icon {
+ span {
+ border-radius: 0;
+
+ &:nth-child(1) {
+ left: 0;
+ transform: rotate(45deg) translate(5.5px, 5.5px);
+ width: 100%;
+ }
+
+ &:nth-child(2) {
+ opacity: 0;
+ }
+
+ &:nth-child(3) {
+ left: 0;
+ transform: rotate(-45deg) translate(5px, -5px);;
+ width: 100%;
+ }
+ }
+ }
+}
+
+
 /* * * * * * * * * * * * * * * * * * * * * * * * * * */
 /* M U L T I P U R P O S E S E A R C H B A R */
 /* * * * * * * * * * * * * * * * * * * * * * * * * * */

diff --git a/migrations/053_add_default_config_option.php b/migrations/053_add_default_config_option.php
@@ -18,7 +18,7 @@ public function up()
  $stmt->execute([
  'name' => 'OPENCAST_DEFAULT_SERVER',
  'section' => 'opencast',
- 'description' => 'Das ist der standaramäßig verwendete Opencast-Server.',
+ 'description' => 'Das ist der standardmäßig verwendete Opencast-Server.',
  'range' => 'global',
  'type' => 'integer',
  'value' => $config_id

diff --git a/vueapp/components/Studip/StudipActionMenu.vue b/vueapp/components/Studip/StudipActionMenu.vue
@@ -1,18 +1,13 @@
 <template>
  <nav v-if="shouldCollapse" class="action-menu">
- <button v-if="render_button_icon" class="action-menu-icon" :title="$gettext('Aktionen')" aria-expanded="false">
+ <button class="action-menu-icon" :title="title" aria-expanded="false">
  <span></span>
  <span></span>
  <span></span>
  </button>
- <a v-else class="action-menu-icon" :title="$gettext('Aktionen')" aria-expanded="false" :aria-label="$gettext('Aktionsmenü')" href="#">
- <div></div>
- <div></div>
- <div></div>
- </a>
  <div class="action-menu-content">
  <div class="action-menu-title">
- {{ 'Aktionen' }}
+ {{ $gettext('Aktionen') }}
  </div>
  <ul class="action-menu-list">
  <li v-for="item in navigationItems" :key="item.id" class="action-menu-item">
@@ -22,30 +17,45 @@
 
  {{ item.label }}
  </a>
+ <label v-else-if="item.icon" class="undecorated" v-bind="linkAttributes(item)" v-on="linkEvents(item)">
+ <studip-icon :shape="item.icon.shape" :role="item.icon.role" :name="item.name" :title="item.label" v-bind="item.attributes ?? {}"></studip-icon>
+ {{ item.label }}
+ </label>
+ <template v-else>
+ <span class="action-menu-no-icon"></span>
+ <button :name="item.name" v-bind="Object.assign(item.attributes ?? {}, linkAttributes(item))" v-on="linkEvents(item)">
+ {{ item.label }}
+ </button>
+ </template>
  </li>
  </ul>
  </div>
  </nav>
- <nav v-else class="action-menu">
- <ul class="action-menu-list">
- <li v-for="item in navigationItems" :key="item.id" class="action-menu-item">
- <a v-bind="linkAttributes(item)" v-on="linkEvents(item)">
- <studip-icon :title="item.label" :shape="item.icon.shape" :role="item.icon.role" :size="20"></studip-icon>
- </a>
- </li>
- </ul>
+ <nav v-else>
+ <a v-for="item in navigationItems" :key="item.id" v-bind="linkAttributes(item)" v-on="linkEvents(item)">
+ <studip-icon :title="item.label" :shape="item.icon.shape" :role="item.icon.role" :size="20"></studip-icon>
+ </a>
  </nav>
 </template>
 
 <script>
-import StudipIcon from '@studip/StudipIcon.vue';
+import StudipIcon from '@studip/StudipIcon.vue'
+
 export default {
- components: { StudipIcon },
  name: 'studip-action-menu',
+
+ components: {
+ StudipIcon
+ },
+
  props: {
  items: Array,
  collapseAt: {
- default: true,
+ default: null,
+ },
+ context: {
+ type: String,
+ default: ''
  }
  },
  data () {
@@ -71,7 +81,8 @@ export default {
  linkEvents (item) {
  let events = {};
  if (item.emit) {
- events.click = () => {
+ events.click = (e) => {
+ e.preventDefault();
  this.$emit.apply(this, [item.emit].concat(item.emitArguments));
  this.close();
  };
@@ -85,45 +96,41 @@ export default {
  computed: {
  navigationItems () {
  return this.items.map((item) => {
- let classes = item.classes || '';
+ let classes = item.classes ?? '';
  if (item.disabled) {
  classes += " action-menu-item-disabled";
  }
  return {
  label: item.label,
- url: item.url || false,
+ url: item.url || '#',
  emit: item.emit || false,
  emitArguments: item.emitArguments || [],
  icon: item.icon ? {
  shape: item.icon,
  role: item.disabled ? 'inactive' : 'clickable'
  } : false,
  type: item.type || 'link',
+ name: item.name ?? null,
  classes: classes.trim(),
  attributes: item.attributes || {},
  disabled: item.disabled,
  };
  });
  },
  shouldCollapse () {
- if (this.collapseAt === false) {
+ const collapseAt = this.collapseAt ?? this.getStudipConfig('ACTIONMENU_THRESHOLD');
+
+ if (collapseAt === false) {
  return false;
  }
- if (this.collapseAt === true) {
+ if (collapseAt === true) {
  return true;
  }
- return Number.parseInt(this.collapseAt) <= this.items.length;
+ return Number.parseInt(collapseAt) <= this.items.length;
  },
-
- render_button_icon() {
- return (window.OpencastPlugin?.STUDIP_VERSION && window.OpencastPlugin.STUDIP_VERSION >= 5.2) ? true : false;
+ title () {
+ return this.context ? this.$gettextInterpolate(this.$gettext('Aktionsmenü für %{context}'), {context: this.context}) : this.$gettext('Aktionsmenü');
  }
  }
 }
 </script>
-
-<style lang="scss">
-.action-menu-list .action-menu-item a {
- cursor: pointer;
-}
-</style>