Add condensed mode (#735)

6c65726f79 · Feb 17, 2022 · 5e68441 · 5e68441
1 parent 792d79f
commit 5e68441
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 7 deletions.
diff --git a/src/services/UserSettings.ts b/src/services/UserSettings.ts
@@ -18,7 +18,8 @@ const defaultSettings: Record<string,any> = {
   searchByName:true,
   searchByDirectory:true,
   selectedPreset:"",
-  rememberSelectedPreset:false
+  rememberSelectedPreset:false,
+  condensedMode: false
 }
 
 export const UserSettings = {

diff --git a/src/views/List.vue b/src/views/List.vue
@@ -27,7 +27,7 @@
       v-on:retry="retry()">
     </ConnectionStatus>
 
-    <VirtualScroll v-else id="torrentList" :fullscreen="true" :items="torrentOrderedList" :item-size="72" key-field="id">
+    <VirtualScroll v-else id="torrentList" :fullscreen="true" :items="torrentOrderedList" :item-size="itemSize" key-field="id">
       <template v-slot:start>
         <ion-list-header id="top">
           <ion-label>
@@ -295,6 +295,9 @@ export default defineComponent({
     },
     downloadSpeed: function (): any {
       return () => TransmissionRPC.sessionStats ? TransmissionRPC.sessionStats.downloadSpeed: 0;
+    },
+    itemSize() {
+      return UserSettings.state.condensedMode ? 46 : 72;
     }
   },
   setup() {

diff --git a/src/views/Settings.vue b/src/views/Settings.vue
@@ -51,6 +51,11 @@
           <ion-label>{{ Locale.speedUnit }}</ion-label>
           <ion-toggle v-model="sharedState.useBits"></ion-toggle>
         </ion-item>
+
+        <ion-item>
+          <ion-label>{{ Locale.condensedMode }}</ion-label>
+          <ion-toggle v-model="sharedState.condensedMode"></ion-toggle>
+        </ion-item>
 
         <ion-item>
           <ion-label>{{ Locale.expandSideMenu }}</ion-label>

diff --git a/src/views/components/Torrent.vue b/src/views/components/Torrent.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="torrent" tabindex="0">
+  <div :class="{ torrent:true, condensed }" tabindex="0">
     <div v-if="orderByPosition" class="order">
       <ion-icon :md="caretUpSharp" :ios="caretUpOutline" color="medium" @click="changeTorrentPosition($event,true)"></ion-icon>
       <ion-icon :md="caretDownSharp" :ios="caretDownOutline" color="medium" @click="changeTorrentPosition($event,false)"></ion-icon>
@@ -11,7 +11,7 @@
         {{ torrent.name }}
       </div>
 
-      <div class="details">
+      <div :class="{details:true,error:torrent.errorString!=''}">
         <div class="line">
           <!-- Download -->
           <span class="bloc fit">
@@ -134,6 +134,9 @@ export default defineComponent({
   computed: {
     orderByPosition() {
       return UserSettings.state.orderBy=="queuePosition";
+    },
+    condensed() {
+      return UserSettings.state.condensedMode
     }
   },
   methods: {
@@ -165,6 +168,10 @@ img.icon {
   display: flex;
 }
 
+.torrent.condensed {
+  height:46px;
+}
+
 .torrent > div {
   display: inline-block;
   vertical-align: top;
@@ -180,6 +187,14 @@ img.icon {
   cursor:pointer;
 }
 
+.torrent.condensed .control {
+  width: 24px;
+  height: 24px;
+  margin: 7px;
+  margin-right: 15px;
+  background-size: 48px;
+}
+
 .torrent .control.paused {
   background-position:right center;
 }
@@ -223,6 +238,10 @@ img.icon {
   line-height: 18px;
 }
 
+.torrent.condensed .details {
+  bottom: -7px;
+}
+
 .torrent .details > * {
   white-space: nowrap;
 }
@@ -278,6 +297,15 @@ img.icon {
   width:100%;
 }
 
+.torrent.condensed ion-progress-bar {
+  bottom: -4px;
+  left: -5px;
+  width: calc(100% + 10px);
+  height: calc(100% + 8px);
+  z-index: -1;
+  opacity: .2;
+}
+
 .torrent .details ion-icon {
   vertical-align:-2px;
 }
@@ -290,24 +318,37 @@ img.icon {
   color: var(--ion-color-primary)
 }
 
+.torrent.condensed .title {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 @media (max-width: 800px) {
   .torrent .title {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
 
-  .torrent .details {
+  .torrent:not(.condensed) .details {
     height: 40px;
     flex-direction: column;
   }
 
-  .torrent .details .line {
+  .torrent:not(.condensed) .details .line {
     width: 100%;
   }
+
+  .torrent.condensed .details.error .bloc {
+    display:none;
+  }
+
+  .torrent.condensed .details.error .error {
+    display:block;
+  }
 }
 
 @media (min-width: 800px) {
-  .torrent .title {
+  .torrent:not(.condensed) .title {
     display: -webkit-box;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;