Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Continuing improving the UI #47

Open
wants to merge 21 commits into
base: master
Choose a base branch
from
Open

Continuing improving the UI #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
89810d7
Quit button says 'quit'
Nov 19, 2015
3b8dda5
Fixing viewing container that was forgotten about
Nov 21, 2015
bb97e85
Softening the gradient on active buttons
Nov 25, 2015
58b20e0
different layout on header
Nov 29, 2015
37403d8
a few styling changes
Nov 29, 2015
2d4f2f8
Small copy in a screen that makes sense for it to be caption sized
Dec 2, 2015
7050b10
forgot to put back dn class on a container
Dec 2, 2015
a37eaf6
Change to UI dimensions, plus figuring out audio controls
Dec 16, 2015
42291af
Fixing merge conflicts
Dec 16, 2015
a3b1685
Cleaning up CSS, fixing wrong copy on sharing container
Dec 16, 2015
1241cea
more description 'share screen' icon
Dec 19, 2015
ab3c56a
Bumping icon sizes a bit
Dec 19, 2015
3669362
Fixing back and quit buttons padding relative to their header
Dec 19, 2015
19e2329
Adding more padding to buttons
Dec 19, 2015
db60967
Merge branch 'master' of github.com:maxogden/screencat into ui-improv…
Dec 23, 2015
0e48ef1
Small styling changes
Dec 27, 2015
9d4b0e7
Fixed header, new dimension that looks better, etc
Dec 29, 2015
431c0dc
Put show window before stop viewing
Jan 11, 2016
fb8a680
Merge branch 'master' of github.com:maxogden/screencat into ui-improv…
Jan 11, 2016
e6cf955
New back arrow style, fixed capturer's list
Jan 12, 2016
90f656e
Latest with everything improved to look its best hopefully :)
Jan 19, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
84 changes: 60 additions & 24 deletions app.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,44 +12,80 @@
</head>
<body class="wi-100">
<div class="sharing-container dn">
<main class="center mw8 phm phl-ns ptl pbxl">
<p class="mono gray lh-copy thin mw7 f4 f3-ns">
<header class="main-header bb b--light-gray pvs">
<div class="center mw8 phm phl-ns">
<div class="main-header-section">
</div>
<div class="main-header-section">
<h1 class="f3 book dib man">ScreenCat</h1>
</div>
<div class="main-header-section">
</div>
</div>
</header>
<main class="main-content center mw8 phl phl-ns ptl pbxl">
<p class="mono gray lh-copy mw7 cb tc f4">
You are now sharing your screen.
<a class="destroy-button small link tc pas db w-20 btn" style="display: inline;">Stop</a>
</p>
<div class="interface-wrap">
<a class="w-100 db destroy-button btn-interface tc f4 mrm mbm">Stop Sharing</a>
</div>
</main>
</div>

<div class="viewing-container dn">
<main class="center mw8 phm phl-ns ptl pbxl">
<p class="mono gray lh-copy thin mw7 f4 f3-ns">
<header class="main-header bb b--light-gray pvs">
<div class="center mw8 phm phl-ns">
<div class="main-header-section">
</div>
<div class="main-header-section">
<h1 class="f3 book dib man">ScreenCat</h1>
</div>
<div class="main-header-section">
</div>
</div>
</header>
<main class="main-content center mw8 phl phl-ns pts pbxl">
<p class="mono gray lh-copy mw7 cb tc f4">
You are now viewing a remote screen.
<br />
<a class="destroy-button small link tc pas db w-20 btn" style="display: inline;">Stop Viewing</a>
<a class="show-button small link tc pas db w-20 btn" style="display: inline;">Show Window</a>
</p>
<div class="interface-wrap">
<div class="w-100 vol-ctrl mrm mbm">
<div class="dib vol-ctrl-wrap">
<svg width="12" height="20" viewBox="10 0 14 32" xmlns="http://www.w3.org/2000/svg"><title>Audio</title><path d="M7 8h6.632v16H7V8zm6.632 0L25 0v32l-11.368-8V8z" fill="#539be2" fill-rule="evenodd"/></svg>
<input type="range" min="0" max="100">
<svg width="21" height="20" viewBox="0 0 34 32" xmlns="http://www.w3.org/2000/svg"><title>Audio</title><g fill="none" fill-rule="evenodd"><path d="M0 8h6.632v16H0V8zm6.632 0L18 0v32L6.632 24V8z" fill="#539be2"/><path d="M21.085 9S25 11.015 25 16.137 21 23.1 21 23.1M25.12 6s5.554 2.86 5.554 10.124C30.674 23.39 25 26 25 26" stroke="#539be2" stroke-width="2"/></g></svg>
</div>
</div>
<a class="w-100 db show-button btn-interface tc f4 mrm mbm">Show Window</a>
<a class="w-100 db destroy-button btn-interface tc f4 mrm mbm">Stop Viewing</a>
</div>
</main>
</div>

<div class="content-container">
<header class="main-header bb b--light-gray pvs">
<div class="center mw8 phm phl-ns">
<h1 class="f3 book dib prm man">ScreenCat</h1>
<div class="fr">
<a class="back-button small link tc pas btn btn-plain"></a>
<a class="quit-button small link tc pas btn btn-plain"></a>
<div class="main-header-section">
<a class="back-button small link tc pas btn btn-plain dn">Back</a>
</div>
</div>
<div class="main-header-section">
<h1 class="f3 book dib man">ScreenCat</h1>
</div>
<div class="main-header-section">
<a class="quit-button small link tc pas btn btn-plain">quit</a>
</div>
</div>
</header>
<main class="center mw8 phm phl-ns ptl">
<main class="main-content center mw8 phl phl-ns prm">
<div class="choose-container">
<div class="cr">
<p class="mbl">While sharing the remote person will have full access to your desktop, mouse and keyboard.</p>
<div class="w-50 left">
<a class="share-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mrm">Share Your Screen</a>
<div class="w-100">
<a class="share-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mbm">Share Your Screen</a>
</div>
<div class="w-50 left">
<a class="join-button tc phs pvs pvm-ns f4 btn w-100 mw-fill mlm">Join Remote Screen</a>
<div class="w-100">
<a class="join-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Join Remote Screen</a>
</div>
</div>
</div>
Expand All @@ -64,27 +100,27 @@ <h1 class="f3 book dib prm man">ScreenCat</h1>
<div class="share-container dn">
<h2 class="f4 ttu book">Share</h2>
<div class="cr">
<div class="w-80 left prl">
<div class="w-100 left mbm">
<input type="text" class="code-copy-input pam brs ba b--light-gray w-100 mw-fill" autofocus></input>
</div>
<div class="w-20 left">
<div class="w-100 left">
<div class="code-copy-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Copy</div>
</div>
</div>
<p>Send this code to the person you want to share your screen with. They can use <a href="https://github.com/maxogden/screencat/releases/latest" class="open-externally">ScreenCat.app</a> or <a href="http://maxogden.github.io/screencat/remote" class="open-externally">http://maxogden.github.io/screencat/remote</a> in Chrome/Firefox. <strong>Please wait here until they connect.</strong></p>
<p class="small">Send this code to the person you want to share your screen with. They can use <a href="https://github.com/maxogden/screencat/releases/latest" class="open-externally">ScreenCat.app</a> or <a href="http://maxogden.github.io/screencat/remote" class="open-externally">http://maxogden.github.io/screencat/remote</a> in Chrome/Firefox. Please wait here until they connect.</p>
</div>

<div class="join-container dn">
<h2 class="f4 ttu book cl">join</h2>
<div class="cr">
<div class="w-80 left prl">
<div class="w-100 left mbm">
<input type="text" class="code-paste-input pam brs ba b--light-gray w-100 mw-fill" value="Loading..." autofocus></input>
</div>
<div class="w-20 left">
<div class="w-100">
<div class="code-paste-button tc phs pvs pvm-ns f4 btn w-100 mw-fill">Connect</div>
</div>
</div>
<p>Enter a code to connect to a remote screen. <span class="code-mdns">Found <a href="javascript:void(0)" class="code-mdns-button"></a> near you</span></p>
<p class="f5">Enter a code to connect to a remote screen. <span class="code-mdns">Found <a href="javascript:void(0)" class="code-mdns-button"></a> near you</span></p>
</div>

</main>
Expand Down
4 changes: 2 additions & 2 deletions electron.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ var icons = {
}

var mb = menubar({
width: 700,
height: 300,
width: 400,
height: 400,
index: 'file://' + path.join(__dirname, 'app.html'),
icon: 'file://' + icons.disconnected
})
Expand Down
Binary file modified fonts/icomoon.eot
View file
Open in desktop
Binary file not shown.
9 changes: 5 additions & 4 deletions fonts/icomoon.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified fonts/icomoon.ttf
View file
Open in desktop
Binary file not shown.
Binary file modified fonts/icomoon.woff
View file
Open in desktop
Binary file not shown.
14 changes: 9 additions & 5 deletions remote.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,13 +30,17 @@
<div class="content-container">
<header class="main-header bb b--light-gray pvs">
<div class="center mw8 phm phl-ns">
<h1 class="f3 book dib prm man">ScreenCat</h1>
<div class="fr">
<a class="back-button small link tc pas dn btn btn-plain"></a>
<div class="main-header-section">
<a class="back-button small link tc pas btn btn-plain"></a>
</div>
</div>
<div class="main-header-section">
<h1 class="f3 book dib man">ScreenCat</h1>
</div>
<div class="main-header-section">
</div>
</div>
</header>
<main class="center mw8 phm phl-ns ptl">
<main class="main-content center mw8 phm phl-ns ptl">
<div class="join-container">
<h2 class="f4 ttu book cl">join</h2>
<div class="cr">
Expand Down
Loading