vikunja/frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

fix(editor): alignment and focus states
Some checks failed
continuous-integration/drone/push Build is failing
Details

Browse Source
This commit is contained in:
kolaente 2023-11-18 17:03:47 +01:00
parent 6c4f1e1cbf
commit bd83294ac0
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
2 changed files with 17 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/input/editor/TipTap.vue
View File

@ -520,14 +520,18 @@ function setFocusToEditor(event) {
.tiptap__editor { .tiptap__editor {
&.tiptap__editor-is-edit-enabled { &.tiptap__editor-is-edit-enabled {
min-height: 10rem; min-height: 10rem;
}
transition: box-shadow $transition; .ProseMirror {
border-radius: $radius; padding: .5rem;
}
&:focus-within, &:focus { &:focus-within, &:focus {
box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5); box-shadow: 0 0 0 2px hsla(var(--primary-hsl), 0.5);
} }
}
transition: box-shadow $transition;
border-radius: $radius;
} }
.tiptap p::before { .tiptap p::before {
@ -540,7 +544,7 @@ function setFocusToEditor(event) {
// Basic editor styles // Basic editor styles
.ProseMirror { .ProseMirror {
padding: .5rem; padding: .5rem .5rem .5rem 0;
&:focus-within, &:focus { &:focus-within, &:focus {
box-shadow: none; box-shadow: none;

8
src/components/tasks/partials/description.vue
View File

@ -17,6 +17,7 @@
</CustomTransition> </CustomTransition>
</h3> </h3>
<editor <editor
class="tiptap__task-description"
:is-edit-enabled="canWrite" :is-edit-enabled="canWrite"
:upload-callback="uploadCallback" :upload-callback="uploadCallback"
:placeholder="$t('task.description.placeholder')" :placeholder="$t('task.description.placeholder')"
@ -123,3 +124,10 @@ async function uploadCallback(files: File[] | FileList): (Promise<string[]>) {
} }
</script> </script>
<style lang="scss" scoped>
.tiptap__task-description {
// The exact amount of pixels we need to make the description icon align with the buttons and the form inside the editor.
// The icon is not exactly the same length on all sides so we need to hack our way around it.
margin-left: 4px;
}
</style>