adapt color dialog to new style

This also adds a palette to the color dialog so players can pick a color
without typing in the hexadecimal number of it.

Addresses https://gitlab.com/4w/mtimer/-/issues/16

locale/mtimer.de.tr

@@ -1,7 +1,6 @@
 # textdomain: mtimer
 
 # mTimer Configuration Names
-Color=Farbe
 Ingame Time Format=Spielzeit-Format
 Open Main Menu=Hauptmenü öffnen
 Real-World Time Format=Realzeit-Format
@@ -35,9 +34,14 @@ left=links
 center=zentriert
 right=rechts
 
+# Dialog: Color
+Color=Farbe
+Current color: @1=Aktuelle Farbe: @1
+Use `@1` format only!=Ausschließlich `@1`-Format benutzen!
+Set a predefined color=Eine vordefinierte Farbe einstellen
+
 # Information & Warnings
 30 minutes @= 0.5, 60 minutes @= 1=30 Minuten @= 0.5, 60 Minuten @= 1
-Use `@1` format only!=Ausschließlich `@1`-Format benutzen!
 “Arbitrary” values are possible.=Es sind „beliebige“ Werte möglich.
 
 # Named Times

system/formspecs/formspec_creation.lua

@@ -97,22 +97,69 @@ end
 mtimer.dialog.set_color = function (player_name)
     local player = minetest.get_player_by_name(player_name)
     local color = player:get_meta():get_string(m.meta.color.key)
+    local palette = {}
+    local col = 0
+    local row = 1
 
-    local hexcolor = table.concat({
+    local hexformat = table.concat({
         '#',
         minetest.colorize('#ce5c00', 'rr'),
         minetest.colorize('#4e9a06', 'gg'),
         minetest.colorize('#729fcf', 'bb')
     })
 
+    -- Tango palette
+    --
+    -- @see http://tango.freedesktop.org/Tango_Icon_Theme_Guidelines
+    local palette_entries = {
+        'fce94f', 'edd400', 'c4a000', 'fcaf3e', 'f57900', 'ce5c00', 'e9b96e',
+        'c17d11', '8f5902', '8ae234', '73d216', '4e9a06', '729fcf', '3465a4',
+        '204a87', 'ad7fa8', '75507b', '5c3566', 'ef2929', 'cc0000', 'a40000',
+        'eeeeec', 'd3d7cf', 'babdb6', '888a85', '555753', '2e3436', '000000',
+        'ff0000', '00ff00', '0000ff', 'ffff00', '00ffff', 'ff00ff', 'c0c0c0',
+        '808080', '800000', '808000', '008000', '800080', '008080', '000080',
+    }
+
+    for _,color in pairs(palette_entries) do
+        local cb_height = 0.6
+        local cb_width = 1.39
+        local cb_style = 'style[+name;bgcolor=#+color;textcolor=#+color]'
+        local cb_button = 'button[+left,+top;+width,+height;+name;+label]'
+        local cb_complete = cb_style..' '..cb_button
+
+        col = col + 1
+        if col > 7 then
+            col = 1
+            row = row + 1
+        end
+
+        table.insert(palette, ((cb_complete):gsub('%+%w+', {
+            ['+top'] = (row - 1) * (cb_height + 0.05),
+            ['+left'] = (col - 1) * (cb_width + 0.05),
+            ['+width'] = cb_width,
+            ['+height'] = cb_height,
+            ['+name'] = 'set_color',
+            ['+color'] = color,
+            ['+label'] = color
+        })))
+    end
+
     mtimer.show_formspec('mtimer:set_color', {
         title = S('Color'),
         show_to = player_name,
+        width = 10,
+        height = 6.2,
         formspec = {
             'field_close_on_enter[color;false]',
             'field[0,0;3,0.5;color;;'..color..']',
             'box[3.25,0;0.5,0.5;'..color..'ff]',
-            'label[0.025,0.75;'..S('Use `@1` format only!', hexcolor)..']'
+            'tooltip[3.25,0;0.5,0.5;'..S('Current color: @1', color)..']',
+            'label[0,1;'..S('Use `@1` format only!', hexformat)..']',
+            'container[0,1.85]',
+            '  box[0,-0.4;+contentWidth,0.04;#ffffff]',
+            '  label[0,0;'..esc(S('Set a predefined color'))..']',
+            '  container[0,0.4]'..table.concat(palette, ' ')..'container_end[]',
+            'container_end[]'
         }
     })
 end

system/on_receive_fields.lua

@@ -62,6 +62,12 @@ minetest.register_on_player_receive_fields(function(player, formname, fields)
         local attr = m.meta.color
         local color = ''
 
+        -- Set fields.color to predefined color if a button was clicked
+        if fields.set_color ~= nil then
+            fields.color = '#'..fields.set_color
+        end
+
+        -- Validate the given color and set it
         if fields.color then
             local valid = fields.color:match('^#'..('[0-9a-fA-F]'):rep(6)..'$')
             local color = valid and fields.color or attr.default