aheh/mirotalk
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[mirotalk] - improve wb shortcuts popup

Browse Source
This commit is contained in:
Miroslav Pejic
2025-12-19 23:13:02 +01:00
parent 9926cc417a
commit 39118bd4ee
9 changed files with 98 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.env.template
+1 -1
View File
@@ -1,5 +1,5 @@
# ====================================================
# MiroTalk P2P v.1.6.90 - Environment Configuration
# MiroTalk P2P v.1.6.91 - Environment Configuration
# ====================================================
# App environment
app/src/config.template.js
+1 -1
View File
@@ -2,7 +2,7 @@
/**
* ==============================================
* MiroTalk P2P v.1.6.90 - Configuration File
* MiroTalk P2P v.1.6.91 - Configuration File
* ==============================================
*
* Branding and customizations require a license:
app/src/server.js
+1 -1
View File
@@ -45,7 +45,7 @@ dependencies: {
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.6.90
* @version 1.6.91
*
*/
package-lock.json
Generated
+2 -2
View File
@@ -1,12 +1,12 @@
{
"name": "mirotalk",
"version": "1.6.90",
"version": "1.6.91",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "mirotalk",
"version": "1.6.90",
"version": "1.6.91",
"license": "AGPL-3.0",
"dependencies": {
"@mattermost/client": "11.2.0",
package.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"name": "mirotalk",
"version": "1.6.90",
"version": "1.6.91",
"description": "A free WebRTC browser-based video call",
"main": "server.js",
"scripts": {
public/css/whiteboard.css
+51 -37
View File
@@ -230,24 +230,25 @@
text-align: left;
font-family: 'Segoe UI', Arial, sans-serif;
background: var(--body-bg);
padding: 1.5rem;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
max-width: 600px;
padding: 0.5rem 0.7rem;
border-radius: 10px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
max-width: 340px;
margin: 0 auto;
font-size: 0.85em;
}
.wb-shortcuts-title {
margin-top: 1.5rem;
margin-bottom: 0.8rem;
font-size: 1.3rem;
font-weight: 700;
color: #ffd700;
margin-top: 1rem;
margin-bottom: 0.5rem;
font-size: 1.05rem;
font-weight: 600;
color: var(--text-color);
display: flex;
align-items: center;
gap: 0.6rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid rgba(255, 215, 0, 0.3);
gap: 0.5rem;
padding-bottom: 0.3rem;
border-bottom: 1px solid var(--border-color, #e0e0e0);
}
.wb-shortcuts-title:first-child {
@@ -255,59 +256,72 @@
}
.wb-shortcuts-title i {
color: #ffa500;
font-size: 1.2rem;
color: var(--text-color);
font-size: 1rem;
}
.wb-shortcuts-code {
background: var(--body-bg);
padding: 1rem 1rem;
border-radius: 8px;
padding: 0.5rem 0.5rem;
border-radius: 6px;
white-space: pre;
overflow-x: auto;
font-family: 'Courier New', monospace;
font-size: 0.95rem;
line-height: 1.8;
font-size: 0.8rem;
line-height: 1.4;
color: var(--text-color);
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
filter: brightness(0.85);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.13);
filter: brightness(0.92);
}
.wb-shortcuts-text {
color: #66beff;
font-weight: 700;
font-size: 1.1rem;
letter-spacing: 0.03em;
background: linear-gradient(135deg, rgba(102, 190, 255, 0.15), rgba(102, 190, 255, 0.08));
padding: 8px 16px;
border-radius: 8px;
font-weight: 600;
font-size: 0.9rem;
letter-spacing: 0.02em;
background: linear-gradient(135deg, rgba(102, 190, 255, 0.11), rgba(102, 190, 255, 0.06));
padding: 4px 10px;
border-radius: 6px;
display: inline-block;
box-shadow: 0 2px 8px rgba(102, 190, 255, 0.1);
box-shadow: 0 1px 4px rgba(102, 190, 255, 0.07);
}
.wb-shortcuts-list {
list-style: none;
padding-left: 0;
background: var(--body-bg);
border-radius: 8px;
padding: 0.8rem;
filter: brightness(0.9);
border-radius: 6px;
padding: 0.3rem 0.2rem;
filter: brightness(0.97);
}
.wb-shortcuts-list li {
margin: 0.6rem 0;
padding: 0.5rem 0.8rem;
background: rgba(255, 255, 255, 0.05);
border-radius: 6px;
margin: 0.3rem 0;
padding: 0.3rem 0.5rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 4px;
color: var(--text-color);
font-weight: 500;
font-size: 1rem;
font-size: 0.85rem;
transition: all 0.2s ease;
}
.wb-shortcuts-list li:hover {
background: rgba(255, 215, 0, 0.15);
border-left: 3px solid #ffd700;
background: rgba(0, 0, 0, 0.04);
border-left: 2px solid var(--border-color, #e0e0e0);
}
.shortcut-section {
margin-top: 20px;
margin-bottom: 20px;
}
/* Whiteboard shortcut OS label and separator styles */
.wb-shortcut-os {
color: #888;
font-size: 0.92em;
margin-left: 0.1em;
margin-right: 0.1em;
}
/* Sticky Note Dialog Styles */
public/js/brand.js
+1 -1
View File
@@ -77,7 +77,7 @@ let brand = {
},
about: {
imageUrl: '../images/mirotalk-logo.gif',
title: 'WebRTC P2P v1.6.90',
title: 'WebRTC P2P v1.6.91',
html: `
<button
id="support-button"
public/js/client.js
+2 -2
View File
@@ -15,7 +15,7 @@
* @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
* @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
* @author Miroslav Pejic - miroslav.pejic.85@gmail.com
* @version 1.6.90
* @version 1.6.91
*
*/
@@ -13532,7 +13532,7 @@ function showAbout() {
Swal.fire({
background: swBg,
position: 'center',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.90',
title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.91',
imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
customClass: { image: 'img-about' },
html: `
public/views/client.html
+38 -26
View File
@@ -1085,34 +1085,46 @@ access to use this app.
<canvas id="wbCanvas"></canvas>
<div id="whiteboardShortcutsContent">
<div class="wb-shortcuts-container">
<h3 class="wb-shortcuts-title"><i class="fas fa-keyboard"></i> General</h3>
<pre class="wb-shortcuts-code">
Clone: ⌘/Ctrl + C
Erase: ⌘/Ctrl + X
Undo: ⌘/Ctrl + Z
Redo: ⌘/Ctrl + Shift + Z or ⌘/Ctrl + Y</pre
>
<h3 class="wb-shortcuts-title"><i class="fas fa-keyboard"></i> General Shortcuts</h3>
<ul class="wb-shortcuts-list">
<li><strong>Clone:</strong> <span class="wb-shortcut-key">⌘/Ctrl + C</span></li>
<li><strong>Erase:</strong> <span class="wb-shortcut-key">⌘/Ctrl + X</span></li>
<li><strong>Undo:</strong> <span class="wb-shortcut-key">⌘/Ctrl + Z</span></li>
<li>
<strong>Redo:</strong> <span class="wb-shortcut-key">⌘/Ctrl + Shift + Z</span> or
<span class="wb-shortcut-key">⌘/Ctrl + Y</span>
</li>
<li>
<strong>Delete/Remove:</strong> <span class="wb-shortcut-key">Delete</span> or
<span class="wb-shortcut-key">Backspace</span>
</li>
</ul>
<h3 class="wb-shortcuts-title"><i class="fas fa-pencil-alt"></i> Create Objects</h3>
<p class="wb-shortcuts-text"><strong>Hold:</strong></p>
<ul class="wb-shortcuts-list">
<li>• Alt + Cmd (Mac)</li>
<li>• Alt + Ctrl (Win/Linux)</li>
</ul>
<p class="wb-shortcuts-text"><strong>Then press:</strong></p>
<pre class="wb-shortcuts-code">
T = Text
L = Line
C = Circle
R = Rectangle
G = Triangle
N = Sticky Note
U = Image URL
I = Image
P = PDF
V = Vanishing Pen
Q = Clear all</pre
>
<div class="wb-shortcuts-subsection">
<div class="shortcut-section">
<strong>Hold:</strong>
<span class="wb-shortcut-key">Alt + Cmd</span>
<span class="wb-shortcut-os">(Mac)</span>
<span>or</span>
<span class="wb-shortcut-key">Alt + Ctrl</span>
<span class="wb-shortcut-os">(Win/Linux)</span>
<span><strong>Then press:</strong></span>
</div>
<ul class="wb-shortcuts-list">
<li><span class="wb-shortcut-key">T</span> = Text</li>
<li><span class="wb-shortcut-key">L</span> = Line</li>
<li><span class="wb-shortcut-key">C</span> = Circle</li>
<li><span class="wb-shortcut-key">R</span> = Rectangle</li>
<li><span class="wb-shortcut-key">G</span> = Triangle</li>
<li><span class="wb-shortcut-key">N</span> = Sticky Note</li>
<li><span class="wb-shortcut-key">U</span> = Image URL</li>
<li><span class="wb-shortcut-key">I</span> = Image</li>
<li><span class="wb-shortcut-key">P</span> = PDF</li>
<li><span class="wb-shortcut-key">V</span> = Vanishing Pen</li>
<li><span class="wb-shortcut-key">Q</span> = Clear all</li>
</ul>
</div>
</div>
</div>
</main>