mirror/cypress
1
0
Fork 0
mirror of https://github.com/cypress-io/cypress.git synced 2026-05-07 23:40:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

desktop: Added styles for initial global_mode page WIP

Browse Source
This commit is contained in:
Jennifer Shehane
2017-06-22 14:10:26 -04:00
parent fb529b98b4
commit e1e76f1f04
4 changed files with 60 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/desktop-gui/cypress/integration/global_mode_spec.coffee
+6 -6
View File
@@ -52,7 +52,7 @@ describe "Global Mode", ->
cy.get(".nav .logo img").should("have.attr", "src", "img/cypress-inverse.png")
it "shows message about using Cypress locally", ->
cy.contains("Verbiage about local Cypress usage")
cy.contains("Run this command")
it "displays help link", ->
cy.contains("a", "Need help?")
@@ -62,8 +62,8 @@ describe "Global Mode", ->
expect(@ipc.externalOpen).to.be.calledWith("https://on.cypress.io/adding-new-project")
it "shows project drop area with button to select project", ->
cy.get(".project-drop p:first").should("have.text", "Drag your project here")
cy.get(".project-drop button").should("have.text", "Select Project")
cy.get(".project-drop p:first").should("contain", "Drag your project here")
cy.get(".project-drop a").should("have.text", "select manually")
describe "dragging and dropping project", ->
it "highlights/unhighlights drop area when dragging over it/leaving it", ->
@@ -89,18 +89,18 @@ describe "Global Mode", ->
describe "selecting project", ->
it "adds project and opens it when selected", ->
cy.stub(@ipc, "showDirectoryDialog").resolves("/foo/bar")
cy.get(".project-drop button").click().then =>
cy.get(".project-drop a").click().then =>
expect(@ipc.showDirectoryDialog).to.be.called
cy.shouldBeOnProjectSpecs()
it "updates local storage", ->
cy.stub(@ipc, "showDirectoryDialog").resolves("/foo/bar")
cy.get(".project-drop button").click().should =>
cy.get(".project-drop a").click().should =>
expect(@getLocalStorageProjects()[0].id).to.equal(@projects[0].id)
it "does nothing when user cancels", ->
cy.stub(@ipc, "showDirectoryDialog").resolves()
cy.get(".project-drop button").click()
cy.get(".project-drop a").click()
cy.shouldBeOnIntro()
describe "going to project", ->
packages/desktop-gui/cypress/integration/projects_list_spec.coffee
+3 -3
View File
@@ -144,12 +144,12 @@ describe "Global Mode", ->
it "puts project at start when selected", ->
cy.stub(@ipc, "showDirectoryDialog").resolves("/foo/bar")
cy.get(".project-drop button").click().then =>
cy.get(".project-drop a").click().then =>
@assertOrder(["id-bar", "id-a", "id-b"])
it "puts project at start when selected and it already exists", ->
cy.stub(@ipc, "showDirectoryDialog").resolves("/project/b")
cy.get(".project-drop button").click().then =>
cy.get(".project-drop a").click().then =>
@assertOrder(["id-b", "id-a"])
it "puts project at start when clicked on in list", ->
@@ -166,7 +166,7 @@ describe "Global Mode", ->
it "limits to 5 when selected", ->
cy.stub(@ipc, "showDirectoryDialog").resolves("/foo/bar")
cy.get(".project-drop button").click().then =>
cy.get(".project-drop a").click().then =>
expect(@getLocalStorageProjects().length).to.equal(5)
describe "errors", ->
packages/desktop-gui/src/app/intro.jsx
+11 -9
View File
@@ -22,24 +22,25 @@ class Default extends Component {
render () {
return (
<div className='intro'>
<h2>Welcome to Cypress!</h2>
<p>Verbiage about local Cypress usage</p>
<p>Verbiage about local Cypress usage</p>
<p>Verbiage about local Cypress usage</p>
<h1>To Get Started...</h1>
<p>
<a onClick={this._openHelp} className='helper-docs-link'>
Run this command in your Console (or Terminal) in the project you want to test:
<a onClick={this._openHelp} className='helper-docs-link pull-right'>
<i className='fa fa-question-circle' /> Need help?
</a>
</p>
<p>
<pre><code>npm install this thang</code></pre>
</p>
<p>Or you can just drag your project here to run it:</p>
<div
className={cs('project-drop', { 'is-dragging-over': this.isDraggingOver })}
onDragOver={this._dragover}
onDragLeave={this._dragleave}
onDrop={this._drop}
>
<p>Drag your project here</p>
<p>- or -</p>
<button className='btn btn-xs btn-black' onClick={this._selectProject}>Select Project</button>
<i className='fa fa-cloud-upload'></i>
<p>Drag your project here or <a href="#" onClick={this._selectProject}>select manually</a>.</p>
</div>
<ProjectsList onSelect={this._projectSelected} />
</div>
@@ -51,7 +52,8 @@ class Default extends Component {
document.removeEventListener('drop', this._nope)
}
_selectProject = () => {
_selectProject = (e) => {
e.preventDefault()
ipc.showDirectoryDialog().then((path) => {
if (!path) return // user cancelled
packages/desktop-gui/src/app/intro.scss
+40 -10
View File
@@ -8,30 +8,60 @@
right: 0;
top: 40px;
h2 {
font-size: 20px;
margin-top: 0;
h1 {
color: #636668;
font-family: "Fira Sans";
font-weight: 100;
margin-top: 15px;
text-align: center;
}
p {
margin: 10px 0;
color: #636668;
font-size: 14px;
line-height: 21px;
}
pre {
clear: both;
border: 0;
background-color: #252831;
border-radius: 3px;
color: #eee;
margin-bottom: 15px;
}
}
.project-drop {
align-items: center;
background: #f8f8f8;
border: solid 2px #d3d3d3;
border-radius: 2px;
background: #F6F7F8;
border: dashed 2px #e3e4e5;
border-radius: 5px;
display: flex;
flex-direction: column;
height: 150px;
justify-content: center;
margin-bottom: 40px;
height: 150px;
.fa-cloud-upload {
font-size: 50px;
color: #d3d6d8;
}
a {
border-bottom: 1px dotted lighten($brand-primary, 30%);
color: lighten($brand-primary, 12%);
}
p {
color: #555;
color: #939698;
font-size: 1.4em;
}
&.is-dragging-over {
background: #eee;
border-color: $brand-primary;
background: #F6F7F8;
border: 2px solid lighten($brand-primary, 30%);
}
}