Add missing light theme colours

package.json

@@ -1,10 +1,9 @@
 {
   "name": "exif-reader",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "main": "index.js",
   "author": "Ross Phillips <hi@rossphillips.nz>",
   "license": "MIT",
-  "private": true,
   "scripts": {
     "build": "webpack -p",
     "package": "nodegui-packer --pack ./dist",

src/app.js

@@ -36,10 +36,10 @@ export default class App {
 		controls.setObjectName('controls');
 		controls.setLayout(new FlexLayout());
 
-		const button = new QPushButton();
-		button.setIcon(new QIcon(Assets.addPath));
-		button.addEventListener('clicked', this.onAddClick.bind(this), false);
-		button.setCursor(CursorShape.PointingHandCursor);
+		const addButton = new QPushButton();
+		addButton.setIcon(new QIcon(Assets.addPath));
+		addButton.addEventListener('clicked', this.onAddClick.bind(this), false);
+		addButton.setCursor(CursorShape.PointingHandCursor);
 
 		const controlsLabel = new QLabel();
 		controlsLabel.setObjectName('controlsLabel');
@@ -73,7 +73,7 @@ export default class App {
 			}));
 		});
 
-		controls.layout.addWidget(button);
+		controls.layout.addWidget(addButton);
 		controls.layout.addWidget(controlsLabel);
 
 		sidebar.layout.addWidget(controls);
@@ -120,16 +120,19 @@ export default class App {
 			}
 
 			QPushButton {
-				border-top: 1px solid ${Colours.buttonBorder};
+				border-top: 1px solid ${Colours.buttonBorderTop};
+				border-bottom: 1px solid ${Colours.buttonBorderBottom};
 				background-color: ${Colours.buttonBackground};
 				color: ${Colours.buttonText};
-				padding: 2px 3px 3px 3px;
+				padding: 2px 3px;
 				border-radius: 4px;
 				margin: 0;
 			}
 
 			QPushButton:pressed {
 				background-color: ${Colours.buttonActiveBackground};
+				border-top: 2px solid ${Colours.buttonActiveBackground};
+				border-bottom: 0;
 			}`
 		);
 	}

src/assets.js

@@ -24,6 +24,10 @@ const assets = {
 		stateEmptyPath: stateEmptyLight,
 		stateFailedPath: stateFailedLight,
 		stateSuccessPath: stateSuccessLight,
+		stateLoadingPathSelected: stateLoadingDark,
+		stateEmptyPathSelected: stateEmptyDark,
+		stateFailedPathSelected: stateFailedDark,
+		stateSuccessPathSelected: stateSuccessDark,
 	},
 	dark: {
 		addPath: addDark,

src/colours.js

@@ -5,16 +5,18 @@ const isDarkMode = Info.isDarkMode();
 const colours = {
 	light: {
 		text: '#111111',
-		textSecondary: '#888888',
+		textSecondary: '#777777',
 		contentBackground: '#ffffff',
 		contentBorder: '#e6e6e6',
 		supportBackground: '#ececec',
 		supportBorder: '#d5d5d5',
 		selectedBackground: '#1067DE',
-		buttonBackground: 'TODO',
-		buttonActiveBackground: 'TODO',
-		buttonBorder: 'TODO',
-		buttonText: 'TODO',
+		selectedText: '#ffffff',
+		buttonBackground: '#ffffff',
+		buttonActiveBackground: '#f0f0f0',
+		buttonBorderTop: '#ffffff',
+		buttonBorderBottom: '#bfbfbf',
+		buttonText: '#262626'
 	},
 	dark: {
 		text: '#ffffff',
@@ -24,11 +26,13 @@ const colours = {
 		supportBackground: '#323232',
 		supportBorder: '#555555',
 		selectedBackground: '#0d56CA',
+		selectedText: '#ffffff',
 		buttonBackground: '#6e6e6e',
 		buttonActiveBackground: '#919191',
-		buttonBorder: '#858585',
-		buttonText: '#fafafa',
-	},
+		buttonBorderTop: '#858585',
+		buttonBorderBottom: '#6e6e6e',
+		buttonText: '#fafafa'
+	}
 };
 
 export default isDarkMode ? colours.dark : colours.light;

src/list-item.js

@@ -27,6 +27,22 @@ const stateImages = {
 	success: fs.readFileSync(Assets.stateSuccessPath),
 };
 
+if (Assets.stateLoadingPathSelected) {
+	stateImages.loadingSelected = fs.readFileSync(Assets.stateLoadingPathSelected);
+}
+
+if (Assets.stateEmptyPathSelected) {
+	stateImages.emptySelected = fs.readFileSync(Assets.stateEmptyPathSelected);
+}
+
+if (Assets.stateFailedPathSelected) {
+	stateImages.failedSelected = fs.readFileSync(Assets.stateFailedPathSelected);
+}
+
+if (Assets.stateSuccessPathSelected) {
+	stateImages.successSelected = fs.readFileSync(Assets.stateSuccessPathSelected);
+}
+
 export default class ListItem {
 	constructor(filePath, onLoad, onSelect) {
 		this.filePath = filePath;
@@ -38,17 +54,17 @@ export default class ListItem {
 		this.iconLabel = new QLabel();
 		this.iconLabel.setInlineStyle('margin-right: 5px;');
 
-		const label = new QLabel();
+		this.label = new QLabel();
 		const showFullPath = false; // TODO - make configurable
 		if (showFullPath) {
-			label.setText(filePath.replace(homeDir, '~'));
+			this.label.setText(filePath.replace(homeDir, '~'));
 		} else {
-			label.setText(path.basename(filePath));
+			this.label.setText(path.basename(filePath));
 		}
 
 		this.widget.setLayout(new FlexLayout());
 		this.widget.layout.addWidget(this.iconLabel);
-		this.widget.layout.addWidget(label);
+		this.widget.layout.addWidget(this.label);
 		this.widget.addEventListener(WidgetEventTypes.MouseButtonPress, this.onClick.bind(this), false);
 		this.widget.setCursor(CursorShape.PointingHandCursor);
 
@@ -99,17 +115,27 @@ export default class ListItem {
 		this.isSelected = true;
 		this.widget.setCursor(CursorShape.ArrowCursor);
 		this.widget.setInlineStyle(`background-color: ${Colours.selectedBackground};`);
+		this.label.setInlineStyle(`color: ${Colours.selectedText};`);
+		this.renderIconLabel();
 	}
 
 	unselect() {
 		this.isSelected = false;
 		this.widget.setCursor(CursorShape.PointingHandCursor);
 		this.widget.setInlineStyle('');
+		this.label.setInlineStyle('');
+		this.renderIconLabel();
 	}
 
 	renderIconLabel() {
 		const pixmap = new QPixmap();
-		pixmap.loadFromData(stateImages[this.state]);
+
+		let state = this.state;
+		if (this.isSelected) {
+			state += 'Selected';
+		}
+
+		pixmap.loadFromData(stateImages[state] || stateImages[this.state]);
 		this.iconLabel.setPixmap(pixmap.scaled(18, 18, AspectRatioMode.KeepAspectRatio, TransformationMode.SmoothTransformation));
 	}