Skip to content

ui: maintain menu bubble size #2262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
max-nextcloud merged 4 commits into from
Mar 31, 2022
Merged

ui: maintain menu bubble size #2262

Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9fac289
fix: menu bubble size at the end of the line
max-nextcloud Mar 28, 2022
6ffb7d2
ui: maintain menu bubble size
max-nextcloud Mar 29, 2022
aa9cc4f
ui: reduce padding around workspace on mobile
max-nextcloud Mar 29, 2022
fdabd7a
build: compile js
max-nextcloud Mar 29, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Next Next commit
fix: menu bubble size at the end of the line 
Compute menu bubble position without translateX.
The previous approach made the bubble shrink
towards the end of the line.

Signed-off-by: Max <[email protected]>
  • Loading branch information
@max-nextcloud
max-nextcloud committed Mar 29, 2022
commit 9fac289a73cf274b09dae79abf642f76bdd7d801
22 changes: 6 additions & 16 deletions src/components/MenuBubble.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,6 +69,10 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
import { optimalPath } from './../helpers/files'
import { loadState } from '@nextcloud/initial-state'

// This is a rough estimate used for positioning the bubble.
// The actual width depends on the language and the state of the bubble.
const MAX_BUBBLE_WIDTH = 325

export default {
name: 'MenuBubble',
components: {
Expand Down Expand Up @@ -102,21 +106,7 @@ export default {
isUsingDirectEditing: loadState('text', 'directEditingToken', null) !== null,
}
},
computed: {

// Minimum left value for the bubble so that it stays inside the editor.
// the width of the menububble changes depending on its state
// during the bubblePosition calculation it has not been rendered yet.
// so we have to hard code the minimum.
minLeft() {
if (this.linkMenuIsActive || !this.editor.isActive.link()) {
return 150
} else {
return 225
}
},

},
methods: {
showLinkMenu(attrs) {
this.linkUrl = attrs.href
Expand Down Expand Up @@ -166,7 +156,8 @@ export default {
this.hideLinkMenu()
},
bubblePosition(menu) {
const left = Math.max(this.minLeft, menu.left)
const maxLeft = document.getElementById('editor').offsetWidth - MAX_BUBBLE_WIDTH
const left = Math.min(maxLeft, menu.left - (MAX_BUBBLE_WIDTH / 2))
const offset = this.contentWrapper?.scrollTop || 0
return {
top: `${menu.top + offset + 5}px`,
Expand All @@ -192,7 +183,6 @@ export default {
margin-left: 10px;
visibility: hidden;
opacity: 0;
transform: translateX(-50%);
transition: opacity 0.2s, visibility 0.2s;
height: 44px;

Expand Down