Rename filters

app/Util/Media/Filter.php

@@ -5,47 +5,47 @@ namespace App\Util\Media;
 class Filter {
 
 	public static $filters = [
-		'1977' => 'filter-1977', 
-		'Aden' => 'filter-aden', 
-		'Amaro' => 'filter-amaro', 
-		'Ashby' => 'filter-ashby', 
-		'Brannan' => 'filter-brannan', 
-		'Brooklyn' => 'filter-brooklyn', 
-		'Charmes' => 'filter-charmes', 
-		'Clarendon' => 'filter-clarendon', 
-		'Crema' => 'filter-crema', 
-		'Dogpatch' => 'filter-dogpatch', 
-		'Earlybird' => 'filter-earlybird', 
-		'Gingham' => 'filter-gingham', 
-		'Ginza' => 'filter-ginza', 
-		'Hefe' => 'filter-hefe', 
-		'Helena' => 'filter-helena', 
-		'Hudson' => 'filter-hudson', 
-		'Inkwell' => 'filter-inkwell', 
-		'Kelvin' => 'filter-kelvin', 
-		'Kuno' => 'filter-juno', 
-		'Lark' => 'filter-lark', 
-		'Lo-Fi' => 'filter-lofi', 
-		'Ludwig' => 'filter-ludwig', 
-		'Maven' => 'filter-maven', 
-		'Mayfair' => 'filter-mayfair', 
-		'Moon' => 'filter-moon', 
-		'Nashville' => 'filter-nashville', 
-		'Perpetua' => 'filter-perpetua', 
-		'Poprocket' => 'filter-poprocket', 
-		'Reyes' => 'filter-reyes', 
-		'Rise' => 'filter-rise', 
-		'Sierra' => 'filter-sierra', 
-		'Skyline' => 'filter-skyline', 
-		'Slumber' => 'filter-slumber', 
-		'Stinson' => 'filter-stinson', 
-		'Sutro' => 'filter-sutro', 
-		'Toaster' => 'filter-toaster', 
-		'Valencia' => 'filter-valencia', 
-		'Vesper' => 'filter-vesper', 
-		'Walden' => 'filter-walden', 
-		'Willow' => 'filter-willow', 
-		'X-Pro II' => 'filter-xpro-ii'
+		'1984' => 'filter-1977',
+		'Azen' => 'filter-aden',
+		'Astairo' => 'filter-amaro',
+		'Grassbee' => 'filter-ashby',
+		'Bookrun' => 'filter-brannan',
+		'Borough' => 'filter-brooklyn',
+		'Farms' => 'filter-charmes',
+		'Hairsadone' => 'filter-clarendon',
+		'Cleana ' => 'filter-crema',
+		'Catpatch' => 'filter-dogpatch',
+		'Earlyworm' => 'filter-earlybird',
+		'Plaid' => 'filter-gingham',
+		'Kyo' => 'filter-ginza',
+		'Yefe' => 'filter-hefe',
+		'Goddess' => 'filter-helena',
+		'Yards' => 'filter-hudson',
+		'Quill' => 'filter-inkwell',
+		'Rankine' => 'filter-kelvin',
+		'Juno' => 'filter-juno',
+		'Mark' => 'filter-lark',
+		'Chill' => 'filter-lofi',
+		'Van' => 'filter-ludwig',
+		'Apache' => 'filter-maven',
+		'Mayflower' => 'filter-mayfair',
+		'Ceres' => 'filter-moon',
+		'Knoxville' => 'filter-nashville',
+		'Felicity' => 'filter-perpetua',
+		'Sandblast' => 'filter-poprocket',
+		'Daisy' => 'filter-reyes',
+		'Elevate' => 'filter-rise',
+		'Nevada' => 'filter-sierra',
+		'Futura' => 'filter-skyline',
+		'Sleepy' => 'filter-slumber',
+		'Steward' => 'filter-stinson',
+		'Savoy' => 'filter-sutro',
+		'Blaze' => 'filter-toaster',
+		'Apricot' => 'filter-valencia',
+		'Gloming' => 'filter-vesper',
+		'Walter' => 'filter-walden',
+		'Poplar' => 'filter-willow',
+		'Xenon' => 'filter-xpro-ii'
 	];
 
 	public static function classes()
@@ -58,4 +58,4 @@ class Filter {
 		return array_keys(self::$filters);
 	}
 
-}
+}

resources/assets/js/app.js

@@ -149,47 +149,47 @@ window.App.util = {
 		})
 	}, 
 	filters: [
-			['1977','filter-1977'], 
-			['Aden','filter-aden'], 
-			['Amaro','filter-amaro'], 
-			['Ashby','filter-ashby'], 
-			['Brannan','filter-brannan'], 
-			['Brooklyn','filter-brooklyn'], 
-			['Charmes','filter-charmes'], 
-			['Clarendon','filter-clarendon'], 
-			['Crema','filter-crema'], 
-			['Dogpatch','filter-dogpatch'], 
-			['Earlybird','filter-earlybird'], 
-			['Gingham','filter-gingham'], 
-			['Ginza','filter-ginza'], 
-			['Hefe','filter-hefe'], 
-			['Helena','filter-helena'], 
-			['Hudson','filter-hudson'], 
-			['Inkwell','filter-inkwell'], 
-			['Kelvin','filter-kelvin'], 
-			['Kuno','filter-juno'], 
-			['Lark','filter-lark'], 
-			['Lo-Fi','filter-lofi'], 
-			['Ludwig','filter-ludwig'], 
-			['Maven','filter-maven'], 
-			['Mayfair','filter-mayfair'], 
-			['Moon','filter-moon'], 
-			['Nashville','filter-nashville'], 
-			['Perpetua','filter-perpetua'], 
-			['Poprocket','filter-poprocket'], 
-			['Reyes','filter-reyes'], 
-			['Rise','filter-rise'], 
-			['Sierra','filter-sierra'], 
-			['Skyline','filter-skyline'], 
-			['Slumber','filter-slumber'], 
-			['Stinson','filter-stinson'], 
-			['Sutro','filter-sutro'], 
-			['Toaster','filter-toaster'], 
-			['Valencia','filter-valencia'], 
-			['Vesper','filter-vesper'], 
-			['Walden','filter-walden'], 
-			['Willow','filter-willow'], 
-			['X-Pro II','filter-xpro-ii']
+			['1984','filter-1977'],
+			['Azen','filter-aden'],
+			['Astairo','filter-amaro'],
+			['Grassbee','filter-ashby'],
+			['Bookrun','filter-brannan'],
+			['Borough','filter-brooklyn'],
+			['Farms','filter-charmes'],
+			['Hairsadone','filter-clarendon'],
+			['Cleana ','filter-crema'],
+			['Catpatch','filter-dogpatch'],
+			['Earlyworm','filter-earlybird'],
+			['Plaid','filter-gingham'],
+			['Kyo','filter-ginza'],
+			['Yefe','filter-hefe'],
+			['Goddess','filter-helena'],
+			['Yards','filter-hudson'],
+			['Quill','filter-inkwell'],
+			['Rankine','filter-kelvin'],
+			['Juno','filter-juno'],
+			['Mark','filter-lark'],
+			['Chill','filter-lofi'],
+			['Van','filter-ludwig'],
+			['Apache','filter-maven'],
+			['Mayflower','filter-mayfair'],
+			['Ceres','filter-moon'],
+			['Knoxville','filter-nashville'],
+			['Felicity','filter-perpetua'],
+			['Sandblast','filter-poprocket'],
+			['Daisy','filter-reyes'],
+			['Elevate','filter-rise'],
+			['Nevada','filter-sierra'],
+			['Futura','filter-skyline'],
+			['Sleepy','filter-slumber'],
+			['Steward','filter-stinson'],
+			['Savoy','filter-sutro'],
+			['Blaze','filter-toaster'],
+			['Apricot','filter-valencia'],
+			['Gloming','filter-vesper'],
+			['Walter','filter-walden'],
+			['Poplar','filter-willow'],
+			['Xenon','filter-xpro-ii']
 	],
 	filterCss: {
 		'filter-1977': 'sepia(.5) hue-rotate(-30deg) saturate(1.4)',

resources/assets/js/components/ComposeModal.vue

@@ -370,7 +370,7 @@
 										<div class="p-1 pt-3">
 											<img :src="media[carouselCursor].url" width="100px" height="60px" :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
 										</div>
-										<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">i{{filter[0]}}</a>
+										<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
 									</li>
 								</ul>
 							</div>
@@ -407,7 +407,7 @@
 										<div class="p-1 pt-3">
 											<img :src="media[carouselCursor].url" width="100px" height="60px" :class="filter[1]" v-on:click.prevent="toggleFilter($event, filter[1])">
 										</div>
-										<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">i{{filter[0]}}</a>
+										<a :class="[media[carouselCursor].filter_class == filter[1] ? 'nav-link text-primary active' : 'nav-link text-muted']" href="#" v-on:click.prevent="toggleFilter($event, filter[1])">{{filter[0]}}</a>
 									</li>
 								</ul>
 							</div>
@@ -1033,7 +1033,7 @@ export default {
 	},
 
 	beforeMount() {
-		this.filters = window.App.util.filters;
+		this.filters = window.App.util.filters.sort();
 		axios.get('/api/compose/v0/settings')
 		.then(res => {
 			this.composeSettings = res.data;