Add separate drag handle for prompt manager on touch screen Fixes #2239

f8c6a62c23b422cf87e67777c0a0649fc16a5673

Cohee <18619528+Cohee1207@users.noreply.github.com>

public/css/promptmanager.css+18 -0 Viewed

     opacity: 0.8;
+}
 +#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle:not(.ui-sortable-handle) {
 +    display: none;
 +}
++
 +#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt:has(.drag-handle.ui-sortable-handle) {
 +    position: relative;
 +    padding-left: 20px;
 +}
++
 +#completion_prompt_manager #completion_prompt_manager_list .completion_prompt_manager_prompt .drag-handle {
 +    position: absolute;
 +    height: 100%;
 +    top: 0;
 +    padding: 0 5px;
 +    display: flex;
 +    align-items: center;
 +}
++
 #completion_prompt_manager_footer_append_prompt {
     font-size: 1em;
+}

public/scripts/PromptManager.js+3 -0 Viewed

 import { renderTemplateAsync } from './templates.js';
 import { Popup } from './popup.js';
 import { t } from './i18n.js';
 +import { isMobile } from './RossAscends-mods.js';
 function debouncePromise(func, delay) {
     let timeoutId;

             listItemHtml += `
                 <li class="${prefix}prompt_manager_prompt ${draggableClass} ${enabledClass} ${markerClass} ${importantClass}" data-pm-identifier="${escapeHtml(prompt.identifier)}">
 +                    <span class="drag-handle">☰</span>
                     <span class="${prefix}prompt_manager_prompt_name" data-pm-name="${encodedName}">
                         ${isMarkerPrompt ? '<span class="fa-fw fa-solid fa-thumb-tack" title="Marker"></span>' : ''}
                         ${isSystemPrompt ? '<span class="fa-fw fa-solid fa-square-poll-horizontal" title="Global Prompt"></span>' : ''}

     makeDraggable() {
         $(`#${this.configuration.prefix}prompt_manager_list`).sortable({
             delay: this.configuration.sortableDelay,
 +            handle: isMobile() ? '.drag-handle' : null,
             items: `.${this.configuration.prefix}prompt_manager_prompt_draggable`,
             update: (event, ui) => {
                 const promptOrder = this.getPromptOrderForCharacter(this.activeCharacter);