diff options
| -rw-r--r-- | apps/weather_status/src/App.vue | 151 | ||||
| -rw-r--r-- | 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) }) }) |