Minor UI improvments for small sidebar widths.

agrawal-d · Mar 5, 2022 · d9b748c · d9b748c
1 parent c332ddc
commit d9b748c
Show file tree

Hide file tree

Showing 6 changed files with 95 additions and 66 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # Changelog
 
+## 5.9.2
+
+-   Minor UI improvments for small sidebar widths.
+
 ## 5.9.1
 
 -   Improve problem name parser to handle numbers.

diff --git a/package.json b/package.json
@@ -5,7 +5,7 @@
     "license": "GPL-3.0-or-later",
     "icon": "icon.png",
     "publisher": "DivyanshuAgrawal",
-    "version": "5.9.1",
+    "version": "5.9.2",
     "engines": {
         "vscode": "^1.52.0"
     },

diff --git a/src/companion.ts b/src/companion.ts
@@ -128,7 +128,7 @@ export const setupCompanionServer = () => {
         server.listen(config.port);
         server.on('error', (err) => {
             vscode.window.showErrorMessage(
-                `CPH server encountered an error: "${err.message}" , companion may not work.`,
+                `Are multiple VSCode windows open? CPH will work on the first opened window. CPH server encountered an error: "${err.message}" , companion may not work.`,
             );
         });
         console.log('Companion server listening on port', config.port);

diff --git a/src/utilsPure.ts b/src/utilsPure.ts
@@ -1,3 +1,6 @@
+// Pure javascript utilities, that don't use VS Code API.
+// They can still use VS Code type definitions.
+
 export const words_in_text = function (text: string) {
     const regex = /[\p{L}-]+|[0-9]+/gu;
     return text.match(regex);

diff --git a/src/webview/frontend/App.tsx b/src/webview/frontend/App.tsx
@@ -295,7 +295,7 @@ function Judge(props: {
                     <span className="icon">
                         <i className="codicon codicon-cloud-upload"></i>
                     </span>{' '}
-                    Submit to Codeforces
+                    Submit
                 </button>
             );
         } else if (url.hostname == 'open.kattis.com') {
@@ -357,17 +357,20 @@ function Judge(props: {
             </div>
             <div className="results">{views}</div>
             <div className="margin-10">
-                <button
-                    className="btn btn-green"
-                    onClick={newCase}
-                    title="Create a new empty testcase"
-                >
-                    <span className="icon">
-                        <i className="codicon codicon-add"></i>
-                    </span>{' '}
-                    New Testcase
-                </button>
-                {renderSubmitButton()}
+                <div className="row">
+                    <button
+                        className="btn btn-green"
+                        onClick={newCase}
+                        title="Create a new empty testcase"
+                    >
+                        <span className="icon">
+                            <i className="codicon codicon-add"></i>
+                        </span>{' '}
+                        New Testcase
+                    </button>
+                    {renderSubmitButton()}
+                </div>
+
                 <br />
                 <span onClick={toggleOnlineJudgeEnv}>
                     <input type="checkbox" checked={onlineJudgeEnv} />
@@ -378,55 +381,60 @@ function Judge(props: {
             </div>
 
             <div className="actions">
-                <button
-                    className="btn"
-                    onClick={runAll}
-                    title="Run all testcases again"
-                >
-                    <span className="icon">
-                        <i className="codicon codicon-debug-restart"></i>
-                    </span>{' '}
-                    Run All
-                </button>
-                <button
-                    className="btn btn-green"
-                    onClick={newCase}
-                    title="Create a new empty testcase"
-                >
-                    <span className="icon">
-                        <i className="codicon codicon-add"></i>
-                    </span>{' '}
-                    New
-                </button>
-                <button
-                    className="btn btn-orange"
-                    onClick={stop}
-                    title="Kill all running testcases"
-                >
-                    <span className="icon">
-                        <i className="codicon codicon-circle-slash"></i>
-                    </span>{' '}
-                    Stop
-                </button>
-                <a
-                    className="btn"
-                    title="Help"
-                    href="https://github.com/agrawal-d/cph/blob/main/docs/user-guide.md"
-                >
-                    <span className="icon">
-                        <i className="codicon codicon-question"></i>
-                    </span>{' '}
-                </a>
-                <button
-                    className="btn btn-red right"
-                    onClick={deleteTcs}
-                    title="Delete all testcases and close results window"
-                >
-                    <span className="icon">
-                        <i className="codicon codicon-trash"></i>
-                    </span>{' '}
-                    Delete
-                </button>
+                <div className="row">
+                    <button
+                        className="btn"
+                        onClick={runAll}
+                        title="Run all testcases again"
+                    >
+                        <span className="icon">
+                            <i className="codicon codicon-debug-restart"></i>
+                        </span>{' '}
+                        Run All
+                    </button>
+                    <button
+                        className="btn btn-green"
+                        onClick={newCase}
+                        title="Create a new empty testcase"
+                    >
+                        <span className="icon">
+                            <i className="codicon codicon-add"></i>
+                        </span>{' '}
+                        New
+                    </button>
+                </div>
+                <div className="row">
+                    <button
+                        className="btn btn-orange"
+                        onClick={stop}
+                        title="Kill all running testcases"
+                    >
+                        <span className="icon">
+                            <i className="codicon codicon-circle-slash"></i>
+                        </span>{' '}
+                        Stop
+                    </button>
+                    <a
+                        className="btn"
+                        title="Help"
+                        href="https://github.com/agrawal-d/cph/blob/main/docs/user-guide.md"
+                    >
+                        <span className="icon">
+                            <i className="codicon codicon-question"></i>
+                        </span>{' '}
+                        Help
+                    </a>
+                    <button
+                        className="btn btn-red right"
+                        onClick={deleteTcs}
+                        title="Delete all testcases and close results window"
+                    >
+                        <span className="icon">
+                            <i className="codicon codicon-trash"></i>
+                        </span>{' '}
+                        Delete
+                    </button>
+                </div>
             </div>
 
             {waitingForSubmit && (

diff --git a/src/webview/frontend/app.css b/src/webview/frontend/app.css
@@ -37,7 +37,7 @@ body {
     left: 0px;
     width: 100%;
     padding: 15px;
-    background: var(--vscode-sideBar-background);
+    background: var(--vscode-menu-background);
     box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.3);
 }
 .case {
@@ -80,7 +80,7 @@ a[href]:hover {
 pre,
 textarea {
     background: var(--input-background);
-    font-family: 'Courier New', Courier, Consolas, 'Ubuntu Mono', monospace;
+    font-family: Consolas, 'Ubuntu Mono', monospace;
     width: 100%;
     display: block;
     background: rgba(0, 0, 0, 0.2);
@@ -97,7 +97,7 @@ textarea {
 
 pre,
 code {
-    font-family: 'Courier New', Courier, Consolas, 'Ubuntu Mono', monospace;
+    font-family: Consolas, 'Ubuntu Mono', monospace;
 }
 
 .clearfix {
@@ -394,7 +394,21 @@ body.vscode-light .case-number {
     display: none;
 }
 
+.row {
+    display: inline;
+}
+
 @media only screen and (max-width: 365px) {
+    .actions {
+        border-top: 1px solid rgba(0, 0, 0, 0.5);
+    }
+
+    .row {
+        display: grid;
+        grid-auto-columns: 1fr;
+        grid-auto-flow: column;
+    }
+
     .size-warning {
         display: block;
     }