vertical orientation for phones

playground/src/main.ts

@@ -51,6 +51,7 @@ document.addEventListener("keydown", (ev) => {
 const LOADING = "module Loading\n"
 
 let value = localStorage.code || LOADING;
+let initialVertical = localStorage.vertical == 'true'
 
 // let result = document.getElementById("result")!;
 
@@ -135,7 +136,7 @@ function Tabs() {
 
   return h(
     "div",
-    { className: "tabPanel" },
+    { className: "tabPanel right" },
     h("div", { className: "tabBar" }, Tab(RESULTS), Tab(JAVASCRIPT)),
     h("div", { className: "tabBody" }, body)
   );
@@ -152,7 +153,7 @@ const SAMPLES = [
   "TypeClass.newt",
 ];
 
-function EditWrap() {
+function EditWrap({vertical, toggle}: {vertical: boolean, toggle: () => void}) {
   const options = SAMPLES.map((value) => h("option", { value }, value));
 
   const onChange = async (ev: ChangeEvent) => {
@@ -163,9 +164,10 @@ function EditWrap() {
 
     }
   };
+  let d = vertical ?  "M0 0 h20 v20 h-20 z M0 10 h20" : "M0 0 h20 v20 h-20 z M10 0 v20"
   return h(
     "div",
-    { className: "tabPanel" },
+    { className: "tabPanel left" },
     h(
       "div",
       { className: "tabBar" },
@@ -174,17 +176,29 @@ function EditWrap() {
         { onChange },
         h("option", { value: "" }, "choose sample"),
         options
-      )
+      ),
+      h('div', {style: {flex: '1 1'}}),
+      h('button', {onClick: toggle},
+          h('svg', {width:20, height: 20},
+            h('path',{d,fill:'none',stroke:'black'})
+          )
+        )
     ),
     h("div", { className: "tabBody" }, h(Editor, { initialValue: value }))
   );
 }
 
 function App() {
+  let [vertical,setVertical] = useState(initialVertical)
+  let toggle = () => {
+    setVertical(!vertical)
+    localStorage.vertical = !vertical
+  }
+  let className = `wrapper ${vertical?"vertical":"horizontal"}`
   return h(
     "div",
-    { className: "wrapper" },
+    { className },
-    h(EditWrap, {}),
+    h(EditWrap, {vertical, toggle}),
     h(Tabs, {})
   );
 }

playground/src/monarch.ts

@@ -61,7 +61,7 @@ export let newtConfig: monaco.languages.LanguageConfiguration = {
 
 export let newtTokens: monaco.languages.IMonarchLanguage = {
   // Set defaultToken to invalid to see what you do not tokenize yet
-  defaultToken: "invalid",
+  // defaultToken: "invalid",
 
   keywords: [
     "let",
@@ -83,7 +83,7 @@ export let newtTokens: monaco.languages.IMonarchLanguage = {
   tokenizer: {
     root: [
       [
-        /[a-z_$][\w$]*/,
+        /[a-z_$'][\w$]*/,
         { cases: { "@keywords": "keyword", "@default": "identifier" } },
       ],
       [/[A-Z][\w\$]*/, "type.identifier"],

playground/style.css

@@ -8,16 +8,34 @@
 #editor {
   height: 100%;
 }
-.wrapper {
+.wrapper.horizontal {
   display: flex;
   flex-direction: row;
   height: 100%;
 }
-.wrapper > div {
+.wrapper.horizontal > div {
   flex: 1 1;
   /* allow smaller than natural */
   width: 100px;
 }
+.wrapper.vertical {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+.wrapper.vertical .tabPanel.left {
+  flex: .6 .6;
+  height: 100px;
+}
+.wrapper.vertical .tabPanel.right {
+  flex: .4 .4;
+  height: 100px;
+}
+.tabBar button {
+  border: none;
+  padding: none;
+  background: inherit;
+}
 .tabPanel {
   display: flex;
   flex-direction: column;