plugins-nextcloud-mirror/spreed
1
0
Fork 0
mirror of https://github.com/nextcloud/spreed.git synced 2025-12-18 05:20:50 +01:00
Code Projects Releases Activity

replace inputs with type 'text' and 'number', remove commented out input

Browse source 
Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>
Co-authored-by: Joas Schilling <213943+nickvergessen@users.noreply.github.com>
This commit is contained in:
Maksim Sukharev 2023-05-01 18:40:09 +02:00
parent 7e033e9344
commit 15b0436b20
No known key found for this signature in database
GPG key ID: 6349D071889BD1D5
5 changed files with 78 additions and 63 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
View file

@ -30,12 +30,13 @@
<template v-if="!isEditingParticipants">
<div class="breakout-rooms-editor__main">
<label class="breakout-rooms-editor__caption" for="room-number">{{ t('spreed', 'Number of breakout rooms') }} </label>
<input id="room-number"
v-model.number="amount"
<NcInputField id="room-number"
:value="amount.toString()"
class="breakout-rooms-editor__number-input"
type="number"
min="1"
max="20">
max="20"
@update:value="setAmount" />
<label class="breakout-rooms-editor__caption">{{ t('spreed', 'Assignment method') }}</label>
<fieldset>
@ -82,6 +83,7 @@
<script>
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import NcInputField from '@nextcloud/vue/dist/Components/NcInputField.js'
import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
import BreakoutRoomsParticipantsEditor from './BreakoutRoomsParticipantsEditor.vue'
@ -90,10 +92,11 @@ export default {
name: 'BreakoutRoomsEditor',
components: {
NcModal,
NcCheckboxRadioSwitch,
NcButton,
BreakoutRoomsParticipantsEditor,
NcButton,
NcCheckboxRadioSwitch,
NcInputField,
NcModal,
},
props: {
@ -137,6 +140,12 @@ export default {
console.debug(error)
}
},
// FIXME upstream: support of value type as Number should be added to NcInputField,
// now it breaks validation. Another option: Create NcNumberField component
setAmount(value) {
this.amount = parseFloat(value)
},
},
}
</script>

2
src/components/NewMessageForm/NewMessageForm.vue
View file

@ -844,7 +844,7 @@ export default {
// Focus and select the text within the input field
focusTextDialogInput() {
// this.$refs.textFileTitleInput.$refs.inputField.$refs.input.focus()
// FIXME upstream: add support of native input methods: focus, select, etc
this.$refs.textFileTitleInput.$refs.inputField.$refs.input.select()
},

77
src/components/SetGuestUsername.vue
View file

@ -20,43 +20,39 @@
-->
<template>
<!-- Guest username setting form -->
<form class="username-form"
@submit.prevent="handleChooseUserName">
<div class="username-form">
<!-- eslint-disable-next-line vue/no-v-html -->
<h3 v-html="displayNameLabel" />
<NcButton @click.prevent="handleEditUsername">
<NcButton v-if="!isEditingUsername"
@click.prevent="handleEditUsername">
{{ t('spreed', 'Edit') }}
<template #icon>
<Pencil :size="20" />
</template>
</NcButton>
<div v-if="isEditingUsername"
class="username-form__wrapper">
<input ref="usernameInput"
v-model="guestUserName"
:placeholder="t('spreed', 'Guest')"
class="username-form__input"
type="text"
@keydown.enter="handleChooseUserName"
@keydown.esc="isEditingUsername = !isEditingUsername">
<NcButton class="username-form__button"
native-type="submit"
:aria-label="t('spreed', 'Save name')"
type="tertiary">
<template #icon>
<ArrowRight :size="20" />
</template>
</NcButton>
</div>
</form>
<NcTextField v-else
ref="usernameInput"
:value.sync="guestUserName"
:placeholder="t('spreed', 'Guest')"
class="username-form__input"
:show-trailing-button="!!guestUserName"
trailing-button-icon="arrowRight"
:trailing-button-label="t('spreed', 'Save name')"
@trailing-button-click="handleChooseUserName"
@keydown.enter="handleChooseUserName"
@keydown.esc="handleEditUsername" />
</div>
</template>
<script>
import ArrowRight from 'vue-material-design-icons/ArrowRight.vue'
import escapeHtml from 'escape-html'
import Pencil from 'vue-material-design-icons/Pencil.vue'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import { setGuestUserName } from '../services/participantsService.js'
@ -65,8 +61,8 @@ export default {
components: {
NcButton,
NcTextField,
Pencil,
ArrowRight,
},
data() {
@ -79,12 +75,12 @@ export default {
computed: {
actorDisplayName() {
return this.$store.getters.getDisplayName()
return this.$store.getters.getDisplayName() || t('spreed', 'Guest')
},
displayNameLabel() {
return t('spreed', 'Display name: <strong>{name}</strong>', {
name: this.actorDisplayName ? this.actorDisplayName : t('spreed', 'Guest'),
})
return t('spreed', 'Display name: {name}', {
name: `<strong>${escapeHtml(this.actorDisplayName)}</strong>`,
}, undefined, { escape: false })
},
actorId() {
return this.$store.getters.getActorId()
@ -107,7 +103,7 @@ export default {
mounted() {
// FIXME use @nextcloud/browser-storage or OCP when decided
// https://github.com/nextcloud/nextcloud-browser-storage/issues/3
this.guestUserName = localStorage.getItem('nick')
this.guestUserName = localStorage.getItem('nick') || ''
if (this.guestUserName && this.actorDisplayName !== this.guestUserName) {
// Browser storage has a name, so we use that.
if (this.actorId) {
@ -152,7 +148,8 @@ export default {
this.isEditingUsername = !this.isEditingUsername
if (this.isEditingUsername) {
this.$nextTick(() => {
this.$refs.usernameInput.focus()
// FIXME upstream: add support of native input methods: focus, select, etc
this.$refs.usernameInput.$refs.inputField.$refs.input.focus()
})
}
},
@ -162,21 +159,13 @@ export default {
</script>
<style lang="scss" scoped>
/** Username form for guest users */
.username-form {
padding: 0 12px;
margin:auto;
&__wrapper {
display: flex;
margin-top: 16px;
}
&__input {
padding-right: var(--clickable-area);
width: 230px;
}
&__button {
margin-left: -52px;
margin: 0 auto 12px;
& &__input {
width: 300px;
height: var(--default-clickable-area);
}
}

36
src/components/SettingsDialog/SettingsDialog.vue
View file

@ -37,11 +37,16 @@
<h3 class="app-settings-section__hint">
{{ locationHint }}
</h3>
<input type="text"
class="app-settings-section__input"
:value="attachmentFolder"
:disabled="attachmentFolderLoading"
@click="selectAttachmentFolder">
<div class="app-settings-section__wrapper">
<NcTextField class="app-settings-section__input"
:value="attachmentFolder"
:disabled="true"
@click="selectAttachmentFolder" />
<NcButton type="primary"
@click="selectAttachmentFolder">
{{ t('spreed', 'Browse…') }}
</NcButton>
</div>
</NcAppSettingsSection>
<NcAppSettingsSection v-if="!isGuest"
id="privacy"
@ -146,7 +151,9 @@ import { generateUrl } from '@nextcloud/router'
import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
import MediaDevicesPreview from '../MediaDevicesPreview.vue'
@ -159,7 +166,9 @@ export default {
MediaDevicesPreview,
NcAppSettingsDialog,
NcAppSettingsSection,
NcButton,
NcCheckboxRadioSwitch,
NcTextField,
},
data() {
@ -247,7 +256,7 @@ export default {
try {
await this.$store.dispatch(
'updateReadStatusPrivacy',
this.readStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC
this.readStatusPrivacyIsPublic ? PRIVACY.PRIVATE : PRIVACY.PUBLIC,
)
showSuccess(t('spreed', 'Your privacy setting has been saved'))
} catch (exception) {
@ -298,8 +307,19 @@ export default {
color: var(--color-text-lighter);
padding: 8px 0;
}
&__input {
width: 100%;
&__wrapper {
display: flex;
align-items: center;
gap: 8px;
}
& &__input {
width: 300px;
height: var(--default-clickable-area);
:deep(input) {
height: var(--default-clickable-area) !important;
cursor: default;
}
}
.shortcut-description {

5
src/views/WelcomeView.vue
View file

@ -5,10 +5,7 @@
<p class="emptycontent-additional">
{{ t('spreed', 'Say hi to your friends and colleagues!') }}
</p>
<div id="shareRoomContainer">
<!-- <input id="shareRoomInput" class="share-room-input hidden" readonly="readonly" type="text"/>
<div id="shareRoomClipboardButton" class="shareRoomClipboard icon-clippy hidden" data-clipboard-target="#shareRoomInput"></div> -->
</div>
<div id="shareRoomContainer" />
</div>
</template>