sizes template styles

src/editor-view/actions/actions-toolbar.ts

@@ -12,7 +12,7 @@ export class ActionsToolbar extends Widget {
 
 	private readonly buttons: ActionButton[] = [];
 	private orientationBtn: ActionButton;
-	private orientationPanel: SizeTemplatesPanel;
+	private orientationTemplates: SizeTemplatesPanel;
 
 	public setupActions(actions: ActionHandler) {
 		this.createButton(actions.getAction(Actions.TOGGLE_ENABLED));
@@ -28,7 +28,7 @@ export class ActionsToolbar extends Widget {
 
 		this.createButton(actions.getAction(Actions.TOGGLE_RESPONSIVE));
 		this.orientationBtn = this.createButton(actions.getAction(Actions.TOGGLE_ORIENTATION));
-		this.orientationPanel = this.appendChild(document.createElement(SizeTemplatesPanel.tagName)) as SizeTemplatesPanel;
+		this.orientationTemplates = this.appendChild(document.createElement(SizeTemplatesPanel.tagName)) as SizeTemplatesPanel;
 
 		this.createSeparator();
 
@@ -42,14 +42,15 @@ export class ActionsToolbar extends Widget {
 		this.createSeparator();
 		this.createSpacer();
 
-		this.orientationPanel.init();
+		this.orientationTemplates.init();
 		Editor.prefs.onPreferenceChanged.add(this.onPreferencesChanged, this);
 		this.onPreferencesChanged('responsive', Editor.prefs.responsive);
 	}
 
 	private onPreferencesChanged(key: PreferenceKey, value: any) {
 		if (key !== 'responsive') return;
 		this.orientationBtn.interactable = value === true;
+		this.orientationTemplates.interactable = value === true;
 	}
 
 	public enable() { this.buttons.forEach(e => e.updateState()); }

src/editor-view/actions/button/action-button.scss

@@ -3,6 +3,9 @@
 .button {
 	box-shadow: none;
 	position: relative;
+	padding: 0 !important;
+	width: 34px;
+	max-width: 34px;
 
 	&:hover {
 		background-color: $primary-color;
@@ -32,11 +35,6 @@
 		}
 	}
 
-	&.disabled {
-		pointer-events: none;
-		opacity: 0.5;
-	}
-
 	.tooltip {
 		position: absolute;
 		top: 46px;

src/editor-view/actions/size-templates/size-templates-panel.scss

@@ -1,7 +1,35 @@
+@import 'colors';
 @import '../button/action-button.scss';
-phred-size-templates-panel {
+
+phred-size-templates-panel.fa {
 	display: flex;
-	.selected-template {
-
+	width: 90px;
+	position: relative;
+
+	select.button {
+		flex: 1;
+		width: 100%;
+		max-width: initial;
+		padding: 0 28px 0 8px !important;
+		appearance: none;
+	}
+
+	&:after {
+		content: '\f0d7';
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		position: absolute;
+		right: 0;
+		padding: 0 8px;
+		height: 100%;
+		width: 20px;
+		z-index: 1;
+		pointer-events: none;
+		color: rgba($on-background, 0.3);
+	}
+
+	&:hover:after {
+		color: $on-background;
 	}
 }

src/editor-view/actions/size-templates/size-templates-panel.ts

@@ -9,29 +9,30 @@ const OPTIONS = [
 	{ width: 900, height: 600, label: '3:2' },
 ];
 
-// 16:9		0.5625		800 450
-// 16:10		0.625			800 500
-// 19.5:9	0.4615		780 520
-// 3:2		0.66667		900 600
-// 4:3		0.75			800 600
-
 export class SizeTemplatesPanel extends HTMLElement {
 	public static readonly tagName = 'phred-size-templates-panel';
 
-	public init() {
-		const selectedTemplate = this.appendChild(document.createElement('div'));
-		selectedTemplate.classList.add('selected-template');
+	public set interactable(value: boolean) {
+		if (value) {
+			this.classList.remove('disabled');
+			return;
+		}
+		if (!this.classList.contains('disabled')) {
+			this.classList.add('disabled');
+		}
+	}
 
+	public init() {
+		this.classList.add('fa');
 		const e = this.appendChild(document.createElement('select')) as HTMLSelectElement;
+		e.classList.add('button');
+
 		OPTIONS.forEach((value, index) => {
-			const o = e.appendChild(document.createElement('option'));
-			o.value = index.toString();
-			o.innerHTML = value.label;
+			const option = document.createElement('option');
+			option.value = index.toString();
+			option.innerHTML = value.label;
+			e.appendChild(option);
 		});
-
-		const btn = this.appendChild(document.createElement('div'));
-		btn.classList.add('button');
-		btn.appendChild(document.createElement('i')).classList.add('fas', 'fa-caret-down');
 	}
 }
 

src/editor-view/editor-view.scss

@@ -222,6 +222,11 @@ phred-editor-view {
 		}
 	}
 
+	.disabled {
+		pointer-events: none;
+		opacity: 0.5;
+	}
+
 	.phred-content {
 		flex: 1;
 		display: inline-flex;