From 4312fa803e3628a2e6b32493bc93692b343b39c3 Mon Sep 17 00:00:00 2001
From: "Grigorii K. Shartsev" <me@shgk.me>
Date: Wed, 18 Oct 2023 12:20:28 +0200
Subject: fix(weather_status): remove unnecessaries LI wrapper and inline mode

Weather Status is only used as a Dashboard Status and only in so-called inline mode.
- Remove LI wrapper (actual only for User Menu Entry)
- Remove `inline` prop, consider component as always inline

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>
---
 apps/weather_status/src/App.vue           | 151 ++++++++++--------------------
 apps/weather_status/src/weather-status.js |   6 +-
 2 files changed, 53 insertions(+), 104 deletions(-)

diff --git a/apps/weather_status/src/App.vue b/apps/weather_status/src/App.vue
index 9bd217cd894..8aaa30f77d5 100644
--- a/apps/weather_status/src/App.vue
+++ b/apps/weather_status/src/App.vue
@@ -20,64 +20,62 @@
   -->
 
 <template>
-	<li :class="{ inline }">
-		<div id="weather-status-menu-item">
-			<NcActions class="weather-status-menu-item__subheader"
-				:default-icon="weatherIcon"
+	<div id="weather-status-menu-item">
+		<NcActions class="weather-status-menu-item__subheader"
+			:default-icon="weatherIcon"
+			:aria-hidden="true"
+			:aria-label="currentWeatherMessage"
+			:menu-name="currentWeatherMessage">
+			<NcActionText v-if="gotWeather"
 				:aria-hidden="true"
-				:aria-label="currentWeatherMessage"
-				:menu-name="currentWeatherMessage">
-				<NcActionText v-if="gotWeather"
-					:aria-hidden="true"
-					:icon="futureWeatherIcon">
-					{{ forecastMessage }}
-				</NcActionText>
-				<NcActionLink v-if="gotWeather"
-					icon="icon-address"
-					target="_blank"
-					:aria-hidden="true"
-					:href="weatherLinkTarget"
-					:close-after-click="true">
-					{{ locationText }}
-				</NcActionLink>
-				<NcActionButton v-if="gotWeather"
+				:icon="futureWeatherIcon">
+				{{ forecastMessage }}
+			</NcActionText>
+			<NcActionLink v-if="gotWeather"
+				icon="icon-address"
+				target="_blank"
+				:aria-hidden="true"
+				:href="weatherLinkTarget"
+				:close-after-click="true">
+				{{ locationText }}
+			</NcActionLink>
+			<NcActionButton v-if="gotWeather"
+				:aria-hidden="true"
+				@click="onAddRemoveFavoriteClick">
+				<template #icon>
+					<component :is="addRemoveFavoriteIcon" :size="20" class="favorite-color" />
+				</template>
+				{{ addRemoveFavoriteText }}
+			</NcActionButton>
+			<NcActionSeparator v-if="address && !errorMessage" />
+			<NcActionButton icon="icon-crosshair"
+				:close-after-click="true"
+				:aria-hidden="true"
+				@click="onBrowserLocationClick">
+				{{ t('weather_status', 'Detect location') }}
+			</NcActionButton>
+			<NcActionInput ref="addressInput"
+				:label="t('weather_status', 'Set custom address')"
+				:disabled="false"
+				icon="icon-rename"
+				:aria-hidden="true"
+				type="text"
+				value=""
+				@submit="onAddressSubmit" />
+			<template v-if="favorites.length > 0">
+				<NcActionCaption :name="t('weather_status', 'Favorites')" />
+				<NcActionButton v-for="favorite in favorites"
+					:key="favorite"
 					:aria-hidden="true"
-					@click="onAddRemoveFavoriteClick">
+					@click="onFavoriteClick($event, favorite)">
 					<template #icon>
-						<component :is="addRemoveFavoriteIcon" :size="20" class="favorite-color" />
+						<IconStar :size="20" :class="{'favorite-color': address === favorite}" />
 					</template>
-					{{ addRemoveFavoriteText }}
-				</NcActionButton>
-				<NcActionSeparator v-if="address && !errorMessage" />
-				<NcActionButton icon="icon-crosshair"
-					:close-after-click="true"
-					:aria-hidden="true"
-					@click="onBrowserLocationClick">
-					{{ t('weather_status', 'Detect location') }}
+					{{ favorite }}
 				</NcActionButton>
-				<NcActionInput ref="addressInput"
-					:label="t('weather_status', 'Set custom address')"
-					:disabled="false"
-					icon="icon-rename"
-					:aria-hidden="true"
-					type="text"
-					value=""
-					@submit="onAddressSubmit" />
-				<template v-if="favorites.length > 0">
-					<NcActionCaption :name="t('weather_status', 'Favorites')" />
-					<NcActionButton v-for="favorite in favorites"
-						:key="favorite"
-						:aria-hidden="true"
-						@click="onFavoriteClick($event, favorite)">
-						<template #icon>
-							<IconStar :size="20" :class="{'favorite-color': address === favorite}" />
-						</template>
-						{{ favorite }}
-					</NcActionButton>
-				</template>
-			</NcActions>
-		</div>
-	</li>
+			</template>
+		</NcActions>
+	</div>
 </template>
 
 <script>
@@ -214,12 +212,6 @@ export default {
 		NcActionSeparator,
 		NcActionText,
 	},
-	props: {
-		inline: {
-			type: Boolean,
-			default: false,
-		},
-	},
 	data() {
 		return {
 			locale: getLocale(),
@@ -601,42 +593,7 @@ export default {
 	color: #a08b00;
 }
 
-li:not(.inline) .weather-status-menu-item {
-	&__header {
-		display: block;
-		align-items: center;
-		color: var(--color-main-text);
-		padding: 10px 12px 5px 12px;
-		box-sizing: border-box;
-		opacity: 1;
-		white-space: nowrap;
-		width: 100%;
-		text-align: center;
-		max-width: 250px;
-		text-overflow: ellipsis;
-		min-width: 175px;
-	}
-
-	&__subheader {
-		width: 100%;
-
-		.trigger > .icon {
-			background-color: var(--color-main-background);
-			background-size: 16px;
-			border: 0;
-			border-radius: 0;
-			font-weight: normal;
-			padding-left: 40px;
-
-			&:hover,
-			&:focus {
-				box-shadow: inset 4px 0 var(--color-primary-element);
-			}
-		}
-	}
-}
-
-.inline .weather-status-menu-item__subheader {
+.weather-status-menu-item__subheader {
 	width: 100%;
 
 	.trigger > .icon {
@@ -653,8 +610,4 @@ li:not(.inline) .weather-status-menu-item {
 		}
 	}
 }
-
-li {
-	list-style-type: none;
-}
 </style>
diff --git a/apps/weather_status/src/weather-status.js b/apps/weather_status/src/weather-status.js
index 576767b7d72..0e8135b2720 100644
--- a/apps/weather_status/src/weather-status.js
+++ b/apps/weather_status/src/weather-status.js
@@ -36,10 +36,6 @@ document.addEventListener('DOMContentLoaded', function() {
 
 	OCA.Dashboard.registerStatus('weather', (el) => {
 		const Dashboard = Vue.extend(App)
-		return new Dashboard({
-			propsData: {
-				inline: true,
-			},
-		}).$mount(el)
+		return new Dashboard().$mount(el)
 	})
 })
-- 
cgit v1.2.3