From 9e10780ece3dab7d7fd679b78d5c7489b299397b Mon Sep 17 00:00:00 2001
From: Thomas Wilburn <news@thomaswilburn.net>
Date: Sun, 1 Sep 2013 12:41:39 -0700
Subject: [PATCH] Split CSS into multiple LESS files. Fixed a save bug on
 untitled files.

---
 Gruntfile.js    |   9 ++-
 css/base.less   |   7 +++
 css/dialog.less |  42 +++++++++++++
 css/editor.less | 164 ------------------------------------------------
 css/tabs.less   |  42 +++++++++++++
 css/ui.less     |  68 ++++++++++++++++++++
 css/values.less |   0
 js/sessions.js  |   2 +-
 8 files changed, 168 insertions(+), 166 deletions(-)
 create mode 100644 css/base.less
 create mode 100644 css/dialog.less
 create mode 100644 css/tabs.less
 create mode 100644 css/ui.less
 create mode 100644 css/values.less

diff --git a/Gruntfile.js b/Gruntfile.js
index 1dca0b3..1e27a1e 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -9,7 +9,14 @@ module.exports = function(grunt) {
     less: {
       all: {
         files: {
-          "css/editor.css": "css/editor.less"
+          "css/editor.css": [
+            "css/values.less",
+            "css/base.less",
+            "css/editor.less",
+            "css/ui.less",
+            "css/tabs.less",
+            "css/dialog.less"
+          ]
         }
       }
     },
diff --git a/css/base.less b/css/base.less
new file mode 100644
index 0000000..346514c
--- /dev/null
+++ b/css/base.less
@@ -0,0 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  padding: 0;
+}
\ No newline at end of file
diff --git a/css/dialog.less b/css/dialog.less
new file mode 100644
index 0000000..02d819c
--- /dev/null
+++ b/css/dialog.less
@@ -0,0 +1,42 @@
+.dialog {
+  position: fixed;
+  width: 250px;
+  left: ~"calc(50% - 100px)";
+  top: 200px;
+  background: white;
+  box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);
+  z-index: 999;
+  padding: 10px;
+  border: 2px solid #AAA;
+
+  .button-row {
+    display: flex;
+    justify-content: space-around;
+    margin-top: 10px;
+    font-size: 16px;
+
+    button {
+      padding: 8px;
+      border: 1px solid #888;
+      text-align: center;
+      background: white;
+      min-width: 75px;
+      box-shadow: 4px 4px 8px rgba(0, 0, 0, .1);
+
+      &:hover {
+        border: 1px solid black;
+      }
+    }
+  }
+}
+
+.modal-overlay {
+  position: fixed;
+  content: "";
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: rgba(255, 255, 255, .8);
+  z-index: 99;
+}
\ No newline at end of file
diff --git a/css/editor.less b/css/editor.less
index b8506ec..52bb56a 100644
--- a/css/editor.less
+++ b/css/editor.less
@@ -1,171 +1,7 @@
-* {
-  box-sizing: border-box;
-}
-
-body {
-  margin: 0;
-  padding: 0;
-}
-
-.toolbar {
-  height: 30px;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  background: white;
-  line-height: 30px;
-  list-style-type: none;
-  z-index: 99;
-  
-  hr {
-    border: 1px solid rgba(0, 0, 0, .2);
-    margin: 4px 8px;
-  }
-  
-  & > li {
-    display: inline-block;
-    padding: 0 8px;
-    line-height: initial;
-    
-    &:hover {
-      background: #EEE;
-    }
-    
-    .menu {
-      display: none;
-      min-width: 150px;
-      position: absolute;
-      z-index: 999;
-      background: white;
-      padding: 0;
-      margin-left: -8px;
-      box-shadow: 4px 8px 16px rgba(0, 0, 0, .1);
-      
-      li {
-        display: block;
-        padding: 4px 8px;
-        
-        &:hover {
-          background: #EEE;
-        }
-      }
-    }
-    
-    &:hover {
-     
-     .menu {
-       display: block;
-     }
-     
-    }
-    
-  }
-}
-
-.tabs {
-  height: 32px;
-  width: 100%;
-  background: #EEE;
-  padding: 2px;
-  display: flex;
-  justify-content: flex-start;
-  
-  span {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    max-width: 300px;
-    padding: 0px 4px;
-    margin-right: 3px;
-    background: white;
-    color: #666;
-    border-bottom: 4px solid white;
-    flex: 0 1 auto;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-    overflow: hidden;
-    
-    &.active {
-      border-bottom: 4px solid #808;
-      color: black;
-    }
-    
-    .close {
-      font-size: 18px;
-      text-align: center;
-      color: #808;
-      position: relative;
-      top: -2px;
-      margin-left: 4px;
-      
-      &:hover {
-        color: black;
-      }
-    }
-  }
-}
-
 .editor-container {
   position: absolute;
   top: 60px;
   bottom: 30px;
   left: 0;
   right: 0;
-}
-
-.bottom-bar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  height: 30px;
-  padding: 5px;
-  margin: 0;
-  
-  select {
-    height: 20px;
-  }
-}
-
-.dialog {
-  position: fixed;
-  width: 250px;
-  left: ~"calc(50% - 100px)";
-  top: 200px;
-  background: white;
-  box-shadow: 4px 4px 8px rgba(0, 0, 0, .2);
-  z-index: 999;
-  padding: 10px;
-  border: 2px solid #AAA;
-
-  .button-row {
-    display: flex;
-    justify-content: space-around;
-    margin-top: 10px;
-    font-size: 16px;
-
-    button {
-      padding: 8px;
-      border: 1px solid #888;
-      text-align: center;
-      background: white;
-      min-width: 75px;
-      box-shadow: 4px 4px 8px rgba(0, 0, 0, .1);
-
-      &:hover {
-        border: 1px solid black;
-      }
-    }
-  }
-}
-
-.modal-overlay {
-  position: fixed;
-  content: "";
-  top: 0;
-  bottom: 0;
-  left: 0;
-  right: 0;
-  background: rgba(255, 255, 255, .8);
-  z-index: 99;
 }
\ No newline at end of file
diff --git a/css/tabs.less b/css/tabs.less
new file mode 100644
index 0000000..cf55841
--- /dev/null
+++ b/css/tabs.less
@@ -0,0 +1,42 @@
+.tabs {
+  height: 32px;
+  width: 100%;
+  background: #EEE;
+  padding: 2px;
+  display: flex;
+  justify-content: flex-start;
+  
+  span {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    max-width: 300px;
+    padding: 0px 4px;
+    margin-right: 3px;
+    background: white;
+    color: #666;
+    border-bottom: 4px solid white;
+    flex: 0 1 auto;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    
+    &.active {
+      border-bottom: 4px solid #808;
+      color: black;
+    }
+    
+    .close {
+      font-size: 18px;
+      text-align: center;
+      color: #808;
+      position: relative;
+      top: -2px;
+      margin-left: 4px;
+      
+      &:hover {
+        color: black;
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/css/ui.less b/css/ui.less
new file mode 100644
index 0000000..b8ff302
--- /dev/null
+++ b/css/ui.less
@@ -0,0 +1,68 @@
+.toolbar {
+  height: 30px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  background: white;
+  line-height: 30px;
+  list-style-type: none;
+  z-index: 99;
+  
+  hr {
+    border: 1px solid rgba(0, 0, 0, .2);
+    margin: 4px 8px;
+  }
+  
+  & > li {
+    display: inline-block;
+    padding: 0 8px;
+    line-height: initial;
+    
+    &:hover {
+      background: #EEE;
+    }
+    
+    .menu {
+      display: none;
+      min-width: 150px;
+      position: absolute;
+      z-index: 999;
+      background: white;
+      padding: 0;
+      margin-left: -8px;
+      box-shadow: 4px 8px 16px rgba(0, 0, 0, .1);
+      
+      li {
+        display: block;
+        padding: 4px 8px;
+        
+        &:hover {
+          background: #EEE;
+        }
+      }
+    }
+    
+    &:hover {
+     
+     .menu {
+       display: block;
+     }
+     
+    }
+    
+  }
+}
+
+.bottom-bar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 30px;
+  padding: 5px;
+  margin: 0;
+  
+  select {
+    height: 20px;
+  }
+}
\ No newline at end of file
diff --git a/css/values.less b/css/values.less
new file mode 100644
index 0000000..e69de29
diff --git a/js/sessions.js b/js/sessions.js
index d5f16fa..d10073c 100644
--- a/js/sessions.js
+++ b/js/sessions.js
@@ -135,7 +135,7 @@ define([
 
     if (tab.modified) {
       dialog(
-        tab.file.entry.name + "has been modified. Do you want to save changes?",
+        tab.fileName + " has been modified. Do you want to save changes?",
         [{label: "Save", value: true}, {label: "Don't save", value: false}],
         function(confirm) {
           if (confirm) {