Redesign select of calendars and include mini date picker

aleksis/core/frontend/components/calendar/CalendarOverview.vue

@@ -77,14 +77,22 @@
       </v-row>
       <v-row>
         <v-col v-if="$vuetify.breakpoint.lgAndUp" lg="3" xl="2">
-          <v-list flat>
+          <v-date-picker
+            no-title
+            v-model="calendarFocus"
+            :style="{ margin: '0px -8px', 'z-index': '10' }"
+          ></v-date-picker>
+          <v-list flat subheader :style="{ 'z-index': '30' }">
+            <v-subheader>
+              {{ $t("calendar.my_calendars") }}
+            </v-subheader>
             <calendar-select
               v-model="selectedCalendarFeedNames"
               :calendar-feeds="calendarFeeds"
             />
           </v-list>
         </v-col>
-        <v-col lg="9" xl="10">
+        <v-col lg="9" xl="10" :style="{ 'z-index': '20' }">
           <v-sheet height="600">
             <v-expand-transition>
               <v-progress-linear

aleksis/core/frontend/components/calendar/CalendarSelect.vue

 <template>
   <v-list-item-group multiple v-model="model">
-    <v-subheader>
-      <v-checkbox
-        :label="$t('actions.select_all')"
-        :indeterminate="someSelected"
-        :input-value="allSelected"
-        @change="toggleAll"
-      />
-    </v-subheader>
     <v-list-item
       v-for="calendarFeed in calendarFeeds"
       :key="calendarFeed.name"
@@ -15,13 +7,12 @@
     >
       <template #default="{ active }">
         <v-list-item-action>
-          <v-checkbox :input-value="active"></v-checkbox>
+          <v-checkbox
+            :input-value="active"
+            :color="calendarFeed.color"
+          ></v-checkbox>
         </v-list-item-action>
 
-        <v-list-item-icon>
-          <v-icon class="mr-2" :color="calendarFeed.color"> mdi-circle </v-icon>
-        </v-list-item-icon>
-
         <v-list-item-content>
           <v-list-item-title>
             {{ calendarFeed.verboseName }}
@@ -29,10 +20,23 @@
         </v-list-item-content>
 
         <v-list-item-action>
-          <copy-to-clipboard-button
-            :text="calendarFeed.url"
-            :tooltip-help-text="$t('calendar.ics_to_clipboard')"
-          />
+          <v-menu bottom>
+            <template v-slot:activator="{ on, attrs }">
+              <v-btn fab x-small icon v-bind="attrs" v-on="on">
+                <v-icon>mdi-dots-vertical</v-icon>
+              </v-btn>
+            </template>
+            <v-list dense>
+              <v-list-item :href="calendarFeed.url">
+                <v-list-item-icon>
+                  <v-icon>mdi-calendar-export</v-icon>
+                </v-list-item-icon>
+                <v-list-item-title>
+                  {{ $t("calendar.download_ics") }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+          </v-menu>
         </v-list-item-action>
       </template>
     </v-list-item>
@@ -40,8 +44,6 @@
 </template>
 
 <script>
-import CopyToClipboardButton from "../generic/CopyToClipboardButton.vue";
-
 export default {
   name: "CalendarSelect",
   props: {
@@ -54,9 +56,6 @@ export default {
       required: true,
     },
   },
-  components: {
-    CopyToClipboardButton,
-  },
   computed: {
     model: {
       get() {

aleksis/core/frontend/messages/en.json

@@ -254,7 +254,9 @@
     "today": "Today",
     "select": "Select calendars",
     "ics_to_clipboard": "Copy link to calendar ICS to clipboard",
-    "cancelled": "Cancelled"
+    "cancelled": "Cancelled",
+    "download_ics": "Download ICS",
+    "my_calendars": "My Calendars"
   },
   "status": {
     "changes": "You have unsaved changes.",