diff --git a/meson.build b/meson.build
index ab1a47f9..49792030 100644
--- a/meson.build
+++ b/meson.build
@@ -34,6 +34,7 @@ executable(
'src/Application.vala',
'src/MainWindow.vala',
'src/ShortcutLabel.vala',
+ 'src/Views/ComposeView.vala',
'src/Views/ShortcutsView.vala',
config_file,
asresources,
diff --git a/po/POTFILES b/po/POTFILES
index 7a53be9a..3c64a75c 100644
--- a/po/POTFILES
+++ b/po/POTFILES
@@ -1,4 +1,5 @@
src/Application.vala
src/MainWindow.vala
src/ShortcutLabel.vala
+src/Views/ComposeView.vala
src/Views/ShortcutsView.vala
diff --git a/src/MainWindow.vala b/src/MainWindow.vala
index 0da3f47d..5c3f2e1c 100644
--- a/src/MainWindow.vala
+++ b/src/MainWindow.vala
@@ -50,9 +50,26 @@ public class ShortcutOverlay.MainWindow : Hdy.Window {
shortcuts_view.margin = 36;
shortcuts_view.margin_top = 12;
+ var compose_view = new ComposeView ();
+ compose_view.margin_start = 12;
+ compose_view.margin_end = 12;
+ compose_view.margin_bottom = 32;
+
+ var stack = new Gtk.Stack ();
+ stack.add_titled (shortcuts_view, "shortcuts", _("Shortcuts"));
+ stack.add_titled (compose_view, "compose", _("Compose Key"));
+
+ var stack_switcher = new Gtk.StackSwitcher ();
+ stack_switcher.halign = Gtk.Align.CENTER;
+ stack_switcher.homogeneous = true;
+ stack_switcher.margin = 12;
+ stack_switcher.stack = stack;
+
var grid = new Gtk.Grid ();
- grid.attach (headerbar, 0, 0);
- grid.attach (shortcuts_view, 0, 1);
+ grid.orientation = Gtk.Orientation.VERTICAL;
+ grid.add (headerbar);
+ grid.add (stack_switcher);
+ grid.add (stack);
skip_taskbar_hint = true;
add (grid);
diff --git a/src/Views/ComposeView.vala b/src/Views/ComposeView.vala
new file mode 100644
index 00000000..17439aa7
--- /dev/null
+++ b/src/Views/ComposeView.vala
@@ -0,0 +1,72 @@
+/*-
+ * Copyright (c) 2018 elementary LLC. (https://elementary.io)
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program. If not, see .
+ */
+
+// Characters to include:
+//
+// Typographic Glyphs
+// Em dash
+// En dash
+// Quotes
+// Arrows
+// Accented characters
+// Mathematical
+// Times
+// Division
+// Fractions
+// Exponents
+
+public class ShortcutOverlay.ComposeView : Gtk.Grid {
+ private const string SCHEMA_INPUT_SOURCES = "org.gnome.desktop.input-sources";
+
+ construct {
+ column_spacing = 24;
+
+ var grid = new Gtk.Grid ();
+ grid.column_spacing = 12;
+
+ var instructions = new Gtk.Label (_("Tap the Right Alt key, then the keys listed to insert special characters."));
+ instructions.use_markup = true;
+ instructions.halign = Gtk.Align.CENTER;
+
+ var name_label = new Gtk.Label (_("Em Dash (—):"));
+ name_label.halign = Gtk.Align.END;
+ name_label.xalign = 1;
+
+ var key_grid = new Gtk.Grid ();
+ key_grid.orientation = Gtk.Orientation.HORIZONTAL;
+ key_grid.column_spacing = 6;
+
+ var key1_label = new Gtk.Label ("-");
+ key1_label.get_style_context ().add_class ("keycap");
+
+ var key2_label = new Gtk.Label ("-");
+ key2_label.get_style_context ().add_class ("keycap");
+
+ var key3_label = new Gtk.Label ("-");
+ key3_label.get_style_context ().add_class ("keycap");
+
+ key_grid.add (key1_label);
+ key_grid.add (key2_label);
+ key_grid.add (key3_label);
+
+ grid.attach (instructions, 0, 0, 2, 1);
+ grid.attach (name_label, 0, 1, 1, 1);
+ grid.attach (key_grid, 1, 1, 1, 1);
+
+ add (grid);
+ }
+}