-
Notifications
You must be signed in to change notification settings - Fork 40
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4141 from traPtitech/feat/settings_stamp
設定画面スタンプタブの改修
- Loading branch information
Showing
22 changed files
with
1,218 additions
and
475 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
src/components/Modal/ProfileIconEditModal/ProfileIconEditModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| <template> | ||
| <modal-frame | ||
| title="アイコンの編集" | ||
| subtitle="画像の位置・サイズを編集できます" | ||
| > | ||
| <div :class="$style.container"> | ||
| <image-upload v-model="iconImage" /> | ||
| </div> | ||
| <div :class="$style.buttonContainer"> | ||
| <form-button label="キャンセル" type="tertiary" @click="cancel" /> | ||
| <form-button | ||
| label="更新する" | ||
| :loading="isEditing" | ||
| @click="editIconImage" | ||
| /> | ||
| </div> | ||
| </modal-frame> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { ref, type Ref } from 'vue' | ||
| import apis, { formatResizeError } from '/@/lib/apis' | ||
| import { useToastStore } from '/@/store/ui/toast' | ||
| import FormButton from '/@/components/UI/FormButton.vue' | ||
| import ModalFrame from '../Common/ModalFrame.vue' | ||
| import { useModalStore } from '/@/store/ui/modal' | ||
| import ImageUpload from '/@/components/Settings/ImageUpload.vue' | ||
| const props = defineProps<{ | ||
| file: File | ||
| }>() | ||
| const { clearModal } = useModalStore() | ||
| const iconImage = ref<File>(props.file) | ||
| const useIconImageEdit = (iconImage: Ref<File>) => { | ||
| const { addSuccessToast, addErrorToast } = useToastStore() | ||
| const isEditing = ref(false) | ||
| const editIconImage = async () => { | ||
| if (!iconImage.value) return | ||
| isEditing.value = true | ||
| try { | ||
| await apis.changeMyIcon(iconImage.value) | ||
| addSuccessToast('アイコン画像を変更しました') | ||
| } catch (e) { | ||
| // eslint-disable-next-line no-console | ||
| console.error('アイコン画像の変更に失敗しました', e) | ||
| addErrorToast(formatResizeError(e, 'アイコン画像の変更に失敗しました')) | ||
| } | ||
| clearModal() | ||
| isEditing.value = false | ||
| } | ||
| return { isEditing, editIconImage } | ||
| } | ||
| const { isEditing, editIconImage } = useIconImageEdit(iconImage) | ||
| const cancel = () => { | ||
| clearModal() | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .container { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .buttonContainer { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-end; | ||
| gap: 16px; | ||
| margin-top: 16px; | ||
| } | ||
| </style> |
86 changes: 86 additions & 0 deletions
86
src/components/Modal/StampCreateModal/StampCreateModal.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| <template> | ||
| <modal-frame title="新規スタンプ登録" :subtitle="subtitle"> | ||
| <stamp-image-edit | ||
| v-if="step === 'image'" | ||
| :file="file" | ||
| @update-file="updateFile" | ||
| /> | ||
| <stamp-info-edit v-else :stamp-image="stampImage" @back="backToImageEdit" /> | ||
| </modal-frame> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import ModalFrame from '/@/components/Modal/Common/ModalFrame.vue' | ||
| import { ref, computed } from 'vue' | ||
| import StampImageEdit from './StampImageEdit.vue' | ||
| import StampInfoEdit from './StampInfoEdit.vue' | ||
| const props = defineProps<{ | ||
| file: File | ||
| }>() | ||
| const stampImage = ref<File>(props.file) | ||
| const step = ref<'image' | 'info'>('image') | ||
| const subtitle = computed(() => | ||
| step.value === 'image' | ||
| ? '画像の位置・サイズを編集できます' | ||
| : 'スタンプの名前を入力してください' | ||
| ) | ||
| const updateFile = (file: File) => { | ||
| stampImage.value = file | ||
| step.value = 'info' | ||
| } | ||
| const backToImageEdit = () => { | ||
| step.value = 'image' | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .form { | ||
| margin: 8px 0; | ||
| } | ||
| .container { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| gap: 16px; | ||
| } | ||
| .leftContainer { | ||
| min-width: 136px; | ||
| width: 136px; | ||
| height: 136px; | ||
| margin: 8px 0; | ||
| flex-grow: 1; | ||
| } | ||
| .imgButton { | ||
| width: 100%; | ||
| height: 100%; | ||
| border: 2px solid $theme-ui-secondary-default; | ||
| border-radius: 4px; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| cursor: pointer; | ||
| } | ||
| .label { | ||
| @include color-ui-secondary; | ||
| margin-bottom: 16px; | ||
| } | ||
| .creator { | ||
| @include color-ui-primary; | ||
| } | ||
| .note { | ||
| @include color-ui-secondary; | ||
| margin-bottom: 12px; | ||
| font-size: 12px; | ||
| } | ||
| .buttonContainer { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-end; | ||
| gap: 16px; | ||
| } | ||
| </style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,81 @@ | ||
| <template> | ||
| <div> | ||
| <div :class="$style.container"> | ||
| <image-upload v-model="stampImage" /> | ||
| </div> | ||
| <div :class="$style.buttonContainer"> | ||
| <form-button label="キャンセル" type="tertiary" @click="cancel" /> | ||
| <form-button | ||
| label="次へ" | ||
| :loading="isChecking" | ||
| @click="checkStampImage" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import { ref, type Ref } from 'vue' | ||
| import { formatResizeError } from '/@/lib/apis' | ||
| import { useToastStore } from '/@/store/ui/toast' | ||
| import { imageSize } from '/@/components/Settings/StampTab/imageSize' | ||
| import FormButton from '/@/components/UI/FormButton.vue' | ||
| import { useModalStore } from '/@/store/ui/modal' | ||
| import ImageUpload from '/@/components/Settings/ImageUpload.vue' | ||
| const props = defineProps<{ | ||
| file: File | ||
| }>() | ||
| const emit = defineEmits<{ | ||
| (e: 'updateFile', file: File): void | ||
| }>() | ||
| const { popModal } = useModalStore() | ||
| const stampImage = ref<File>(props.file) | ||
| const useCheckStamp = (stampImage: Ref<File>) => { | ||
| const { addErrorToast } = useToastStore() | ||
| const isChecking = ref(false) | ||
| const checkStampImage = async () => { | ||
| if (!stampImage.value) return | ||
| isChecking.value = true | ||
| try { | ||
| const size = await imageSize(stampImage.value) | ||
| if (size.height !== size.width) { | ||
| addErrorToast('画像が正方形ではありません。編集してください') | ||
| return | ||
| } | ||
| } catch (e) { | ||
| // eslint-disable-next-line no-console | ||
| console.error('画像の整形に失敗しました', e) | ||
| addErrorToast(formatResizeError(e, '画像の整形に失敗しました')) | ||
| } | ||
| emit('updateFile', stampImage.value) | ||
| isChecking.value = false | ||
| } | ||
| return { isChecking, checkStampImage } | ||
| } | ||
| const { isChecking, checkStampImage } = useCheckStamp(stampImage) | ||
| const cancel = () => { | ||
| popModal() | ||
| } | ||
| </script> | ||
|
|
||
| <style lang="scss" module> | ||
| .container { | ||
| display: flex; | ||
| justify-content: center; | ||
| } | ||
| .buttonContainer { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: flex-end; | ||
| gap: 16px; | ||
| margin-top: 16px; | ||
| } | ||
| </style> |
Oops, something went wrong.