Ui enhancements 2.0 (#31)

* canvas overhaul

* minor tweaks

* list mode for overview

* bugfixes + tweaks for editor 2.0

* minor tweaks

* more editor work

* refactor + new transitions

* use layout() where appropriate and cleanup

* mouse triple click + textEntry scroll ind

* cleanup

* cleanup + theme editor

* color rework + cleanup

* changes for deprecated ui methods

* can now use named colors

sys/apps/system/settings.lua

@@ -2,48 +2,94 @@ local UI = require('opus.ui')
 
 local settings = _G.settings
 
-if settings then
-	local settingsTab = UI.Tab {
-		tabTitle = 'Settings',
-		description = 'Computercraft configurable settings',
-		grid = UI.Grid {
-			y = 2,
-			autospace = true,
-			sortColumn = 'name',
-			columns = {
-				{ heading = 'Setting',   key = 'name' },
-				{ heading = 'Value', key = 'value'  },
-			},
-		},
-	}
+local transform = {
+	string = tostring,
+	number = tonumber,
+}
 
-	function settingsTab:enable()
+return settings and UI.Tab {
+	tabTitle = 'Settings',
+	description = 'Computercraft settings',
+	grid = UI.Grid {
+		x = 2, y = 2, ex = -2, ey = -2,
+		sortColumn = 'name',
+		columns = {
+			{ heading = 'Setting',   key = 'name' },
+			{ heading = 'Value', key = 'value'  },
+		},
+	},
+	editor = UI.SlideOut {
+		y = -6, height = 6,
+		titleBar = UI.TitleBar {
+			event = 'slide_hide',
+			title = 'Enter value',
+		},
+		form = UI.Form {
+			y = 2,
+			value = UI.TextEntry {
+				limit = 256,
+				formIndex = 1,
+				formLabel = 'Value',
+				formKey = 'value',
+			},
+			validateField = function(self, entry)
+				if entry.value then
+					return transform[self.type](entry.value)
+				end
+				return true
+			end,
+		},
+		accelerators = {
+			form_cancel = 'slide_hide',
+		},
+		show = function(self, entry)
+			self.form.type = type(entry.value) or 'string'
+			self.form:setValues(entry)
+			self.titleBar.title = entry.name
+			UI.SlideOut.show(self)
+		end,
+		eventHandler = function(self, event)
+			if event.type == 'form_complete' then
+				if not event.values.value then
+					settings.unset(event.values.name)
+					self.parent:reload()
+				else
+					event.values.value = transform[self.form.type](event.values.value)
+					settings.set(event.values.name, event.values.value)
+				end
+				self.parent.grid:draw()
+				self:hide()
+				settings.save('.settings')
+			end
+			return UI.SlideOut.eventHandler(self, event)
+		end,
+	},
+	reload = function(self)
 		local values = { }
 		for _,v in pairs(settings.getNames()) do
-			local value = settings.get(v)
-			if not value then
-				value = false
-			end
 			table.insert(values, {
 				name = v,
-				value = value,
+				value = settings.get(v) or false,
 			})
 		end
 		self.grid:setValues(values)
+		self.grid:setIndex(1)
+	end,
+	enable = function(self)
+		self:reload()
 		UI.Tab.enable(self)
-	end
-
-	function settingsTab:eventHandler(event)
+	end,
+	eventHandler = function(self, event)
 		if event.type == 'grid_select' then
-			if not event.selected.value or type(event.selected.value) == 'boolean' then
+			if type(event.selected.value) == 'boolean' then
 				event.selected.value = not event.selected.value
+				settings.set(event.selected.name, event.selected.value)
+				settings.save('.settings')
+				self.grid:draw()
+			else
+				self.editor:show(event.selected)
 			end
-			settings.set(event.selected.name, event.selected.value)
-			settings.save('.settings')
-			self.grid:draw()
 			return true
 		end
-	end
-
-	return settingsTab
-end
+	end,
+}