UI/UX improvements (#49)

* Update dependencies

Signed-off-by: Axel Boberg <[email protected]>

* Replace electron-packager with @electron/packager

Signed-off-by: Axel Boberg <[email protected]>

* Add a script for installing plugin dependencies regardless of OS

Signed-off-by: Axel Boberg <[email protected]>

* Use npm install rather than npm ci

Signed-off-by: Axel Boberg <[email protected]>

* Fix an issue causing the identity to not be set

Signed-off-by: Axel Boberg <[email protected]>

* Start tweaking UI to look more modern

Signed-off-by: Axel Boberg <[email protected]>

* Style tabs

Signed-off-by: Axel Boberg <[email protected]>

* Style the live switch of the caspar plugin

Signed-off-by: Axel Boberg <[email protected]>

* Update copy

Signed-off-by: Axel Boberg <[email protected]>

* Add a grid behind widgets in the edit mode

Signed-off-by: Axel Boberg <[email protected]>

* Tweak the border radius of popovers

Signed-off-by: Axel Boberg <[email protected]>

* Tweak the design of the inspector

Signed-off-by: Axel Boberg <[email protected]>

* Increase the opacity of the editing grid background

Signed-off-by: Axel Boberg <[email protected]>

* Add a border to the inspector form header

Signed-off-by: Axel Boberg <[email protected]>

* Set the correct flex-shrink modes for the main header and frame headers

Signed-off-by: Axel Boberg <[email protected]>

* Update screenshot

Signed-off-by: Axel Boberg <[email protected]>

* Update readme header

Signed-off-by: Axel Boberg <[email protected]>

* Add a link to releases

Signed-off-by: Axel Boberg <[email protected]>

* Delete screenshot

Signed-off-by: Axel Boberg <[email protected]>

* Add screenshot back

Signed-off-by: Axel Boberg <[email protected]>

---------

Signed-off-by: Axel Boberg <[email protected]>
Signed-off-by: Axel Boberg <[email protected]>
Co-authored-by: Axel Boberg <[email protected]>

README.md

@@ -1,13 +1,9 @@
-<img src="media/appicon.png" alt="drawing" width="80" style="margin-left:-10px;" />
-
 # Bridge  
 ![Test](https://github.com/svt/bridge/actions/workflows/.github/workflows/test.yml/badge.svg?branch=main)
 [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 [![REUSE status](https://api.reuse.software/badge/github.com/svt/bridge)](https://api.reuse.software/info/github.com/svt/bridge)  
 
-An extendable graphics playout client that's both a desktop app and a cloud service
-
-**This project is still in very early development**
+Extendable and lightweight graphics playout software
 
 ![Screenshot](/media/screenshot.png)
 
@@ -21,6 +17,7 @@ An extendable graphics playout client that's both a desktop app and a cloud serv
 - [Goals](#goals)
 - [Motivation](#motivation)
 - [Features](#features)
+- [Download and install](#download-and-install)
 - [Documentation and API](#full-documentation-and-api)
 - [Security](#security)
 - [License](#license)
@@ -32,11 +29,16 @@ As developers of production software we found ourselves in a position of rebuild
 
 ## Features
 
-- [ ] Core features are bundled (rundown, default types, timeline e.t.c.)
+- [ ] Core features are bundled (rundown, default types, clock, osc e.t.c.)
 - [ ] Can be run both as a desktop app and a cloud deployment
 - [ ] Can be used by many operators simultaneously with real time sync
 - [ ] A fully customizable grid layout
 
+## Download and install  
+Built packages are available on the releases page.
+
+[Releases and downloads](https://github.com/svt/bridge/releases)
+
 ## Full documentation and API
 
 The full documentation is hosted in this repository under the [`docs`](/docs/README.md) directory. Whether you want to build your own extension or learn more about the internal structure of Bridge - that's probably where you should head to start your journey.

app/bridge.css

@@ -69,53 +69,52 @@ button {
 }
 
 .Button,
+.Button--accent,
 .Button--primary,
 .Button--secondary,
 .Button--tertiary,
 .Button--ghost {
-  padding: 0.8em 1.5em;
+  padding: 0.9em 1.5em;
 
   font-size: 1em;
   font-family: var(--base-fontFamily--primary);
   text-decoration: none;
 
   border: none;
-  border-radius: 50px;
+  border-radius: 12px;
+
+  box-shadow: inset 0 0 0 1px var(--base-color--shade), 0 2px 5px rgba(0, 0, 0, 0.07);
 
-  color: var(--base-color--accent3);
-  background: var(--base-color--accent2);
+  color: var(--base-color);
+  background: inherit;
 
   cursor: default;
   white-space: nowrap;
+
+  transition: box-shadow 0.2s;
 }
 
 .Button:active,
+.Button--accent:active,
 .Button--primary:active,
 .Button--secondary:active,
-.Button--tertiary:active,
 .Button--ghost:active{
-  box-shadow: inset 0 0 0 2px var(--base-color--shade);
-}
-
-.Button--secondary {
-  color: var(--base-color);
-  background: var(--base-color--grey1);
+  opacity: 0.8;
+  box-shadow: inset 0 0 0 1px var(--base-color--shade), 0 2px 4px transparent;
 }
 
-.Button--tertiary {
-  color: var(--base-color);
-  background: var(--base-color--grey3);
+.Button--accent {
+  color: var(--base-color--accent2);
+  background: var(--base-color--accent1);
 }
 
 .Button--ghost {
   color: var(--base-color);
-  background: none;
-  border: 1px solid var(--base-color--shade);
 }
 
 .Button--small {
   display: inline-flex;
-  padding: 0.4em 0.75em;
+  padding: 0.5em 0.75em;
 
   align-items: center;
   justify-content: center;

app/components/Frame/index.jsx

@@ -30,7 +30,6 @@ const COPY_THEME_VARIABLES = [
   '--base-color',
   '--base-color--accent1',
   '--base-color--accent2',
-  '--base-color--accent3',
   '--base-color--accent4',
   '--base-color--accent5',
   '--base-color--grey1',

app/components/FrameComponent/index.jsx

@@ -34,7 +34,6 @@ const COPY_THEME_VARIABLES = [
   '--base-color',
   '--base-color--accent1',
   '--base-color--accent2',
-  '--base-color--accent3',
   '--base-color--accent4',
   '--base-color--accent5',
   '--base-color--grey1',

app/components/FrameComponent/style.css

@@ -8,20 +8,36 @@
   height: 100%;
 
   flex-direction: column;
+
+  overflow: hidden;
 }
 
-.FrameComponent.is-focused {
+.FrameComponent.is-focused::before {
+  content: '';
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  border-radius: 5px;
   box-shadow: inset 0 0 0 1px var(--base-color--accent4);
+
+  pointer-events: none;
+  z-index: 1;
 }
 
 .FrameComponent-header {
   position: relative;
   display: flex;
   width: 100%;
-  height: 40px;
+  height: 30px;
 
   padding: 0 10px;
 
+  font-size: 0.9em;
+  opacity: 0.7;
+
+  flex-shrink: 0;
+
   align-items: center;
   box-sizing: border-box;
 }

app/components/Grid/background.css

@@ -0,0 +1,24 @@
+.Grid-background {
+  position: absolute;
+  display: flex;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+.Grid-backgroundCol {
+  position: relative;
+  display: flex;
+  width: 100%;
+  height: 100%;
+
+  flex-direction: column;
+}
+
+.Grid-backgroundRow {
+  width: 100%;
+  height: 100%;
+
+  border: 0.5px solid var(--base-color--shade-3pct);
+}

app/components/Grid/background.jsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import './background.css'
+
+export function GridBackground ({ cols = 1, rows = 1}) {
+  return (
+    <div className='Grid-background'>
+      {
+        Array(cols).fill(undefined).map(i => {
+          return (
+            <div key={i} className='Grid-backgroundCol'>
+              {
+                Array(rows).fill(undefined).map(j => {
+                  return <div key={`${i}:${j}`} className='Grid-backgroundRow' />
+                })
+              }
+            </div>
+          )
+        })
+      }
+    </div>
+  )
+}

app/components/Grid/index.jsx

@@ -15,6 +15,8 @@ import { Notification } from '../Notification'
 import { WidgetSelector } from '../WidgetSelector'
 import { GridEmptyContent } from '../GridEmptyContent'
 
+import { GridBackground } from './background'
+
 import '../../../node_modules/react-grid-layout/css/styles.css'
 import '../../../node_modules/react-resizable/css/styles.css'
 
@@ -31,7 +33,7 @@ const ReactGridLayout = WidthProvider(RGL)
  */
 const GRID_COL_COUNT = 24
 const GRID_ROW_COUNT = 12
-const GRID_MARGIN_PX = 2
+const GRID_MARGIN_PX = 3
 
 export function Grid ({ children, data = {}, onChange }) {
   const [shared, applyShared] = React.useContext(SharedContext)
@@ -243,11 +245,10 @@ export function Grid ({ children, data = {}, onChange }) {
       {
         userIsEditingLayout &&
         <Notification
-          icon='edit'
-          type='inline'
+          type='fixed'
           title='Editing layout'
           description='Right click to manage widgets'
-          controls={<button className='Button Button--ghost' onClick={() => handleLeaveEditMode()}>Leave edit mode</button>}
+          controls={<button className='Button Button--ghost' onClick={() => handleLeaveEditMode()}>Done</button>}
         />
       }
       <Modal open={modalItemId} onClose={() => setModalItemId(undefined)} size='small' shade={false} draggable>
@@ -258,6 +259,10 @@ export function Grid ({ children, data = {}, onChange }) {
         />
       </Modal>
       <div ref={elRef} className='Grid' onContextMenu={e => handleContextMenu(e, { type: 'grid' })}>
+        {
+          userIsEditingLayout &&
+          <GridBackground cols={GRID_COL_COUNT} rows={GRID_ROW_COUNT} />
+        }
         {
           /*
           Render information and call to action

app/components/Grid/style.css

@@ -3,6 +3,9 @@
   width: 100%;
   height: 100%;
 
+  padding: 3px;
+  box-sizing: border-box;
+
   flex-grow: 1;
 }
 

app/components/GridItem/style.css

@@ -1,17 +1,26 @@
-
-
 .GridItem {
   width: 100%;
   height: 100%;
-  background: var(--base-color--background1);
+  background: var(--base-color--shade-3pct);
+  border-radius: 5px;
+
+  box-shadow: inset 0 0 0 1px var(--base-color--shade-3pct);
+  overflow: hidden;
+
+  transition: 0.1s box-shadow;
 }
 
 .GridItem.is-editing {
   box-shadow: inset 0 0 0 1px var(--base-color--shade3);
 }
 
+.GridItem .GridItem-content {
+  opacity: 1;
+  transition: 0.2s opacity;
+}
+
 .GridItem.is-editing .GridItem-content {
-  opacity: 0.4;
+  opacity: 0.3;
   pointer-events: none;
 }
 

app/components/Header/style.css

@@ -3,12 +3,12 @@
   display: flex;
   top: 0;
   width: 100%;
-  height: 39px;
+  height: 36px;
 
   padding: 0 8px 0 20px;
   box-sizing: border-box;
 
-  border-bottom: 1px solid var(--base-color--shade);
+  flex-shrink: 0;
 
   align-items: center;
   justify-content: space-between;

app/components/Notification/style.css

@@ -6,22 +6,37 @@
   box-sizing: border-box;
   justify-content: space-between;
 
-  background-color: var(--base-color--notificationBackground);
+  background-color: var(--base-color--accent1);
 
-  border-radius: 6px;
+  border-radius: 12px;
 
   --color-warning: #FFDC8C;
-  --color-text: var(--base-color--notificationColor);
+  --color-text: var(--base-color--accent2);
 
   color: var(--color-text);
 }
 
 .Notification--inline {
+  position: relative;
   border-radius: 0;
 }
 
+.Notification--fixed {
+  position: fixed;
+  width: unset;
+
+  left: 50%;
+  top: 10px;
+
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+
+  transform: translate(-50%, 0);
+
+  z-index: 10;
+}
+
 .Notification-size--normal {
-  padding: 0 0.7em 0 1.4em;
+  padding: 0 0.5em 0 1.4em;
 }
 
 .Notification-size--small {

app/components/Popover/style.css

@@ -12,7 +12,7 @@
 
   text-align: center;
 
-  border-radius: 10px;
+  border-radius: 15px;
   background: var(--base-color--background);
 
   box-sizing: border-box;

app/components/Popup/confirm.jsx

@@ -8,8 +8,8 @@ export function PopupConfirm ({ children, open, confirmText = 'Confirm', abortTe
     <Popup open={open}>
       {children}
       <div className='PopupConfirm-actions'>
-        <button className='Button--secondary' onClick={() => onChange(false)}>{abortText}</button>
-        <button className='Button--primary' onClick={() => onChange(true)}>{confirmText}</button>
+        <button className='Button' onClick={() => onChange(false)}>{abortText}</button>
+        <button className='Button--accent' onClick={() => onChange(true)}>{confirmText}</button>
       </div>
     </Popup>
   )

app/components/Popup/shortcut.jsx

@@ -38,9 +38,9 @@ export function PopupShortcut ({ open, shortcut, onChange = () => {} }) {
         }
       </div>
       <div className='PopupShortcut-actions'>
-        <button className='Button--secondary' onClick={() => onChange(undefined)}>Cancel</button>
-        <button className='Button--secondary' onClick={() => onChange(-1)}>Reset</button>
-        <button className='Button--primary' onClick={() => onChange(trigger)}>OK</button>
+        <button className='Button' onClick={() => onChange(undefined)}>Cancel</button>
+        <button className='Button' onClick={() => onChange(-1)}>Reset</button>
+        <button className='Button--accent' onClick={() => onChange(trigger)}>OK</button>
       </div>
     </Popup>
   )