fix: Adjust more places for logical position

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

12 files changed, 23 insertions, 268 deletions

diff --git a/apps/settings/src/components/AdminTwoFactor.vue b/apps/settings/src/components/AdminTwoFactor.vue
index 9b2b222d5e8..56b9d609b8b 100644
--- a/apps/settings/src/components/AdminTwoFactor.vue
+++ b/apps/settings/src/components/AdminTwoFactor.vue
@@ -175,8 +175,7 @@ export default {
 	.two-factor-loading {
 		display: inline-block;
 		vertical-align: sub;
-		margin-inline-start: -2px;
-		margin-inline-end: 1px;
+		margin-inline: -2px 1px;
 	}
 
 	.top-margin {
diff --git a/apps/settings/src/components/AppList.vue b/apps/settings/src/components/AppList.vue
index 68df4072ee8..2372b461f57 100644
--- a/apps/settings/src/components/AppList.vue
+++ b/apps/settings/src/components/AppList.vue
@@ -326,14 +326,14 @@ $toolbar-height: 44px + $toolbar-padding * 2;
 	}
 
 	#app-list-update-all {
-		margin-left: 10px;
+		margin-inline-start: 10px;
 	}
 
 	&__toolbar {
 		height: $toolbar-height;
 		padding: $toolbar-padding;
 		// Leave room for app-navigation-toggle
-		padding-left: $toolbar-height;
+		padding-inline-start: $toolbar-height;
 		width: 100%;
 		background-color: var(--color-main-background);
 		position: sticky;
diff --git a/apps/settings/src/components/AppList/AppItem.vue b/apps/settings/src/components/AppList/AppItem.vue
index 881be612445..08faa06f1cd 100644
--- a/apps/settings/src/components/AppList/AppItem.vue
+++ b/apps/settings/src/components/AppList/AppItem.vue
@@ -228,7 +228,7 @@ export default {
 		.app-image {
 			width: var(--default-clickable-area);
 			height: auto;
-			text-align: right;
+			text-align: end;
 		}
 
 		.app-image-icon svg,
@@ -257,8 +257,7 @@ export default {
 		.app-name--link::after {
 			content: '';
 			position: absolute;
-			left: 0;
-			right: 0;
+			inset-inline: 0;
 			height: var(--app-item-height);
 		}
 
@@ -271,7 +270,7 @@ export default {
 			.icon-loading-small {
 				display: inline-block;
 				top: 4px;
-				margin-right: 10px;
+				margin-inline-end: 10px;
 			}
 		}
 
@@ -317,10 +316,8 @@ export default {
 		.app-name--link::after {
 			content: '';
 			position: absolute;
-			top: 0;
-			left: 0;
-			right: 0;
-			bottom: 0;
+			inset-block: 0;
+			inset-inline: 0;
 		}
 
 		.app-actions {
diff --git a/apps/settings/src/components/AppStoreDiscover/CarouselType.vue b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue
index 537c3004c0e..e657c7ae800 100644
--- a/apps/settings/src/components/AppStoreDiscover/CarouselType.vue
+++ b/apps/settings/src/components/AppStoreDiscover/CarouselType.vue
@@ -165,10 +165,10 @@ h3 {
 
 		// See padding of discover section
 		&--next {
-			right: -54px;
+			inset-inline-end: -54px;
 		}
 		&--previous {
-			left: -54px;
+			inset-inline-start: -54px;
 		}
 	}
 
diff --git a/apps/settings/src/components/AppStoreDiscover/PostType.vue b/apps/settings/src/components/AppStoreDiscover/PostType.vue
index 536609f329f..512ce987510 100644
--- a/apps/settings/src/components/AppStoreDiscover/PostType.vue
+++ b/apps/settings/src/components/AppStoreDiscover/PostType.vue
@@ -255,12 +255,12 @@ export default defineComponent({
 		&-wrapper {
 			position: relative;
 			top: -50%;
-			left: -50%;
+			inset-inline-start: -50%;
 		}
 
 		position: absolute;
 		top: -46px; // half of the icon height
-		right: -46px; // half of the icon width
+		inset-inline-end: -46px; // half of the icon width
 	}
 }
 
diff --git a/apps/settings/src/components/AuthTokenSetup.vue b/apps/settings/src/components/AuthTokenSetup.vue
index dcff95afd63..74dd3c2bbed 100644
--- a/apps/settings/src/components/AuthTokenSetup.vue
+++ b/apps/settings/src/components/AuthTokenSetup.vue
@@ -81,8 +81,8 @@ export default defineComponent({
 <style lang="scss" scoped>
 	.app-name-text-field {
 		height: 44px !important;
-		padding-left: 12px;
-		margin-right: 12px;
+		padding-inline-start: 12px;
+		margin-inline-end: 12px;
 		width: 200px;
 	}
 
diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
deleted file mode 100644
index 99ef17dbd6c..00000000000
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ /dev/null
@@ -1,239 +0,0 @@
-<!--
-  - @copyright 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
-  -
-  - @author 2019 Christoph Wurst <christoph@winzerhof-wurst.at>
-  -
-  - @license GNU AGPL version 3 or any later version
-  -
-  - This program is free software: you can redistribute it and/or modify
-  - it under the terms of the GNU Affero General Public License as
-  - published by the Free Software Foundation, either version 3 of the
-  - License, or (at your option) any later version.
-  -
-  - This program is distributed in the hope that it will be useful,
-  - but WITHOUT ANY WARRANTY; without even the implied warranty of
-  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
-  - GNU Affero General Public License for more details.
-  -
-  - You should have received a copy of the GNU Affero General Public License
-  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
-  -->
-
-<template>
-	<div v-if="!adding" id="generate-app-token-section" class="row spacing">
-		<!-- Port to TextField component when available -->
-		<NcTextField :value.sync="deviceName"
-			type="text"
-			:maxlength="120"
-			:disabled="loading"
-			class="app-name-text-field"
-			:label="t('settings', 'App name')"
-			:placeholder="t('settings', 'App name')"
-			@keydown.enter="submit" />
-		<NcButton :disabled="loading || deviceName.length === 0"
-			type="primary"
-			@click="submit">
-			{{ t('settings', 'Create new app password') }}
-		</NcButton>
-	</div>
-	<div v-else class="spacing">
-		{{ t('settings', 'Use the credentials below to configure your app or device.') }}
-		{{ t('settings', 'For security reasons this password will only be shown once.') }}
-		<div class="app-password-row">
-			<label for="app-username" class="app-password-label">{{ t('settings', 'Username') }}</label>
-			<input id="app-username"
-				:value="loginName"
-				type="text"
-				class="monospaced"
-				readonly="readonly"
-				@focus="selectInput">
-		</div>
-		<div class="app-password-row">
-			<label for="app-password" class="app-password-label">{{ t('settings', 'Password') }}</label>
-			<input id="app-password"
-				ref="appPassword"
-				:value="appPassword"
-				type="text"
-				class="monospaced"
-				readonly="readonly"
-				@focus="selectInput">
-			<NcButton type="tertiary"
-				:title="copyTooltipOptions"
-				:aria-label="copyTooltipOptions"
-				@click="copyPassword">
-				<template #icon>
-					<Check v-if="copied" :size="20" />
-					<ContentCopy v-else :size="20" />
-				</template>
-			</NcButton>
-			<NcButton @click="reset">
-				{{ t('settings', 'Done') }}
-			</NcButton>
-		</div>
-		<div class="app-password-row">
-			<span class="app-password-label" />
-			<NcButton v-if="!showQR"
-				@click="showQR = true">
-				{{ t('settings', 'Show QR code for mobile apps') }}
-			</NcButton>
-			<QR v-else
-				:value="qrUrl" />
-		</div>
-	</div>
-</template>
-
-<script>
-import QR from '@chenfengyuan/vue-qrcode'
-import { confirmPassword } from '@nextcloud/password-confirmation'
-import '@nextcloud/password-confirmation/dist/style.css'
-import { showError } from '@nextcloud/dialogs'
-import { getRootUrl } from '@nextcloud/router'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
-
-import Check from 'vue-material-design-icons/Check.vue'
-import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
-
-export default {
-	name: 'AuthTokenSetupDialogue',
-	components: {
-		Check,
-		ContentCopy,
-		NcButton,
-		QR,
-		NcTextField,
-	},
-	props: {
-		add: {
-			type: Function,
-			required: true,
-		},
-	},
-	data() {
-		return {
-			adding: false,
-			loading: false,
-			deviceName: '',
-			appPassword: '',
-			loginName: '',
-			copied: false,
-			showQR: false,
-			qrUrl: '',
-		}
-	},
-	computed: {
-		copyTooltipOptions() {
-			if (this.copied) {
-				return t('settings', 'Copied!')
-			}
-			return t('settings', 'Copy')
-		},
-	},
-	methods: {
-		selectInput(e) {
-			e.currentTarget.select()
-		},
-		submit() {
-			confirmPassword()
-				.then(() => {
-					this.loading = true
-					return this.add(this.deviceName)
-				})
-				.then(token => {
-					this.adding = true
-					this.loginName = token.loginName
-					this.appPassword = token.token
-
-					const server = window.location.protocol + '//' + window.location.host + getRootUrl()
-					this.qrUrl = `nc://login/user:${token.loginName}&password:${token.token}&server:${server}`
-
-					this.$nextTick(() => {
-						this.$refs.appPassword.select()
-					})
-				})
-				.catch(err => {
-					console.error('could not create a new app password', err)
-					OC.Notification.showTemporary(t('settings', 'Error while creating device token'))
-
-					this.reset()
-				})
-		},
-		async copyPassword() {
-			try {
-				await navigator.clipboard.writeText(this.appPassword)
-				this.copied = true
-			} catch (e) {
-				this.copied = false
-				console.error(e)
-				showError(t('settings', 'Could not copy app password. Please copy it manually.'))
-			} finally {
-				setTimeout(() => {
-					this.copied = false
-				}, 4000)
-			}
-		},
-		reset() {
-			this.adding = false
-			this.loading = false
-			this.showQR = false
-			this.qrUrl = ''
-			this.deviceName = ''
-			this.appPassword = ''
-			this.loginName = ''
-		},
-	},
-}
-</script>
-
-<style lang="scss" scoped>
-	.app-password-row {
-		display: flex;
-		align-items: center;
-		flex-wrap: wrap;
-		margin-top: calc(var(--default-grid-baseline) * 2);
-
-		.icon {
-			background-size: 16px 16px;
-			display: inline-block;
-			position: relative;
-			top: 3px;
-			margin-inline-start: 5px;
-			margin-inline-end: 8px;
-		}
-
-	}
-
-	.app-password-label {
-		display: table-cell;
-		margin-inline-end: 1em;
-		text-align: start;
-		vertical-align: middle;
-		width: 100px;
-	}
-
-	.app-name-text-field {
-		height: 44px !important;
-		padding-left: 12px;
-		margin-inline-end: 12px;
-		width: 200px;
-	}
-
-	.monospaced {
-		width: 245px;
-		font-family: monospace;
-	}
-
-	.button-vue{
-		display:inline-block;
-		margin: 3px 3px 3px 3px;
-	}
-
-	.row {
-		display: flex;
-		align-items: center;
-	}
-
-	.spacing {
-		padding-top: 16px;
-	}
-</style>
diff --git a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
index a4e01bcef7d..1c739a54412 100644
--- a/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
+++ b/apps/settings/src/components/DeclarativeSettings/DeclarativeSection.vue
@@ -243,8 +243,8 @@ export default {
 	.hint {
 		display: inline-block;
 		color: var(--color-text-maxcontrast);
-		margin-left: 8px;
-		padding-top: 5px;
+		margin-inline-start: 8px;
+		padding-block-start: 5px;
 	}
 
 	&-radio, &-multi_checkbox {
diff --git a/apps/settings/src/components/Encryption.vue b/apps/settings/src/components/Encryption.vue
index c17ef57cc7f..72b597c61d3 100644
--- a/apps/settings/src/components/Encryption.vue
+++ b/apps/settings/src/components/Encryption.vue
@@ -168,7 +168,7 @@ export default {
 	color: var(--color-text-light);
 	background-color: var(--note-background);
 	border: 1px solid var(--color-border);
-	border-left: 4px solid var(--note-theme);
+	border-inline-start: 4px solid var(--note-theme);
 	border-radius: var(--border-radius);
 	box-shadow: rgba(43, 42, 51, 0.05) 0px 1px 2px 0px;
 	margin: 1rem 0;
diff --git a/apps/settings/src/components/Markdown.vue b/apps/settings/src/components/Markdown.vue
index 8f2800825a3..f3b8747119d 100644
--- a/apps/settings/src/components/Markdown.vue
+++ b/apps/settings/src/components/Markdown.vue
@@ -160,7 +160,7 @@ export default {
 	}
 
 	ul, ol {
-		padding-left: 10px;
+		padding-inline-start: 10px;
 		margin-inline-start: 10px;
 	}
 
@@ -177,11 +177,10 @@ export default {
 	}
 
 	blockquote {
-		padding-left: 1em;
-		border-left: 4px solid var(--color-primary-element);
+		padding-inline-start: 1em;
+		border-inline-start: 4px solid var(--color-primary-element);
 		color: var(--color-text-maxcontrast);
-		margin-inline-start: 0;
-		margin-inline-end: 0;
+		margin-inline: 0;
 	}
 
 	}
diff --git a/apps/settings/src/components/Users/shared/styles.scss b/apps/settings/src/components/Users/shared/styles.scss
index 3e4a96811d6..4dfdd58af6d 100644
--- a/apps/settings/src/components/Users/shared/styles.scss
+++ b/apps/settings/src/components/Users/shared/styles.scss
@@ -50,7 +50,7 @@
 		}
 
 		&--username {
-			padding-left: calc(var(--default-grid-baseline) * 3);
+			padding-inline-start: calc(var(--default-grid-baseline) * 3);
 		}
 
 		&--avatar {
diff --git a/apps/settings/src/components/WebAuthn/AddDevice.vue b/apps/settings/src/components/WebAuthn/AddDevice.vue
index f478da0dbb7..6c0b1eacde8 100644
--- a/apps/settings/src/components/WebAuthn/AddDevice.vue
+++ b/apps/settings/src/components/WebAuthn/AddDevice.vue
@@ -179,8 +179,7 @@ export default {
 .webauthn-loading {
 	display: inline-block;
 	vertical-align: sub;
-	margin-inline-start: 2px;
-	margin-inline-end: 2px;
+	margin-inline: 2px;
 }
 
 .new-webauthn-device {