fix: Enhance see more button display in Stories template - EXO-70399 - Meeds-io/meeds#2296

webapp/src/main/webapp/news-list-view/components/settings/NewsSettings.vue

@@ -25,7 +25,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
     <div :class="[showHeader && newsHeader ? 'd-flex flex-column me-2 mt-1' : 'd-flex flex-column me-2']">
       <v-icon
         v-if="canPublishNews && showSettingsIcon"
-        class="button-open-settings"
+        :class="classButtonOpenSettings"
         :aria-label="$t('news.latest.openSettings')"
         size="24"
         icon
@@ -62,6 +62,10 @@ export default {
       required: false,
       default: false
     },
+    classButtonOpenSettings: {
+      type: String,
+      default: 'button-open-settings'
+    }
   },
   data: () => ({
     newsHeader: '',

webapp/src/main/webapp/news-list-view/components/views/NewsStoriesView.vue

@@ -21,10 +21,15 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
         v-for="(item, index) in news"
         :key="index"
         :item="item"
+        :last-item="news.length-1 == index"
         :selected-option="selectedOption" />
       <v-hover v-slot="{ hover }">
-        <div class="card">
-          <news-settings  :hide-see-all-button="true" :is-hovering="hover" />
+       <div
+          v-if="showSeeAll"
+          class="card">
+          <news-settings
+            :hide-see-all-button="true"
+            :is-hovering="hover" />
           <a
               class="see-all-link"
               target="_self"

webapp/src/main/webapp/news-list-view/components/views/NewsStoriesViewItem.vue

@@ -15,56 +15,61 @@ You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
 -->
 <template>
-  <div class="card">
-    <news-settings :hide-open-setting-button="true" />
-    <a
-      class="articleLink"
-      target="_self"
-      :href="articleUrl">
-      <img
-        class="article-img"
-        :src="articleImage"
-        :alt="$t('news.latest.alt.articleImage')">
-      <div class="author-date-container">
+  <v-hover v-slot="{ hover }">
+    <div class="card">
+      <news-settings
+        v-if="!showSeeAll && lastItem && hover"
+        hide-see-all-button
+        class-button-open-settings="settingNewsButton"/>
+      <a
+        class="articleLink"
+        target="_self"
+        :href="articleUrl">
         <img
-          v-if="showArticleAuthor"
-          class="author-photo"
-          :src="item.authorAvatarUrl"
-          :alt="$t('news.avatar.author.alt',{0:item.authorDisplayName})">
-        <div v-if="showArticleDate" class="author-date">
-          <date-format
-            :value="displayDate"
-            :format="dateFormat" />
-        </div>
-      </div>
-    </a>
-    <a
-      class="articleLink"
-      target="_self"
-      :href="articleUrl">
-      <div class="title-container">
-        <div v-if="showArticleTitle" class="article-title">{{ item.title }}</div>
-        <div v-if="showArticleReactions" class="article-counters d-flex">
-          <div class="likes-container mb-1">
-            <v-icon class="counters-icons" size="14">mdi-thumb-up</v-icon>
-            <span class="counterStyle ml-1">{{ item.likesCount }}</span>
-          </div>
-          <div class="comments-container ml-2">
-            <v-icon
-              class="counters-icons mt-1"
-              size="14">
-              mdi-comment
-            </v-icon>
-            <span class="counterStyle ml-1">{{ item.commentsCount }}</span>
+          class="article-img"
+          :src="articleImage"
+          :alt="$t('news.latest.alt.articleImage')">
+        <div class="author-date-container">
+          <img
+            v-if="showArticleAuthor"
+            class="author-photo"
+            :src="item.authorAvatarUrl"
+            :alt="$t('news.avatar.author.alt',{0:item.authorDisplayName})">
+          <div v-if="showArticleDate" class="author-date">
+            <date-format
+              :value="displayDate"
+              :format="dateFormat" />
           </div>
-          <div class="views-container ml-2">
-            <v-icon class="counters-icons" size="16">mdi-eye</v-icon>
-            <span class="counterStyle">{{ item.viewsCount }}</span>
+        </div>
+      </a>
+      <a
+        class="articleLink"
+        target="_self"
+        :href="articleUrl">
+        <div class="title-container">
+          <div v-if="showArticleTitle" class="article-title">{{ item.title }}</div>
+          <div v-if="showArticleReactions" class="article-counters d-flex">
+            <div class="likes-container mb-1">
+              <v-icon class="counters-icons" size="14">mdi-thumb-up</v-icon>
+              <span class="counterStyle ml-1">{{ item.likesCount }}</span>
+            </div>
+            <div class="comments-container ml-2">
+              <v-icon
+                class="counters-icons mt-1"
+                size="14">
+                mdi-comment
+              </v-icon>
+              <span class="counterStyle ml-1">{{ item.commentsCount }}</span>
+            </div>
+            <div class="views-container ml-2">
+              <v-icon class="counters-icons" size="16">mdi-eye</v-icon>
+              <span class="counterStyle">{{ item.viewsCount }}</span>
+            </div>
           </div>
         </div>
-      </div>
-    </a>
-  </div>
+      </a>
+    </div>
+  </v-hover>
 </template>
 
 <script>
@@ -80,12 +85,17 @@ export default {
       required: false,
       default: null
     },
+    lastItem: {
+      type: Boolean,
+      default: false
+    },
   },
   data: ()=> ({
     dateFormat: {
       year: 'numeric',
       month: 'long',
       day: 'numeric',
+      showSeeAll: false
     },
   }),
   computed: {
@@ -113,6 +123,9 @@ export default {
     articleUrl() {
       return eXo.env.portal.userName !== '' ? this.item.url : `${eXo.env.portal.context}/${eXo.env.portal.portalName}/news-detail?newsId=${this.item.id}`;
     }
+  },
+  created() {
+    this.showSeeAll = this.$root.showSeeAll;
   }
 };
 </script>

webapp/src/main/webapp/skin/less/newsListView.less

@@ -1833,6 +1833,9 @@ p.caption-title:after {
     div:has(> .button-open-settings) {
       margin-right: 0 !important;
     }
+    div:has(> .settingNewsButton) {
+      margin-right: 0 !important;
+    }
     .button-see-all-news {
       height: 18px !important;
       padding: 0 9px !important;
@@ -1844,12 +1847,17 @@ p.caption-title:after {
     .button-open-settings {
       height: 18px;
       width: 18px;
-      .mdi-cog {
-        height: 18px !important;
-        font-size: 18px !important;
-        width: 18px !important;
-        color: white !important;
-        text-shadow: 2px 2px 4px black;
+    }
+    .settingNewsButton {
+      height: 18px !important;
+      font-size: 18px !important;
+      width: 18px !important;
+      color: white !important;
+      text-shadow: 2px 2px 4px @blackColorDefault !important;
+      &:hover {
+        background-color: rgba(255, 255, 255, 0.3)!important;
+        box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.3) !important;
+        border-radius: 50% !important;
       }
     }
     &:hover {