Skip to content

Commit

Permalink
UI updates.
Browse files Browse the repository at this point in the history
  • Loading branch information
Mikael Kindborg committed Mar 10, 2016
1 parent 8a5a699 commit f26afc4
Show file tree
Hide file tree
Showing 3 changed files with 36 additions and 7 deletions.
28 changes: 28 additions & 0 deletions hyper/ui/css/hyper-common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,13 @@ strong
color: #ffffff !important;
}

.et-btn-green-no-highlight
{
border-color: #54dfb3 !important;
background-color: #54dfb3 !important;
color: #ffffff !important;
}

.et-btn-blue
{
border-color: #6bc6ce !important;
Expand All @@ -122,6 +129,13 @@ strong
color: #ffffff !important;
}

.et-btn-blue-no-highlight
{
border-color: #6bc6ce !important;
background-color: #6bc6ce !important;
color: #ffffff !important;
}

.et-btn-indigo
{
border-color: #b48b9b !important;
Expand All @@ -137,6 +151,13 @@ strong
color: #ffffff !important;
}

.et-btn-indigo-no-highlight
{
border-color: #b48b9b !important;
background-color: #b48b9b !important;
color: #ffffff !important;
}

.et-btn-arctic
{
border-color: #f3f3f3 !important;
Expand Down Expand Up @@ -167,6 +188,13 @@ strong
color: #ffffff !important;
}

.et-btn-stone-no-highlight
{
border-color: #777777 !important;
background-color: #777777 !important;
color: #ffffff !important;
}

.et-btn-stone-light
{
border-color: #999999 !important;
Expand Down
1 change: 1 addition & 0 deletions hyper/ui/css/hyper-ui.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -365,6 +365,7 @@ TODO: Remove, use automatic width for all buttons.
{
font-size: 70%;
padding: 3px;
cursor: auto !important;
}

.project-list .project-entry .app-icon
Expand Down
14 changes: 7 additions & 7 deletions hyper/ui/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -536,7 +536,7 @@ <h2>Introduction</h2>

<img src="images/getting-started-mobile-app.jpg" style="float:right;width:300px;height:auto;margin-left:20px;margin:bottom:20px;"/><p>Evothings Studio consists of two connected parts, Evothings Workbench (the application you are currently running) and the Evothings Viewer app running on your mobile device(s). You need both parts to be able to use Evothings Studio.</p>

<p>Run apps on connected Viewers by clicking <button type="button" class="btn et-btn-green style-small-button">Run</button> on the apps listed under <strong>Examples</strong> and <strong>My Apps</strong>. The currently running app will be automatically reloaded when saving edited code files.</p>
<p>Run apps on connected Viewers by clicking <button type="button" class="btn et-btn-green-no-highlight style-small-button">Run</button> on the apps listed under <strong>Examples</strong> and <strong>My Apps</strong>. The currently running app will be automatically reloaded when saving edited code files.</p>

<h2>Step 1: Install Evothings Viewer</h2>

Expand All @@ -546,22 +546,22 @@ <h2>Step 2: Connect to the Workbench from the Viewer</h2>

<p>To connect the Evothings Viewer app to the Workbench, you need Internet access and a connect key.</p>

<p>Go to the <button type="button" class="btn et-btn-stone style-small-button" style="border-radius:0;padding-left:8px;padding-right:8px;">Connect</button> screen and click the <button type="button" class="btn et-btn-green style-small-button">Get Key</button> button to obtain a connect key. Use this key when connecting from the Viewer. Once connected, your session has no time limit. Click the "Get Key" button again if the connect key times out.</p>
<p>Go to the <button type="button" class="btn et-btn-stone-no-highlight style-small-button" style="border-radius:0;padding-left:8px;padding-right:8px;">Connect</button> screen and click the <button type="button" class="btn et-btn-green-no-highlight style-small-button">Get Key</button> button to obtain a connect key. Use this key when connecting from the Viewer. Once connected, your session has no time limit. Click the "Get Key" button again if the connect key times out.</p>

<p>Click <button type="button" class="btn et-btn-blue style-small-button">Login</button> on the Connect screen to get a Quick-Connect button in the Evothings Viewer app. This button is displayed when you restart the Viewer and allows you to reconnect to the Workbench where you are logged in, without entering a connect key again. This makes it much quicker to connect to the same Workbench.</p>
<p>Click <button type="button" class="btn et-btn-blue-no-highlight style-small-button">Login</button> on the Connect screen to get a Quick-Connect button in the Evothings Viewer app. This button is displayed when you restart the Viewer and allows you to reconnect to the Workbench where you are logged in, without entering a connect key again. This makes it much quicker to connect to the same Workbench.</p>

<h2>Step 3: How to create a new app</h2>

<p>To create your own apps you have three options. Copy one of the Evothings example apps by clicking the <button type="button" class="btn et-btn-indigo style-small-button">Copy</button> button, and modify it for your own purposes, or click the <button type="button" class="btn et-btn-indigo style-small-button">New</button> button to create a basic app template.</p>
<p>To create your own apps you have three options. Copy one of the Evothings example apps by clicking the <button type="button" class="btn et-btn-indigo-no-highlight style-small-button">Copy</button> button, and modify it for your own purposes, or click the <button type="button" class="btn et-btn-indigo-no-highlight style-small-button">New</button> button to create a basic app template.</p>
<p>You can also drag and drop any .html file (typically index.html) to the Workbench window to add an existing app under <strong>My Apps</strong>.</p>
<p>To add project with ECMAScript 6 support, drag the project folder or the evothings.json file into the Workbench window. Learn more in the <a class="button-ecmascript6-documentation" href="javascript:void(0)">ECMAScript documentation for Evothings Studio</a>.</p>

<p>Arrange apps using drag and drop (the list of Evothings example apps cannot be rearranged though). Click the close icon (x) to delete an app entry. This will NOT delete the application files.</p>

<h2>Step 4: Code in your favourite editor end enjoy live reload</h2>

<p>Launch the app you wish to work on in connected Viewers using the <button type="button" class="btn et-btn-green style-small-button">Run</button> button. This makes it the active app. When you save any code file for the active app, it will automatically get reloaded on all connected mobile devices.</p>
<p>To edit the code of an app, click the <button type="button" class="btn et-btn-blue style-small-button">Code</button> button on the app under <strong>My Apps</strong>. This will open a system file browser for your app. (Note that you cannot edit Evothings example apps directly, you need to make a copy first.)</p>
<p>Launch the app you wish to work on in connected Viewers using the <button type="button" class="btn et-btn-green-no-highlight style-small-button">Run</button> button. This makes it the active app. When you save any code file for the active app, it will automatically get reloaded on all connected mobile devices.</p>
<p>To edit the code of an app, click the <button type="button" class="btn et-btn-blue-no-highlight style-small-button">Code</button> button on the app under <strong>My Apps</strong>. This will open a system file browser for your app. (Note that you cannot edit Evothings example apps directly, you need to make a copy first.)</p>
<p>From the system file browser, open the files you wish to edit in your editor of choice. Edit the file and press save in the editor to reload the app.</p>
<p>For further details, please <a class="button-documentation" href="javascript:void(0)">visit the online documentation</a>.</p>
<p><strong>Happy coding!</strong></p>
Expand Down Expand Up @@ -593,7 +593,7 @@ <h1>Connect and Login</h1>

<p>New in this release is support for ECMAScript 6. Visit the <a class="button-ecmascript6-documentation" href="javascript:void(0)">ECMAScript 6 documentation page</a> to learn about the new project file structure and the new settings in evothings.json. Use the example app "Hello ECMAScript 6" as a starting point for your projects.</p>

<p><strong>Read the <a class="button-getting-started" href="javascript:void(0)">Getting Started Guide</a> for detailed first-time instructions. Evothings Studio consists of Evothings Workbench and the Evothings Viewer mobile app (get it from <a class="button-evothings-viewer-on-google-play" href="javascript:void(0)">Google Play</a> or <a class="button-evothings-viewer-on-itunes" href="javascript:void(0)">Apple App Store</a>). To run apps in Evothings Viewer, you need Internet access and a connect key that you get below.</strong></p>
<p>Read the <a class="button-getting-started" href="javascript:void(0)">Getting Started Guide</a> for detailed first-time instructions. Evothings Studio consists of Evothings Workbench and the Evothings Viewer mobile app (get it from <a class="button-evothings-viewer-on-google-play" href="javascript:void(0)">Google Play</a> or <a class="button-evothings-viewer-on-itunes" href="javascript:void(0)">Apple App Store</a>). To run apps in Evothings Viewer, you need Internet access and a connect key that you get below.</p>

</div>

Expand Down

0 comments on commit f26afc4

Please sign in to comment.