hamx/DrawDiagrams
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

FIX: hide color palette

Browse Source
This commit is contained in:
PatryKania
2025-11-22 10:36:44 +01:00
parent cd13d21e5f
commit 1541d62bb5
2 changed files with 25 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
index.html
View File

@@ -23,9 +23,12 @@
<button id="btn-delete">Usuń</button> <button id="btn-delete">Usuń</button>
<button id="btn-copy">Kopiuj</button> <button id="btn-copy">Kopiuj</button>
<button id="btn-paste">Wklej</button> <button id="btn-paste">Wklej</button>
<button id="btn-connect">Połącz</button> <!-- DODANE --> <button id="btn-connect">Połącz</button>
<div class="color-wrapper"><!-- DODANE -->
<button id="btn-change-color">Kolor</button> <!-- DODANE --> <button id="btn-change-color">Kolor</button> <!-- DODANE -->
</div> <div id="color-palette" style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
</div>
</div>
<p>Zoom</p> <p>Zoom</p>
<div class="zoom-wrapper toolbar-wrapper"> <div class="zoom-wrapper toolbar-wrapper">
<button id="zoom-in">+</button> <button id="zoom-in">+</button>
@@ -39,7 +42,7 @@
</div> </div>
<!-- DODANY KONTAINER DLA PALETY KOLORÓW --> <!-- DODANY KONTAINER DLA PALETY KOLORÓW -->
<div id="color-palette" style="position:absolute; display:none; padding:8px; background:#fff; border:1px solid #ccc; border-radius:6px; gap:6px; z-index:2000;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script> <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
@@ -73,7 +76,7 @@
const paletteColors = ['#FF4B4B','#FFA500','#FFD700','#4CAF50','#00BCD4','#2196F3','#9C27B0','#795548','#000000']; const paletteColors = ['#FF4B4B','#FFA500','#FFD700','#4CAF50','#00BCD4','#2196F3','#9C27B0','#795548','#000000'];
const $palette = $('#color-palette'); const $palette = $('#color-palette');
$palette.css({ display:'grid', gridTemplateColumns:'repeat(3,28px)' }); $palette.css({ gridTemplateColumns:'repeat(3,28px)' });
paletteColors.forEach(c => { paletteColors.forEach(c => {
// ZMIANA TUTAJ: Dodajemy width, height, border i cursor // ZMIANA TUTAJ: Dodajemy width, height, border i cursor
@@ -101,11 +104,12 @@
}); });
$('#btn-change-color').on('click', function() { $('#btn-change-color').on('click', function() {
const off = $(this).offset(); $palette.toggleClass('active');
$palette.css({ top: off.top + 36, left: off.left }).toggle();
}); });
$(document).on('click', function(e) { $(document).on('click', function(e) {
if (!$(e.target).closest('#color-palette,#btn-change-color').length) $palette.hide(); if (!$(e.target).closest('#color-palette,#btn-change-color').length)
if($palette.hasClass('active'))
$palette.toggleClass('active');
}); });

14
style.css
View File

@@ -262,3 +262,17 @@ body {
top: auto; top: auto;
} }
} }
/* color wrapper */
.color-wrapper{
display: flex;
flex-direction: column;
position: relative;
}
#color-palette{
display:none;
top: 41px;
}
#color-palette.active{
display: grid!important;
}