Add separate drag handle for prompt manager on touch screen Fixes #2239
| @@ -271,6 +271,24 @@ | |||
| 271 | opacity: 0.8; | 271 | opacity: 0.8; |
| 272 | } | 272 | } |
| 273 | 273 | ||
| 274 | #completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle:not(.ui-sortable-handle) { | ||
| 275 | display: none; | ||
| 276 | } | ||
| 277 | |||
| 278 | #completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt:has(.drag-handle.ui-sortable-handle) { | ||
| 279 | position: relative; | ||
| 280 | padding-left: 20px; | ||
| 281 | } | ||
| 282 | |||
| 283 | #completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle { | ||
| 284 | position: absolute; | ||
| 285 | height: 100%; | ||
| 286 | top: 0; | ||
| 287 | padding: 0 5px; | ||
| 288 | display: flex; | ||
| 289 | align-items: center; | ||
| 290 | } | ||
| 291 | |||
| 274 | #completion_prompt_manager_footer_append_prompt { | 292 | #completion_prompt_manager_footer_append_prompt { |
| 275 | font-size: 1em; | 293 | font-size: 1em; |
| 276 | } | 294 | } |
| @@ -11,6 +11,7 @@ import { debounce_timeout } from './constants.js'; | |||
| 11 | import { renderTemplateAsync } from './templates.js'; | 11 | import { renderTemplateAsync } from './templates.js'; |
| 12 | import { Popup } from './popup.js'; | 12 | import { Popup } from './popup.js'; |
| 13 | import { t } from './i18n.js'; | 13 | import { t } from './i18n.js'; |
| 14 | import { isMobile } from './RossAscends-mods.js'; | ||
| 14 | 15 | ||
| 15 | function debouncePromise(func, delay) { | 16 | function debouncePromise(func, delay) { |
| 16 | let timeoutId; | 17 | let timeoutId; |
| @@ -1562,6 +1563,7 @@ class PromptManager { | |||
| 1562 | 1563 | ||
| 1563 | listItemHtml += ` | 1564 | listItemHtml += ` |
| 1564 | <li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${escapeHtml(prompt.identifier)}"> | 1565 | <li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${escapeHtml(prompt.identifier)}"> |
| 1566 | <span class="drag-handle">☰</span> | ||
| 1565 | <span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}"> | 1567 | <span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}"> |
| 1566 | ${isMarkerPrompt ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''} | 1568 | ${isMarkerPrompt ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''} |
| 1567 | ${isSystemPrompt ? '<span class="fa-fw fa-solid fa-square-poll-horizontal" title="Global Prompt"></span>' : ''} | 1569 | ${isSystemPrompt ? '<span class="fa-fw fa-solid fa-square-poll-horizontal" title="Global Prompt"></span>' : ''} |
| @@ -1741,6 +1743,7 @@ class PromptManager { | |||
| 1741 | makeDraggable() { | 1743 | makeDraggable() { |
| 1742 | $(`#${this.configuration.prefix}prompt_manager_list`).sortable({ | 1744 | $(`#${this.configuration.prefix}prompt_manager_list`).sortable({ |
| 1743 | delay: this.configuration.sortableDelay, | 1745 | delay: this.configuration.sortableDelay, |
| 1746 | handle: isMobile() ? '.drag-handle' : null, | ||
| 1744 | items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`, | 1747 | items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`, |
| 1745 | update: (event, ui) => { | 1748 | update: (event, ui) => { |
| 1746 | const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter); | 1749 | const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter); |