beenull/visualsubnetcalc
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add color palette picker

Browse source
This commit is contained in:
Caesar Kabalan 2023-05-22 22:15:37 -07:00
parent b54b564fc5
commit 64d30fb40e
No known key found for this signature in database
GPG key ID: DDFEF5FF6CFAB608
3 changed files with 61 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
dist/index.html vendored
View file

@ -95,19 +95,24 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div id="color_palette"> <div id="bottom_nav">
<div id="palette_picker_1"></div> <div class="d-inline-block align-top pt-1" id="colors_word_open"><span>Colors &#187;</span></div>
<div id="palette_picker_2"></div> <div class="d-inline-block d-none" id="color_palette">
<div id="palette_picker_3"></div> <div id="palette_picker_1"></div>
<div id="palette_picker_4"></div> <div id="palette_picker_2"></div>
<div id="palette_picker_5"></div> <div id="palette_picker_3"></div>
<div id="palette_picker_6"></div> <div id="palette_picker_4"></div>
<div id="palette_picker_7"></div> <div id="palette_picker_5"></div>
<div id="palette_picker_8"></div> <div id="palette_picker_6"></div>
<div id="palette_picker_9"></div> <div id="palette_picker_7"></div>
<div id="palette_picker_10"></div> <div id="palette_picker_8"></div>
<div id="palette_picker_9"></div>
<div id="palette_picker_10"></div>
</div>
<div class="d-inline-block align-top align-top pt-1 ps-2 d-none" id="colors_word_close"><span>&#171; Colors</span></div>
</div> </div>
<div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true"> <div class="modal fade" id="notifyModal" tabindex="-1" aria-labelledby="notifyModalLabel" aria-hidden="true">
<div class="modal-dialog modal-md"> <div class="modal-dialog modal-md">
<div class="modal-content alert-warning"> <div class="modal-content alert-warning">

29
dist/main.css vendored
View file

@ -39,12 +39,39 @@
--subpal-1-10: #ffffffff; --subpal-1-10: #ffffffff;
} }
#bottom_nav {
height:2rem;
}
#bottom_nav span {
border-bottom:1px black dotted;
}
#color_palette {
min-width: 0rem;
}
#color_palette #colors_word_close {
line-height: 2rem;
}
#color_palette #colors_word_open {
display:inline-block;
height:2rem;
cursor:pointer;
white-space: nowrap;
}
#color_palette div { #color_palette div {
display:inline-block; display:inline-block;
height:2rem; height:2rem;
cursor:pointer;
white-space: nowrap;
}
#color_palette div[id^='palette_picker_'] {
width:2rem; width:2rem;
border:1px solid; border:1px solid;
cursor:pointer;
} }
#color_palette #palette_picker_1 { #color_palette #palette_picker_1 {

19
dist/main.js vendored
View file

@ -18,7 +18,7 @@ let infoColumnCount = 5
let operatingMode = 'NORMAL' let operatingMode = 'NORMAL'
let noteTimeout; let noteTimeout;
let minSubnetSize = 30 let minSubnetSize = 30
let inflightColor = '#ffffff' let inflightColor = 'NONE'
$('input#network,input#netsize').on('input', function() { $('input#network,input#netsize').on('input', function() {
$('#input_form')[0].classList.add('was-validated'); $('#input_form')[0].classList.add('was-validated');
@ -29,7 +29,9 @@ $('#color_palette div').on('click', function() {
}) })
$('#calcbody').on('click', '.row_address, .row_range, .row_usable, .row_hosts, .note', function(event) { $('#calcbody').on('click', '.row_address, .row_range, .row_usable, .row_hosts, .note', function(event) {
$(this).parent().css('background-color', inflightColor) if (inflightColor !== 'NONE') {
$(this).parent().css('background-color', inflightColor)
}
}) })
$('#btn_go').on('click', function() { $('#btn_go').on('click', function() {
@ -40,6 +42,19 @@ $('#importBtn').on('click', function() {
importConfig($('#importExportArea').val()) importConfig($('#importExportArea').val())
}) })
$('#bottom_nav #colors_word_open').on('click', function() {
$('#bottom_nav #color_palette').removeClass('d-none');
$('#bottom_nav #colors_word_close').removeClass('d-none');
$('#bottom_nav #colors_word_open').addClass('d-none');
})
$('#bottom_nav #colors_word_close').on('click', function() {
$('#bottom_nav #color_palette').addClass('d-none');
$('#bottom_nav #colors_word_close').addClass('d-none');
$('#bottom_nav #colors_word_open').removeClass('d-none');
inflightColor = 'NONE'
})
$('#btn_import_export').on('click', function() { $('#btn_import_export').on('click', function() {
$('#importExportArea').val(JSON.stringify(exportConfig(), null, 2)) $('#importExportArea').val(JSON.stringify(exportConfig(), null, 2))