Skip to content

Commit

Permalink
Better New-File Dialog (#264)
Browse files Browse the repository at this point in the history 
* fancier new-file dialog (#218)

* fix validation to check for duplicate file names

* style file pane in same style as new file popup

* sassier variables
  • Loading branch information
@mrjacobbloom
mrjacobbloom authored May 10, 2017
1 parent 107f417 commit 276555b
Show file tree
Hide file tree
Showing 7 changed files with 462 additions and 95 deletions.
35 changes: 30 additions & 5 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,35 @@
<div class="downArrow"></div>
</div>
</div>

<!-- NEW FILE POPUP -->
<div id="newFilePopup">
<h2>
New file
</h2>
<div class="content">
<div id="fileNameContainer">
<span id="fileName" contenteditable="true"></span><span id="fileExtension"></span>
</div>
<div class="fileTypeButtons">
<div class="squareButton fileTypeButton selected" data-ext=".html">HTML</div>
<div class="squareButton fileTypeButton" data-ext=".css">CSS</div>
<div class="squareButton fileTypeButton disabled" data-ext=".js">JavaScript</div>
</div>
<div class="errorBox">
The file name has one of the following issues:
<ul>
<li>Length is not between 1-255</li>
<li>Contains an invaild character</li>
<li>A file with that name already exists</li>
</ul>
</div>
</div>
<div class = "newFileFooter">
<div class="newFileFooter-button" id="closeFileName">Close</div>
<div class="newFileFooter-button" id="createFileName">Create</div>
</div>
</div>

<div class="topBar">
<div class="left">
Expand Down Expand Up @@ -111,11 +140,7 @@
</iframe>
</div>
<div class="filePane">
<div class="file selected">
<div class="file-name" data-file="index.html">index.html</div>
</div><div class="add-file">
<div class="file-name">+</div>
</div>
<div class="squareButton file selected" data-file="index.html">index.html</div><div class="squareButton add-file">+</div>
</div>
</div>
<div class="rightSide">
Expand Down
74 changes: 74 additions & 0 deletions resources/css/files.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
/*
Error: Undefined variable: "$accent_color".
on line 7 of css/files.scss
2: display: inline-block;
3: width: 100px;
4: height: 100px;
5: margin: 10px 0;
6: padding: 10px;
7: border: 1px solid $accent_color;
8: border-radius: 5px;
9: font-size: 16px;
10: line-height: 100px;
11: text-align: center;
12: background-color: $accent_color;
Backtrace:
css/files.scss:7
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/script/tree/variable.rb:49:in `_perform'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/script/tree/node.rb:58:in `perform'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/script/tree/list_literal.rb:63:in `block in _perform'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/script/tree/list_literal.rb:63:in `map'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/script/tree/list_literal.rb:63:in `_perform'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/script/tree/node.rb:58:in `perform'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:397:in `visit_prop'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `block (2 levels) in visit_rule'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `map'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:433:in `block in visit_rule'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:181:in `with_environment'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:431:in `visit_rule'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `block in visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `block in with_base'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/stack.rb:115:in `with_frame'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/stack.rb:79:in `with_base'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:160:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `block in visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `map'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:52:in `visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:169:in `block in visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:181:in `with_environment'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:168:in `visit_children'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `block in visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:188:in `visit_root'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/base.rb:36:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:159:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/visitors/perform.rb:8:in `visit'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/root_node.rb:36:in `css_tree'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/tree/root_node.rb:29:in `render_with_sourcemap'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/engine.rb:381:in `_render_with_sourcemap'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/engine.rb:298:in `render_with_sourcemap'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:492:in `update_stylesheet'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:215:in `block in update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:209:in `each'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:209:in `update_stylesheets'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:473:in `on_file_changed'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/lib/sass/plugin/compiler.rb:331:in `block in watch'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/vendor/listen/lib/listen/listener.rb:252:in `call'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/vendor/listen/lib/listen/listener.rb:252:in `on_change'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/vendor/listen/lib/listen/listener.rb:290:in `block in initialize_adapter'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/vendor/listen/lib/listen/adapters/polling.rb:48:in `call'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/vendor/listen/lib/listen/adapters/polling.rb:48:in `poll_changed_directories'
/Library/Ruby/Gems/2.0.0/gems/sass-3.4.23/vendor/listen/lib/listen/adapter.rb:299:in `block in start_poller'
*/
body:before {
white-space: pre;
font-family: monospace;
content: "Error: Undefined variable: \"$accent_color\".\A on line 7 of css/files.scss\A \A 2: display: inline-block;\A 3: width: 100px;\A 4: height: 100px;\A 5: margin: 10px 0;\A 6: padding: 10px;\A 7: border: 1px solid $accent_color;\A 8: border-radius: 5px;\A 9: font-size: 16px;\A 10: line-height: 100px;\A 11: text-align: center;\A 12: background-color: $accent_color;"; }
148 changes: 148 additions & 0 deletions resources/css/files.scss
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,148 @@
.squareButton {
display: inline-block;
width: 100px;
height: 100px;
margin: 10px 0;
padding: 10px;
border: 1px solid $accent_color;
border-radius: 5px;
font-size: 16px;
line-height: 100px;
text-align: center;
background-color: $accent_color;
cursor: pointer;
vertical-align: text-top;
&:hover {
background: #FA8;
}
&.selected {
box-shadow: inset 0 0 0 5px white;
}
&.disabled {
background: #aaa !important;
border-color: #aaa;
color: #ddd;
cursor: default;
}
}

.green {
background-color: $nav_grad_top;
font-family: 'Source Sans Pro', sans-serif;
color: white;
}

/**** FILES AREA ****/
.filePane {
@extend .green;
height: 200px;
box-sizing: border-box;
border-top: 5px solid $borders_color;
padding: 3px;
overflow-y: scroll;
.squareButton {
margin: 3px;
}
.add-file {
font-size: 50px;
}
}


/**** NEW FILE POPUP ****/
#newFilePopup {
width: 450px;
position: fixed;
top: calc( 50% - ( 350px / 2 ) );
left: calc( 50% - ( 450px / 2 ) );
border: 1px solid #42ba92;
border-radius: 5px;
padding: 10px;
text-align: center;
@extend .green;
display: none;
z-index: 4;
.content {
margin-bottom: 10px;
padding: 0 25px;
}
&.error {
#fileNameContainer {
border-color: #F45;
}
#createFileName {
background: #aaa !important;
border-color: #aaa;
color: #ddd;
cursor: default;
}
.errorBox {
opacity: 1;
max-height: 500px;
}
}
}

.errorBox {
margin: 0;
text-align: left;
font-size: 70%;
color: #A00;
display: inline-block;
overflow: hidden;
opacity: 0;
max-height: 1px;
transition: .4s all;
}

#fileNameContainer {
display: inline-block;
width: 100%;
padding: 5px 0;
//padding-left: 47px;
box-sizing: border-box;
overflow: hidden;
text-align: center;
font-family: "Source Sans Pro", sans-serif;
font-size: 16pt;
background: $inset_color;
border-radius: 5px;
white-space: nowrap;
border: 1px solid transparent;
transition: .4s border-color;
}
#fileName {
min-width: 10px;
display: inline-block;
color: white;
outline: none !important;
}
#fileExtension {
color: #FA8;
}

.fileTypeButtons {
display:flex;
justify-content: space-between;
align-content: center;
}

.newFileFooter {
background: $inset_color;
padding: 5px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px
}
.newFileFooter-button {
border: 1px solid $accent_color;
border-radius: 5px;
display: inline-block;
background-color: $accent_color;
padding: 5px 10px;
margin: 0 2px;
cursor:pointer;
transition: all .4s;
&:hover {
background: #FA8;
}
}
Loading

0 comments on commit 276555b

Please sign in to comment.