canvas overhaul

sys/apps/Files.lua

@@ -91,7 +91,6 @@ local Browser = UI.Page {
 	},
 	notification = UI.Notification { },
 	associations = UI.SlideOut {
-		backgroundColor = colors.cyan,
 		menuBar = UI.MenuBar {
 			buttons = {
 				{ text = 'Save',    event = 'save'    },
@@ -99,7 +98,7 @@ local Browser = UI.Page {
 			},
 		},
 		grid = UI.ScrollingGrid {
-			x = 2, ex = -6, y = 3, ey = -5,
+			x = 2, ex = -6, y = 3, ey = -8,
 			columns = {
 				{ heading = 'Extension', key = 'name'  },
 				{ heading = 'Program',   key = 'value' },
@@ -114,8 +113,11 @@ local Browser = UI.Page {
 			x = -4, y = 6,
 			text = '-', event = 'remove_entry', help = 'Remove',
 		},
+		[1] = UI.Window {
+			x = 2, y = -6, ex = -6, ey = -3,
+		},
 		form = UI.Form {
-			x = 3, y = -3, ey = -2,
+			x = 3, y = -5, ex = -7, ey = -3,
 			margin = 1,
 			manualControls = true,
 			[1] = UI.TextEntry {

sys/apps/Lua.lua

@@ -59,7 +59,6 @@ local page = UI.Page {
 		[2] = UI.Tab {
 			tabTitle = 'Output',
 			output = UI.Embedded {
-				visible = true,
 				maxScroll = 1000,
 				backgroundColor = colors.black,
 			},

sys/apps/Network.lua

@@ -74,7 +74,6 @@ local page = UI.Page {
 		},
 	},
 	help = UI.SlideOut {
-		backgroundColor = colors.cyan,
 		x = 5, ex = -5, height = 8, y = -8,
 		titleBar = UI.TitleBar {
 			title = 'Network Help',
@@ -82,7 +81,6 @@ local page = UI.Page {
 		},
 		text = UI.TextArea {
 			x = 2, y = 2,
-			backgroundColor = colors.cyan,
 			value = [[
 
 In order to connect to another computer:

sys/apps/Overview.lua

@@ -26,6 +26,9 @@ local REGISTRY_DIR = 'usr/.registry'
 local DEFAULT_ICON = NFT.parse("\0308\0317\153\153\153\153\153\
 \0307\0318\153\153\153\153\153\
 \0308\0317\153\153\153\153\153")
+local TRANS_ICON = NFT.parse("\0302\0312\32\32\32\32\32\
+\0302\0312\32\32\32\32\32\
+\0302\0312\32\32\32\32\32")
 
 -- overview
 local uid = _ENV.multishell.getCurrent()
@@ -65,6 +68,7 @@ local function parseIcon(iconText)
 			if icon.height > 3 or icon.width > 8 then
 				error('Must be an NFT image - 3 rows, 8 cols max')
 			end
+			NFT.transparency(icon)
 		end
 		return icon
 	end)
@@ -89,6 +93,7 @@ function UI.VerticalTabBar:setParent()
 		c.ox, c.oy = c.x, c.y
 		c.ow = 8
 		c.width = 8
+		c:reposition(c.x, c.y, c.width, c.height)
 	end
 end
 
@@ -114,7 +119,6 @@ local page = UI.Page {
 	},
 	editor = UI.SlideOut {
 		y = -12, height = 12,
-		backgroundColor = colors.cyan,
 		titleBar = UI.TitleBar {
 			title = 'Edit Application',
 			event = 'slide_hide',
@@ -122,7 +126,7 @@ local page = UI.Page {
 		form = UI.Form {
 			y = 2, ey = -2,
 			[1] = UI.TextEntry {
-				formLabel = 'Title', formKey = 'title', limit = 11, help = 'Application title',
+				formLabel = 'Title', formKey = 'title', limit = 11, width = 13, help = 'Application title',
 				required = true,
 			},
 			[2] = UI.TextEntry {
@@ -130,21 +134,24 @@ local page = UI.Page {
 				required = true,
 			},
 			[3] = UI.TextEntry {
-				formLabel = 'Category', formKey = 'category', limit = 11, help = 'Category of application',
+				formLabel = 'Category', formKey = 'category', limit = 6, width = 8, help = 'Category of application',
 				required = true,
 			},
-			iconFile = UI.TextEntry {
-				x = 11, ex = -12, y = 7,
-				limit = 128, help = 'Path to icon file',
-				shadowText = 'Path to icon file',
+			editIcon = UI.Button {
+				x = 11, y = 9,
+				text = 'Edit', event = 'editIcon', help = 'Edit icon file',
 			},
 			loadIcon = UI.Button {
-				x = 11, y = 9,
+				x = 18, y = 9,
 				text = 'Load', event = 'loadIcon', help = 'Load icon file',
 			},
+			info = UI.TextArea {
+				x = 11, y = 6, height = 2,
+				value = 'magenta is transparent\n3 high - max width is 8'
+			},
 			image = UI.NftImage {
 				backgroundColor = colors.black,
-				y = 7, x = 2, height = 3, width = 8,
+				y = 6, x = 2, height = 3, width = 8,
 			},
 		},
 		notification = UI.Notification(),
@@ -226,6 +233,7 @@ local function loadApplications()
 	page:add {
 		tabBar = UI.VerticalTabBar {
 			buttons = buttons,
+			selectedBackgroundColor = UI.colors.primary,
 		},
 	}
 
@@ -308,14 +316,12 @@ function page.container:setCategory(categoryName, animate)
 			image = UI.NftImage({
 				x = math.floor((width - icon.width) / 2) + 1,
 				image = icon,
-				width = 5,
-				height = 3,
 			}),
 			button = UI.Button({
 				x = math.floor((width - #title - 2) / 2) + 1,
 				y = 4,
 				text = title,
-				backgroundColor = self.backgroundColor,
+				backgroundColor = self:getProperty('backgroundColor'),
 				backgroundFocusColor = colors.gray,
 				textColor = colors.white,
 				textFocusColor = colors.white,
@@ -333,7 +339,8 @@ function page.container:setCategory(categoryName, animate)
 	local col, row = gutter, 2
 	local count = #self.children
 
-	local r = math.random(1, 5)
+	local r = math.random(1, 7)
+	local frames = 5
 	-- reposition all children
 	for k,child in ipairs(self.children) do
 		if r == 1 then
@@ -355,14 +362,22 @@ function page.container:setCategory(categoryName, animate)
 				child.x = self.width
 				child.y = self.height - 3
 			end
+		elseif r == 6 then
+			child.x = col
+			child.y = 1
+		elseif r == 7 then
+			child.x = 1
+			child.y = self.height - 3
 		end
-		child.tween = Tween.new(6, child, { x = col, y = row }, 'linear')
+		child.tween = Tween.new(frames, child, { x = col, y = row }, 'inQuad')
 
 		if not animate then
 			child.x = col
 			child.y = row
 		end
 
+		self:setViewHeight(row + 3)
+
 		if k < count then
 			col = col + child.width
 			if col + self.children[k + 1].width + gutter - 2 > self.width then
@@ -377,15 +392,13 @@ function page.container:setCategory(categoryName, animate)
 		local function transition()
 			local i = 1
 			return function()
-				self:clear()
 				for _,child in pairs(self.children) do
 					child.tween:update(1)
-					child.x = math.floor(child.x)
-					child.y = math.floor(child.y)
-					child:draw()
+					child:move(math.floor(child.x), math.floor(child.y))
 				end
+				--os.sleep(.5)
 				i = i + 1
-				return i < 7
+				return i <= frames
 			end
 		end
 		self:addTransition(transition)
@@ -512,6 +525,30 @@ function page.editor:updateApplications(app)
 	loadApplications()
 end
 
+function page.editor:loadImage(filename)
+	local s, m = pcall(function()
+		local iconLines = Util.readFile(filename)
+		if not iconLines then
+			error('Must be an NFT image - 3 rows, 8 cols max')
+		end
+		local icon, m = parseIcon(iconLines)
+		if not icon then
+			error(m)
+		end
+		if extSupport then
+			self.form.values.iconExt = iconLines
+		else
+			self.form.values.icon = iconLines
+		end
+		self.form.image:setImage(icon)
+		self.form.image:draw()
+	end)
+	if not s and m then
+		local msg = m:gsub('.*: (.*)', '%1')
+		self.notification:error(msg)
+	end
+end
+
 function page.editor:eventHandler(event)
 	if event.type == 'form_cancel' or event.type == 'cancel' then
 		self:hide()
@@ -520,27 +557,20 @@ function page.editor:eventHandler(event)
 		self.statusBar:setStatus(event.focused.help or '')
 		self.statusBar:draw()
 
+	elseif event.type == 'editIcon' then
+		local filename = '/tmp/editing.nft'
+		NFT.save(self.form.image.image or TRANS_ICON, filename)
+		local success = shell.run('pain.lua ' .. filename)
+		self.parent:dirty(true)
+		if success then
+			self:loadImage(filename)
+		end
+
 	elseif event.type == 'loadIcon' then
-		local s, m = pcall(function()
-			local iconLines = Util.readFile(self.form.iconFile.value)
-			if not iconLines then
-				error('Must be an NFT image - 3 rows, 8 cols max')
-			end
-			local icon, m = parseIcon(iconLines)
-			if not icon then
-				error(m)
-			end
-			if extSupport then
-				self.form.values.iconExt = iconLines
-			else
-				self.form.values.icon = iconLines
-			end
-			self.form.image:setImage(icon)
-			self.form.image:draw()
-		end)
-		if not s and m then
-			local msg = m:gsub('.*: (.*)', '%1')
-			self.notification:error(msg)
+		local success, filename = shell.run('fileui.lua')
+		self.parent:dirty(true)
+		if success and filename then
+			self:loadImage(filename)
 		end
 
 	elseif event.type == 'form_invalid' then
@@ -590,5 +620,4 @@ end)
 loadApplications()
 
 UI:setPage(page)
-
-UI:pullEvents()
+UI:start()

sys/apps/PackageManager.lua

@@ -44,7 +44,6 @@ local page = UI.Page {
 		marginRight = 0, marginLeft = 0,
 	},
 	action = UI.SlideOut {
-		backgroundColor = colors.cyan,
 		titleBar = UI.TitleBar {
 			event = 'hide-action',
 		},

sys/apps/Sniff.lua

@@ -48,6 +48,7 @@ local page = UI.Page {
 			y = 2,
 			filterTab = UI.Tab {
 				tabTitle = 'Filter',
+				noFill = true,
 				filterGridText = UI.Text {
 					x = 2, y = 2,
 					value = 'ID filter',
@@ -130,7 +131,6 @@ local page = UI.Page {
 			title = 'Packet Information',
 			event = 'packet_close',
 		},
-		backgroundColor = colors.cyan,
 		accelerators = {
 			['backspace'] = 'packet_close',
 			['left'] = 'prev_packet',

sys/apps/System.lua

@@ -11,7 +11,7 @@ local systemPage = UI.Page {
 		settings = UI.Tab {
 			tabTitle = 'Category',
 			grid = UI.ScrollingGrid {
-				y = 2,
+				x = 2, y = 2, ex = -2, ey = -2,
 				columns = {
 					{ heading = 'Name',        key = 'name'        },
 					{ heading = 'Description', key = 'description' },
@@ -35,7 +35,7 @@ function systemPage.tabs.settings:eventHandler(event)
 			tab:disable()
 		end
 		systemPage.tabs:selectTab(tab)
-		self.parent:draw()
+		--self.parent:draw()
 		return true
 	end
 end

sys/apps/Tasks.lua

@@ -3,6 +3,7 @@ local UI    = require('opus.ui')
 
 local kernel     = _G.kernel
 local multishell = _ENV.multishell
+local tasks      = multishell and multishell.getTabs and multishell.getTabs() or kernel.routines
 
 UI:configure('Tasks', ...)
 
@@ -21,7 +22,7 @@ local page = UI.Page {
 			{ heading = 'Status', key = 'status'    },
 			{ heading = 'Time',   key = 'timestamp' },
 		},
-		values = kernel.routines,
+		values = tasks,
 		sortColumn = 'uid',
 		autospace = true,
 		getDisplayValues = function (_, row)

sys/apps/fileui.lua

@@ -0,0 +1,138 @@
+local UI   = require('opus.ui')
+local Util = require('opus.util')
+
+local colors = _G.colors
+local fs     = _G.fs
+local shell  = _ENV.shell
+
+local selected
+
+-- fileui [--path=path] [--exec=filename]
+
+local page = UI.Page {
+	title = 'Select File',
+	-- x = 3, ex = -3, y = 2, ey = -2,
+	grid = UI.ScrollingGrid {
+		x = 2, y = 2, ex = -2, ey = -4,
+		path = '',
+		sortColumn = 'name',
+		columns = {
+			{ heading = 'Name', key = 'name' },
+			{ heading = 'Size', key = 'size', width = 5 }
+		},
+		getDisplayValues = function(_, row)
+			if row.size then
+				row = Util.shallowCopy(row)
+				row.size = Util.toBytes(row.size)
+			end
+			return row
+		end,
+		getRowTextColor = function(_, file)
+			if file.isDir then
+				return colors.cyan
+			end
+			if file.isReadOnly then
+				return colors.pink
+			end
+			return colors.white
+		end,
+		sortCompare = function(self, a, b)
+			if self.sortColumn == 'size' then
+				return a.size < b.size
+			end
+			if a.isDir == b.isDir then
+				return a.name:lower() < b.name:lower()
+			end
+			return a.isDir
+		end,
+		draw = function(self)
+			local files = fs.listEx(self.dir)
+			if #self.dir > 0 then
+				table.insert(files, {
+					name = '..',
+					isDir = true,
+				})
+			end
+			self:setValues(files)
+			self:setIndex(1)
+			UI.Grid.draw(self)
+		end,
+	},
+	path = UI.TextEntry {
+		x  =  2,
+		y  = -2,
+		ex = -11,
+		limit = 256,
+		accelerators = {
+			enter = 'path_enter',
+		}
+	},
+	cancel = UI.Button {
+		text = 'Cancel',
+		x = -9,
+		y = -2,
+		event = 'cancel',
+	},
+	draw = function(self)
+		self:fillArea(1, 1, self.width, self.height, string.rep('\127', self.width), colors.black, colors.gray)
+		self:drawChildren()
+	end,
+}
+
+function page:enable(path)
+	self:setPath(path or shell.dir())
+	UI.Page.enable(self)
+end
+
+function page:setPath(path)
+	self.grid.dir = path
+	while not fs.isDir(self.grid.dir) do
+		self.grid.dir = fs.getDir(self.grid.dir)
+	end
+
+	self.path.value = self.grid.dir
+end
+
+function page:eventHandler(event)
+	if event.type == 'grid_select' then
+		self.grid.dir = fs.combine(self.grid.dir, event.selected.name)
+		self.path.value = self.grid.dir
+		if event.selected.isDir then
+			self.grid:draw()
+			self.path:draw()
+		else
+			selected = self.path.value
+			UI:quit()
+		end
+
+	elseif event.type == 'path_enter' then
+		if fs.isDir(self.path.value) then
+			self:setPath(self.path.value)
+			self.grid:draw()
+			self.path:draw()
+		else
+			selected = self.path.value
+			UI:quit()
+		end
+
+	elseif event.type == 'cancel' then
+		UI:quit()
+	else
+		return UI.Page.eventHandler(self, event)
+	end
+	return true
+end
+
+local _, args = Util.parse(...)
+
+UI:setPage(page, args.path)
+UI:start()
+UI.term:setCursorBlink(false)
+
+if args.exec and selected then
+	shell.openForegroundTab(string.format('%s %s', args.exec, selected))
+	return
+end
+
+--print('selected: ' .. tostring(selected))
+return selected

sys/apps/netdaemon.lua

@@ -1,5 +1,3 @@
-_G.requireInjector(_ENV)
-
 local Event = require('opus.event')
 local Util  = require('opus.util')
 

sys/apps/shell.lua

@@ -66,11 +66,11 @@ local function run(env, ...)
 		_ENV.multishell.setTitle(_ENV.multishell.getCurrent(), fs.getName(path):match('([^%.]+)'))
 	end
 
-	if isUrl then
-		tProgramStack[#tProgramStack + 1] = path -- path:match("^https?://([^/:]+:?[0-9]*/?.*)$")
-	else
-		tProgramStack[#tProgramStack + 1] = path
-	end
+	tProgramStack[#tProgramStack + 1] = {
+		path = path, -- path:match("^https?://([^/:]+:?[0-9]*/?.*)$")
+		env = env,
+		args = args,
+	}
 
 	env[ "arg" ] = { [0] = path, table.unpack(args) }
 	local r = { fn(table.unpack(args)) }
@@ -278,6 +278,10 @@ function shell.getCompletionInfo()
 end
 
 function shell.getRunningProgram()
+	return tProgramStack[#tProgramStack] and tProgramStack[#tProgramStack].path
+end
+
+function shell.getRunningInfo()
 	return tProgramStack[#tProgramStack]
 end
 

sys/apps/system/aliases.lua

@@ -20,7 +20,7 @@ local aliasTab = UI.Tab {
 		},
 	},
 	grid = UI.Grid {
-		y = 5,
+		x = 2, y = 5, ex = -2, ey = -2,
 		sortColumn = 'alias',
 		columns = {
 			{ heading = 'Alias',   key = 'alias' },

sys/apps/system/alternate.lua

@@ -22,20 +22,19 @@ local tab = UI.Tab {
 		disableHeader = true,
 		columns = {
 			{ key = 'file' },
-		}
+		},
+		getRowTextColor = function(self, row)
+			if row == self.values[1] then
+				return colors.yellow
+			end
+			return UI.Grid.getRowTextColor(self, row)
+		end,
 	},
 	statusBar = UI.StatusBar {
 		values = 'Double-click to set as preferred'
 	},
 }
 
-function tab.choices:getRowTextColor(row)
-	if row == self.values[1] then
-		return colors.yellow
-	end
-	return UI.Grid.getRowTextColor(self, row)
-end
-
 function tab:updateChoices()
 	local app = self.apps:getSelected().name
 	local choices = { }

sys/apps/system/cloud.lua

@@ -4,16 +4,17 @@ local UI     = require('opus.ui')
 
 local colors = _G.colors
 
--- -t80x30
-
 if _G.http.websocket then
 	local config = Config.load('cloud')
 
 	local tab = UI.Tab {
 		tabTitle = 'Cloud',
 		description = 'Cloud Catcher options',
+		[1] = UI.Window {
+			x = 2, y = 2, ex = -2, ey = 4,
+		},
 		key = UI.TextEntry {
-			x = 3, ex = -3, y = 2,
+			x = 3, ex = -3, y = 3,
 			limit = 32,
 			value = config.key,
 			shadowText = 'Cloud key',
@@ -22,13 +23,14 @@ if _G.http.websocket then
 			},
 		},
 		button = UI.Button {
-			x = 3, y = 4,
-			text = 'Update',
+			x = -8, ex = -2, y = -2,
+			text = 'Apply',
 			event = 'update_key',
 		},
 		labelText = UI.TextArea {
-			x = 3, ex = -3, y = 6,
+			x = 2, ex = -2, y = 6, ey = -4,
 			textColor = colors.yellow,
+			backgroundColor = colors.black,
 			marginLeft = 0, marginRight = 0,
 			value = string.format(
 [[Use a non-changing cloud key. Note that only a single computer can use this session at one time.

sys/apps/system/diskusage.lua

@@ -20,8 +20,8 @@ local tab = UI.Tab {
 	description = 'Visualise HDD and disks usage',
 
 	drives = UI.ScrollingGrid {
-		x = 2, y = 1,
-		ex = '47%', ey = -7,
+		x = 2, y = 2,
+		ex = '47%', ey = -8,
 		columns = {
 			{ heading = 'Drive', key = 'name' },
 			{ heading = 'Side' ,key = 'side', textColor = colors.yellow }
@@ -30,7 +30,7 @@ local tab = UI.Tab {
 	},
 	infos = UI.Grid {
 		x = '52%', y = 2,
-		ex = -2, ey = -4,
+		ex = -2, ey = -8,
 		disableHeader = true,
 		unfocusedBackgroundSelectedColor = colors.black,
 		inactive = true,
@@ -40,18 +40,23 @@ local tab = UI.Tab {
 			{ key = 'value', align = 'right', textColor = colors.yellow },
 		}
 	},
-
+	[1] = UI.Window {
+		x = 2, y = -6, ex = -2, ey = -2,
+		backgroundColor = colors.black,
+	},
 	progress = UI.ProgressBar {
-		x = 11, y = -2,
-		ex = -2,
+		x = 11, y = -3,
+		ex = -3,
 	},
 	percentage = UI.Text {
-		x = 11, y = -3,
-		ex = '47%',
-		align = 'center',
+		y = -4, width = 5,
+		x = 12,
+		--align = 'center',
+		backgroundColor = colors.black,
 	},
 	icon = UI.NftImage {
-		x = 2, y = -5,
+		x = 2, y = -6, ey = -2,
+		backgroundColor = colors.black,
 		image = NFT.parse(NftImages.blank)
 	},
 }

sys/apps/system/kiosk.lua

@@ -8,7 +8,7 @@ local tab = UI.Tab {
 	tabTitle = 'Kiosk',
 	description = 'Kiosk options',
 	form = UI.Form {
-		x = 2, ex = -2,
+		x = 2, y = 2, ex = -2, ey = 5,
 		manualControls = true,
 		monitor = UI.Chooser {
 			formLabel = 'Monitor', formKey = 'monitor',
@@ -22,11 +22,12 @@ local tab = UI.Tab {
 			},
 			help = 'Adjust text scaling',
 		},
-		labelText = UI.TextArea {
-			x = 2, ex = -2, y = 5,
-			textColor = colors.yellow,
-			value = 'Settings apply to kiosk mode selected during startup'
-		},
+	},
+	labelText = UI.TextArea {
+		x = 2, ex = -2, y = 7, ey = -2,
+		textColor = colors.yellow,
+		backgroundColor = colors.black,
+		value = 'Settings apply to kiosk mode selected during startup'
 	},
 }
 

sys/apps/system/label.lua

@@ -8,19 +8,22 @@ local labelTab = UI.Tab {
 	tabTitle = 'Label',
 	description = 'Set the computer label',
 	labelText = UI.Text {
-		x = 3, y = 2,
+		x = 3, y = 3,
 		value = 'Label'
 	},
 	label = UI.TextEntry {
-		x = 9, y = 2, ex = -4,
+		x = 9, y = 3, ex = -4,
 		limit = 32,
 		value = os.getComputerLabel(),
 		accelerators = {
 			enter = 'update_label',
 		},
 	},
+	[1] = UI.Window {
+		x = 2, y = 2, ex = -2, ey = 4,
+	},
 	grid = UI.ScrollingGrid {
-		y = 3,
+		x = 2, y = 6, ex = -2, ey = -2,
 		values = {
 			{ name = '',  value = ''                  },
 			{ name = 'CC version',  value = Util.getVersion()                  },
@@ -30,10 +33,11 @@ local labelTab = UI.Tab {
 			{ name = 'Computer ID', value = tostring(os.getComputerID())       },
 			{ name = 'Day',         value = tostring(os.day())                 },
 		},
+		disableHeader = true,
 		inactive = true,
 		columns = {
 			{ key = 'name',  width = 12 },
-			{ key = 'value' },
+			{ key = 'value', textColor = colors.yellow },
 		},
 	},
 }

sys/apps/system/launcher.lua

@@ -9,12 +9,15 @@ local config = Config.load('multishell')
 local tab = UI.Tab {
 	tabTitle = 'Launcher',
 	description = 'Set the application launcher',
+	[1] = UI.Window {
+		x = 2, y = 2, ex = -2, ey = 5,
+	},
 	launcherLabel = UI.Text {
-		x = 3, y = 2,
+		x = 3, y = 3,
 		value = 'Launcher',
 	},
 	launcher = UI.Chooser {
-		x = 13, y = 2, width = 12,
+		x = 13, y = 3, width = 12,
 		choices = {
 			{ name = 'Overview', value = 'sys/apps/Overview.lua' },
 			{ name = 'Shell',    value = 'sys/apps/ShellLauncher.lua'    },
@@ -22,17 +25,18 @@ local tab = UI.Tab {
 		},
 	},
 	custom = UI.TextEntry {
-		x = 13, ex = -3, y = 3,
+		x = 13, ex = -3, y = 4,
 		limit = 128,
 		shadowText = 'File name',
 	},
 	button = UI.Button {
-		x = 3, y = 5,
-		text = 'Update',
+		x = -8, ex = -2, y = -2,
+		text = 'Apply',
 		event = 'update',
 	},
 	labelText = UI.TextArea {
-		x = 3, ex = -3, y = 7,
+		x = 2, ex = -2, y = 7, ey = -4,
+		backgroundColor = colors.black,
 		textColor = colors.yellow,
 		value = 'Choose an application launcher',
 	},

sys/apps/system/network.lua

@@ -2,24 +2,29 @@ local Ansi   = require('opus.ansi')
 local Config = require('opus.config')
 local UI     = require('opus.ui')
 
+local colors = _G.colors
 local device = _G.device
 
 local tab = UI.Tab {
 	tabTitle = 'Network',
 	description = 'Networking options',
 	info = UI.TextArea {
-		x = 3, y = 4,
+		x = 2, y = 6, ex = -2, ey = -2,
+		backgroundColor = colors.black,
 		value = string.format(
 [[%sSet the primary modem used for wireless communications.%s
 
 Reboot to take effect.]], Ansi.yellow, Ansi.reset)
 	},
+	[1] = UI.Window {
+		x = 2, y = 2, ex = -2, ey = 4,
+	},
 	label = UI.Text {
-		x = 3, y = 2,
+		x = 3, y = 3,
 		value = 'Modem',
 	},
 	modem = UI.Chooser {
-		x = 10, ex = -3, y = 2,
+		x = 10, ex = -3, y = 3,
 		nochoice = 'auto',
 	},
 }

sys/apps/system/password.lua

@@ -7,6 +7,9 @@ local colors   = _G.colors
 local passwordTab = UI.Tab {
 	tabTitle = 'Password',
 	description = 'Wireless network password',
+	[1] = UI.Window {
+		x = 2, y = 2, ex = -2, ey = 4,
+	},
 	newPass = UI.TextEntry {
 		x = 3, ex = -3, y = 3,
 		limit = 32,
@@ -17,12 +20,13 @@ local passwordTab = UI.Tab {
 		},
 	},
 	button = UI.Button {
-		x = 3, y = 5,
-		text = 'Update',
+		x = -8, ex = -2, y = -2,
+		text = 'Apply',
 		event = 'update_password',
 	},
 	info = UI.TextArea {
-		x = 3, ex = -3, y = 7,
+		x = 2, ex = -2, y = 6, ey = -4,
+		backgroundColor = colors.black,
 		textColor = colors.yellow,
 		inactive = true,
 		value = 'Add a password to enable other computers to connect to this one.',

sys/apps/system/path.lua

@@ -6,8 +6,11 @@ local tab = UI.Tab {
 	tabTitle = 'Path',
 	description = 'Set the shell path',
 	tabClose = true,
+	[1] = UI.Window {
+		x = 2, y = 2, ex = -2, ey = 4,
+	},
 	entry = UI.TextEntry {
-		x = 2, y = 2, ex = -2,
+		x = 3, y = 3, ex = -3,
 		limit = 256,
 		shadowText = 'enter new path',
 		accelerators = {
@@ -16,7 +19,7 @@ local tab = UI.Tab {
 		help = 'add a new path',
 	},
 	grid = UI.Grid {
-		y = 4, ey = -3,
+		x = 2, y = 6, ex = -2, ey = -3,
 		disableHeader = true,
 		columns = { { key = 'value' } },
 		autospace = true,

sys/apps/system/settings.lua

@@ -7,7 +7,7 @@ if settings then
 		tabTitle = 'Settings',
 		description = 'Computercraft configurable settings',
 		grid = UI.Grid {
-			y = 2,
+			x = 2, y = 2, ex = -2, ey = -2,
 			autospace = true,
 			sortColumn = 'name',
 			columns = {

sys/apps/system/shell.lua

@@ -42,25 +42,23 @@ local tab = UI.Tab {
 	tabTitle = 'Shell',
 	description = 'Shell options',
 	grid1 = UI.ScrollingGrid {
-		y = 2, ey = -10, x = 3, ex = -16,
+		y = 2, ey = -10, x = 2, ex = -17,
 		disableHeader = true,
 		columns = { { key = 'name' } },
 		values = allSettings,
 		sortColumn = 'name',
 	},
 	grid2 = UI.ScrollingGrid {
-		y = 2, ey = -10, x = -14, ex = -3,
+		y = 2, ey = -10, x = -14, ex = -2,
 		disableHeader = true,
 		columns = { { key = 'name' } },
 		values = allColors,
 		sortColumn = 'name',
 	},
-	directoryLabel = UI.Text {
-		x = 2, y = -2,
-		value = 'Display directory',
-	},
 	directory = UI.Checkbox {
-		x = 20, y = -2,
+		x = 2, y = -2,
+		labelBackgroundColor = colors.black,
+		label = 'Directory',
 		value = config.displayDirectory
 	},
 	reset = UI.Button {
@@ -74,7 +72,7 @@ local tab = UI.Tab {
 		event = 'update',
 	},
 	display = UI.Window {
-		x = 3, ex = -3, y = -8, height = 5,
+		x = 2, ex = -2, y = -8, height = 5,
 	},
 }