@samitouri / QOSami_Agents_Zero-2
Code Commits Issues Pulls Sessions CI/CD
main
main
html 154 lines 5.91 KB
Raw
1 <html>
2 <head>
3 <script type="module">
4 import { store } from "/components/modals/full-screen-input/full-screen-store.js";
5 </script>
6 </head>
7 <body>
8 <div x-data>
9 <template x-if="$store.fullScreenInputModal">
10 <div id="fullScreenInputModal" x-data>
11 <template x-teleport="body">
12 <div x-show="$store.fullScreenInputModal.isOpen" class="modal-overlay"
13 @click.self="$store.fullScreenInputModal.handleClose()"
14 @keydown.escape.window="$store.fullScreenInputModal.isOpen && $store.fullScreenInputModal.handleClose()"
15 x-transition>
16 <div class="modal-container full-screen-input-modal">
17 <div class="modal-content">
18 <button class="modal-close" @click="$store.fullScreenInputModal.handleClose()">&times;</button>
19
20 <div class="editor-toolbar">
21 <div class="toolbar-group">
22 <button class="toolbar-button" @click="$store.fullScreenInputModal.undo()" :disabled="!$store.fullScreenInputModal.canUndo" title="Undo (Ctrl+Z)">
23 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24 <path d="M3 7v6h6"></path>
25 <path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"></path>
26 </svg>
27 </button>
28 <button class="toolbar-button" @click="$store.fullScreenInputModal.redo()" :disabled="!$store.fullScreenInputModal.canRedo" title="Redo (Ctrl+Shift+Z)">
29 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
30 <path d="M21 7v6h-6"></path>
31 <path d="M3 17a9 9 0 019-9 9 9 0 016 2.3l3 2.7"></path>
32 </svg>
33 </button>
34 </div>
35 <div class="toolbar-group">
36 <button class="toolbar-button" @click="$confirmClick($event, () => $store.fullScreenInputModal.clearText())" title="Clear Text">
37 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
38 <path d="M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"></path>
39 <line x1="10" y1="11" x2="10" y2="17"></line>
40 <line x1="14" y1="11" x2="14" y2="17"></line>
41 </svg>
42 </button>
43 <button class="toolbar-button" @click="$store.fullScreenInputModal.toggleWrap()" :class="{ active: $store.fullScreenInputModal.wordWrap }" title="Toggle Word Wrap">
44 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
45 <path d="M3 6h18M3 12h15l3 3-3 3M3 18h18"></path>
46 </svg>
47 </button>
48 </div>
49 </div>
50
51 <textarea id="full-screen-input" x-model="$store.fullScreenInputModal.inputText"
52 placeholder="Type your message here..."
53 @keydown.ctrl.enter="$store.fullScreenInputModal.handleClose()"
54 @keydown.ctrl.z.prevent="$store.fullScreenInputModal.undo()"
55 @keydown.ctrl.shift.z.prevent="$store.fullScreenInputModal.redo()"
56 :style="{ 'white-space': $store.fullScreenInputModal.wordWrap ? 'pre-wrap' : 'pre' }"
57 @input="$store.fullScreenInputModal.updateHistory()"></textarea>
58 </div>
59 <div class="modal-footer">
60 <div id="buttons-container">
61 <button class="btn btn-ok" @click="$store.fullScreenInputModal.handleClose()">Done (Ctrl+Enter)</button>
62 </div>
63 </div>
64 </div>
65 </div>
66 </template>
67 </div>
68 </template>
69 </div>
70
71
72 <style>
73 /* Full Screen Input Modal Styles */
74 .full-screen-input-modal {
75 width: 90%;
76 max-width: 800px;
77 max-height: 80vh;
78 position: relative;
79 padding: 0;
80 background-color: rgb(20, 20, 20, 0.96);
81 border: 1.5px solid var(--color-border);
82 }
83 .full-screen-input-modal .modal-content {
84 height: calc(80vh);
85 padding: 0;
86 margin: 0;
87 overflow: hidden;
88 }
89 .full-screen-input-modal .modal-footer {
90 background: transparent;
91 max-height: 50px;
92 }
93 #full-screen-input {
94 width: 100%;
95 height: calc(100% - 50px);
96 border: none;
97 background-color: var(--color-background);
98 color: var(--color-text);
99 font-family: "Roboto Mono", monospace;
100 font-optical-sizing: auto;
101 font-size: 0.955rem;
102 padding: 1.2rem 1rem;
103 resize: none;
104 outline: none;
105 }
106 .light-mode .full-screen-input-modal {
107 background-color: rgb(220, 220, 220, 0.86);
108 }
109 .full-screen-input-modal .modal-footer {
110 padding: 1rem 0;
111 border-top: none;
112 background: transparent;
113 }
114 .full-screen-input-modal h2 {
115 margin: 0;
116 padding: 0;
117 font-size: 1.1rem;
118 color: var(--color-text);
119 opacity: 0.8;
120 }
121 .full-screen-input-modal .modal-close {
122 position: absolute;
123 top: 1.2rem;
124 right: 1rem;
125 font-size: 1.5rem;
126 padding: 0 0.5rem;
127 line-height: 0.8;
128 }
129 .full-screen-input-modal .btn-ok {
130 margin-right: 1rem;
131 }
132 #full-screen-input::-webkit-scrollbar {
133 width: 6px;
134 height: 6px;
135 }
136 #full-screen-input::-webkit-scrollbar-track {
137 background: transparent;
138 margin: 14px;
139 border-radius: 6px;
140 }
141 #full-screen-input::-webkit-scrollbar-thumb {
142 background-color: rgba(155, 155, 155, 0.5);
143 border-radius: 6px;
144 -webkit-transition: background-color 0.2s ease;
145 transition: background-color 0.2s ease;
146 }
147 #full-screen-input::-webkit-scrollbar-thumb:hover {
148 background-color: rgba(155, 155, 155, 0.7);
149 }
150 </style>
151 </body>
152 </html>
153
154