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/modules/opus/ui/components/MenuBar.lua

@@ -1,28 +1,15 @@
 local class = require('opus.class')
 local UI    = require('opus.ui')
 
-local colors = _G.colors
-
-local function getPosition(element)
-	local x, y = 1, 1
-	repeat
-		x = element.x + x - 1
-		y = element.y + y - 1
-		element = element.parent
-	until not element
-	return x, y
-end
-
 UI.MenuBar = class(UI.Window)
 UI.MenuBar.defaults = {
 	UIElement = 'MenuBar',
 	buttons = { },
 	height = 1,
-	backgroundColor = colors.lightGray,
-	textColor = colors.black,
+	backgroundColor = 'secondary',
+	textColor = 'black',
 	spacing = 2,
 	lastx = 1,
-	showBackButton = false,
 	buttonClass = 'MenuItem',
 }
 function UI.MenuBar:postInit()
@@ -62,10 +49,6 @@ function UI.MenuBar:addButtons(buttons)
 			else
 				table.insert(self.children, button)
 			end
-
-			if button.dropdown then
-				button.dropmenu = UI.DropMenu { buttons = button.dropdown }
-			end
 		end
 	end
 	if self.parent then
@@ -78,23 +61,28 @@ function UI.MenuBar:getActive(menuItem)
 end
 
 function UI.MenuBar:eventHandler(event)
-	if event.type == 'button_press' and event.button.dropmenu then
-		if event.button.dropmenu.enabled then
-			event.button.dropmenu:hide()
-			self:refocus()
-			return true
-		else
-			local x, y = getPosition(event.button)
-			if x + event.button.dropmenu.width > self.width then
-				x = self.width - event.button.dropmenu.width + 1
-			end
-			for _,c in pairs(event.button.dropmenu.children) do
-				if not c.spacer then
-					c.inactive = not self:getActive(c)
-				end
-			end
-			event.button.dropmenu:show(x, y + 1)
+	if event.type == 'button_press' and event.button.dropdown then
+		local function getPosition(element)
+			local x, y = 1, 1
+			repeat
+				x = element.x + x - 1
+				y = element.y + y - 1
+				element = element.parent
+			until not element
+			return x, y
 		end
+
+		local x, y = getPosition(event.button)
+
+		local menu = UI.DropMenu {
+			buttons = event.button.dropdown,
+			x = x,
+			y = y + 1,
+			lastFocus = event.button.uid,
+			menuUid = self.uid,
+		}
+		self.parent:add({ dropmenu = menu })
+
 		return true
 	end
 end
@@ -103,7 +91,8 @@ function UI.MenuBar.example()
 	return UI.MenuBar {
 		buttons = {
 			{ text = 'Choice1', event = 'event1' },
-			{ text = 'Choice2', event = 'event2' },
+			{ text = 'Choice2', event = 'event2', inactive = true },
+			{ text = 'Choice3', event = 'event3' },
 		}
 	}
 end