Merge pull request #23 from egmontkob/terminal-color-improvements

Terminal color improvements

Author: egmontkob

src/css/common.css

@@ -11,12 +11,6 @@ table.terminal {
     border: 0;
 }
 
-td.skin pre
-{
-    color: #BABABA;
-    background-color: #000000;
-}
-
 td.left, td.right
 {
     width: 2px;
@@ -31,7 +25,7 @@ td.top, td.bottom
 
 /* Editor UI */
 
-button, select{
+button#btn-apply, select#skins{
     font-size: 20px;
 }
 

src/img/alpha-stripes.png

@@ -0,0 +1,24 @@
+#!/usr/bin/python3
+
+from PIL import Image
+
+N = 10
+
+GRAY = 0xD0
+ALPHA = 0x38
+
+img = Image.new('RGBA', (2 * N, 2 * N))
+
+for y in range(2 * N):
+  for x in range(2 * N):
+
+    if (x + y) % N == 0:
+      # antialiased edge
+      alpha = ALPHA // 2
+    else:
+      on = ((x + y) // N) % 2  # 0 or 1
+      alpha = ALPHA * on       # 0 or ALPHA
+
+    img.putpixel((x, y), (GRAY, GRAY, GRAY, alpha))
+
+img.save('alpha-stripes.png', 'PNG')

src/img/alpha-stripes.py

@@ -13,12 +13,12 @@
     <script src="js/jquery-1.2.6.js" type="text/javascript"></script>
     <script src="js/ui.core.js?REV_SE-REV_MC" type="text/javascript"></script>
     <script src="js/ui.tabs.js?REV_SE-REV_MC" type="text/javascript"></script>
-    <script src="js/mc-const.js?REV_SE-REV_MC" type="text/javascript"></script>
+    <script src="js/mc-palette.js?REV_SE-REV_MC" type="text/javascript"></script>
     <script src="js/mc-css-generator.js?REV_SE-REV_MC" type="text/javascript"></script>
     <script src="js/mc-tpl.js?REV_SE-REV_MC" type="text/javascript"></script>
     <script src="js/mc-templates.js?REV_SE-REV_MC" type="text/javascript"></script>
     <script src="js/mc-utils.js?REV_SE-REV_MC" type="text/javascript"></script>
-    <script src="js/cmp-colors.js?REV_SE-REV_MC" type="text/javascript"></script>
+    <script src="js/mc-cmp-colors.js?REV_SE-REV_MC" type="text/javascript"></script>
 
     <script type="text/javascript">
         $(function () {
@@ -67,16 +67,37 @@
 
             $("select#skins").change();
 
-
             $(window).keydown(function (e) {
                 // Ctrl-Enter pressed
                 if (e.ctrlKey && e.keyCode === 13) {
                     $('#btn-apply').click();
                 }
             });
 
-            // Insert ColorsComponent
-            $('.cmp-colors').html(new ColorsComponent().render());
+            McPalette.basic_palettes.forEach(function(element, index) {
+                $('#terminal-palettes').append($('<option />').val(index).text(element.name));
+            });
+
+            $('#terminal-palettes').change(function() {
+                $('#btn-apply').click();
+                // Re-render the palette
+                $('.cmp-colors').html(new McColorsComponent().render());
+            });
+
+            $('#terminal-light').change(function() {
+                $('#btn-apply').click();
+            });
+
+            $('#terminal-bgimage').change(function() {
+                $('#btn-apply').click();
+            });
+
+            $('#terminal-boldbright').change(function() {
+                $('#btn-apply').click();
+            });
+
+            // Render the palette
+            $('.cmp-colors').html(new McColorsComponent().render());
 
             $.get('skins.json?REV_SE-REV_MC', {}, function (data) {
                 $.each(data, function (key, value) {
@@ -123,7 +144,17 @@
         <div class="skin-view-container" id="fragment-skin-6"></div>
     </div>
     <div class="mt-2 ml-2" style="width: 810px">
-        colors hint<br><br>
+        Terminal's color settings
+        <br><br>
+        Palette:
+        <select id="terminal-palettes"></select>
+        &nbsp;&nbsp;
+        <label><input type="checkbox" id="terminal-light">Light mode</label>
+        &nbsp;&nbsp;
+        <label><input type="checkbox" id="terminal-bgimage">Background image</label>
+        &nbsp;&nbsp;
+        <label><input type="checkbox" id="terminal-boldbright">First 8 colors bright when bold</label>
+        <br><br>
         <div class="cmp-colors">
             <!-- colors will be displayed here -->
         </div>

src/index.html

@@ -0,0 +1,27 @@
+class McColorsComponent
+{
+    constructor(){
+        this.template = `
+            
+        `;
+        this.onColorClick = function (colorKey, color) {
+
+        }
+    }
+
+    render(){
+        let result = '';
+        for(let i = 0; i < 256; i++){
+            if(i % 36 == 16)
+                result += `<br>`;
+            const key = 'color' + i;
+            const name = McPalette.palette[i][0];
+            const color = McPalette.palette[i][1];
+            const onclickrgblabel = i < 16 ? "RGB in this palette" : "Standard RGB";
+            const onclicktext = `Indexed name: ${key}\\nFriendly name: ${name}\\n${onclickrgblabel}: ${color}`;
+            const tooltiptext = `${key} – ${name} – ${color}`;
+            result += `<div onclick="alert('${onclicktext}')" title="${tooltiptext}" style="background-color: ${color}; display: inline-block; cursor: pointer; width: 18px; height: 18px; margin-right: 4px"></div>`;
+        }
+        return result;
+    }
+}