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