feat: Review UX of advanced settings options for the news list - MEED-10327 - Meeds-io/MIPs#247 (#704)

Author: sofyenne

content-service/src/main/resources/locale/portlet/news/News_en.properties

@@ -235,6 +235,7 @@ news.list.settings.newsTargets.description=Display articles published toward thi
 news.list.settings.viewTemplate.description=Customize the display of this news block
 news.list.settings.information=This news block displays published articles. As a publisher, you can tailor how it looks using the settings below.
 news.list.settings.translation.header=Translate header name
+news.list.settings.drawer.editDisplaySettings=Edit Display Settings
 
 newsTargets.settings.title=News Publication Targets
 newsTargets.settings.button.addTarget=Add a target

content-webapp/src/main/webapp/vue-app/news-list-view/components/settings/NewsListSelector.vue

@@ -62,31 +62,34 @@ Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
         v-for="(article, index) in selectedArticles"
         :class="index === lastSelectedIndex && 'mb-2' || 'mb-n2'"
         :key="article.id">
-        <v-list-item-content class="pa-0">
-          <v-list-item-title class="text-truncate pa-0 ma-0">
-            {{ article.title }}
-          </v-list-item-title>
-        </v-list-item-content>
-        <v-btn
-          v-if="index !== 0"
-          icon
-          small
-          @click="moveUp(index)">
-          <v-icon small>fa-arrow-up</v-icon>
-        </v-btn>
-        <v-btn
-          v-if="index !== lastSelectedIndex"
-          icon
-          small
-          @click="moveDown(index)">
-          <v-icon small>fa-arrow-down</v-icon>
-        </v-btn>
-        <v-icon
-          small
-          class="ml-2 red--text"
-          @click="remove(article)">
-          fa-trash
-        </v-icon>
+        <v-list-item-title class="text-truncate pa-0 ma-0">
+          {{ article.title }}
+        </v-list-item-title>
+        <v-list-item-action class="flex-row ma-0 align-center justify-end">
+          <v-btn
+            v-if="index !== 0"
+            icon
+            small
+            @click="moveUp(index)">
+            <v-icon small>fa-arrow-up</v-icon>
+          </v-btn>
+          <v-btn
+            v-if="index !== lastSelectedIndex"
+            icon
+            small
+            @click="moveDown(index)">
+            <v-icon small>fa-arrow-down</v-icon>
+          </v-btn>
+          <v-btn
+            icon
+            small
+            class="ml-2"
+            @click="remove(article)">
+            <v-icon class="error-color" small>
+              fa-trash
+            </v-icon>
+          </v-btn>
+        </v-list-item-action>
       </v-list-item>
     </v-list>
   </v-flex>

content-webapp/src/main/webapp/vue-app/news-list-view/components/settings/NewsSettingsDrawer.vue

@@ -108,14 +108,21 @@
           @see-all-url="setSeeAllUrl"
           @selected-option="selectedOption" />
       </form>
-      <div class="d-flex flex-row mt-4 mx-8 justify-end advancedSettings">
-        <span
-          v-if="!showAdvancedSettings"
-          class="primary--text text-decoration-underline clickable"
-          @click="showAdvancedSettings = !showAdvancedSettings">
-          {{ $t('news.list.settings.drawer.advancedSettings') }}
-        </span>
-      </div>
+      <v-list dense v-if="!showAdvancedSettings">
+        <v-list-item>
+          <v-list-item-title>
+            {{ $t('news.list.settings.drawer.editDisplaySettings') }}
+          </v-list-item-title>
+          <v-list-item-action class="align-center justify-end">
+            <v-btn
+              icon
+              small
+              @click="showAdvancedSettings = !showAdvancedSettings">
+              <v-icon small>fa-edit</v-icon>
+            </v-btn>
+          </v-list-item-action>
+        </v-list-item> 
+      </v-list>
     </template>
     <template slot="footer">
       <div class="d-flex">