UI corruption fix.

adobe · Dec 17, 2015 · 713a0dd · 713a0dd
1 parent 3598ae3
commit 713a0dd
Show file tree

Hide file tree

Showing 3 changed files with 161 additions and 154 deletions.
diff --git a/src/extensions/default/NavigationAndHistory/html/recentfiles-template.html b/src/extensions/default/NavigationAndHistory/html/recentfiles-template.html
@@ -1,156 +1,4 @@
-<style>
-    #mrof-container {
-        display:block;
-        width:60%;
-        height:50%;
-        background: #3c3f41;
-        position:absolute;
-        left:20%;
-        top:25%;
-        z-index: 2000;
-        max-width: 900px;
-    }
-
-    #mrof-container > #mrof-list {
-        display: block;
-        width: 100%;
-        height: calc(100% - 60px);
-        position: absolute;
-        left: 0%;
-        top: 30px;
-        padding: 10px;
-        overflow-y: auto;
-        overflow-x: hidden;
-        margin: 0px;
-        box-sizing: border-box; 
-    }
-
-    #mrof-container > #mrof-list > li {
-        position:relative;
-        display: block;
-        height: 22px;
-        margin-left: 18px;
-        margin-top: 4px;
-        float: left;
-        width: calc(25% - 20px);
-        min-width: 230px;
-    }
-
-    #mrof-container > #mrof-list > li.highlight {
-        background: #2d2e30;
-    }
-
-    #mrof-container > #mrof-list > li > a.mroitem {
-        color: #ffffff;
-        font-size: 13px;
-        height: 22px;
-        text-decoration: none;
-        display: block;
-        line-height: 15px;
-        padding: 3px;
-        cursor: default;
-        padding-left: 10px;
-        width: 100%;
-        box-sizing: border-box;
-    }
-
-    #mrof-container > #mrof-list > li > a.mroitem > .extension {
-        color: #adb9bd;
-    }
-
-    #mrof-container > #mrof-list > li > a.mroitem:focus {
-        background: transparent;
-        color:#8fddff;
-        box-shadow: none !important;
-        padding-left: 10px;
-    }
-
-    #mrof-container > #mrof-list > li.highlight > a.mroitem {
-        background: transparent;
-        color:#8fddff;
-        box-shadow: none !important;
-        padding-left: 10px;
-    }
-
-    #mrof-container > #mrof-list > li > a.mroitem:focus > .extension {
-        color:#8fddff;
-    }
-
-    #mrof-container > .header { 
-        color: #adb9bd;
-        width: 100%;
-        height: 30px;
-        position: absolute;
-        top: 0px;
-        left: 0px;
-        padding-right: 15px;
-        box-sizing: border-box;
-        padding: 5px 15px;
-        border-bottom: 1px solid #44464C;
-    }
-
-    #mrof-container > .header > span {
-        color: #adb9bd;
-        float:left;
-        font-weight: 800;
-    }
-
-    #mrof-container > .footer {
-        color: #adb9bd;
-        width: 100%;
-        height: 30px;
-        position: absolute;
-        bottom: 0px;
-        left: 0px;
-        padding: 5px 15px;
-        padding-left: 20px;
-        border-top: 1px solid #44464C;
-        box-sizing: border-box;
-        overflow:hidden;
-    }
-
-    #mrof-container > .header > .close {
-        color: #adb9bd;
-    }
-
-    #mrof-container.confirmation-mode > .header > .close {
-        display: none;
-    }
-
-    #mrof-container > .hseperator {
-        width: 100%;
-        height:10px;
-        position: absolute;
-        top:30px;
-        left:0px;
-    }
-
-    #mrof-container > .vseperator {
-        width: 100%;
-        height:10px;
-        position:absolute;
-        bottom:30px;
-        left:0px;
-    }
-
-    #mrof-container #clear-mrof-list {
-        display: block;
-        position: absolute;
-        top: 1px;
-        right: 15px;
-        width: 80px;
-        height: 25px;
-        padding: 3px;
-        text-align: center;
-        box-sizing: border-box;
-    }
-
-    #mrof-container.confirmation-mode #clear-mrof-list {
-        display: none;
-    }
-
-</style>
-<div id="mrof-container" class="quiet-scrollbars">
+<div id="mrof-container" class="quiet-scrollbars modal">
     <div class="header">
         <span>Most Recently Opened Files</span>
         <a class="close" id="mrof-list-close">x</a>

diff --git a/src/extensions/default/NavigationAndHistory/main.js b/src/extensions/default/NavigationAndHistory/main.js
@@ -38,13 +38,15 @@ define(function (require, exports, module) {
         ProjectManager      = brackets.getModule("project/ProjectManager"),
         CommandManager      = brackets.getModule("command/CommandManager"),
         Commands            = brackets.getModule("command/Commands"),
+        Dialogs             = brackets.getModule("widgets/Dialogs"),
         Menus               = brackets.getModule("command/Menus"),
         FileSystem          = brackets.getModule("filesystem/FileSystem"),
         FileUtils           = brackets.getModule("file/FileUtils"),
         ViewUtils           = brackets.getModule("utils/ViewUtils"),
         WorkingSetView      = brackets.getModule("project/WorkingSetView"),
         PreferencesManager  = brackets.getModule("preferences/PreferencesManager"),
-        KeyBindingManager   = brackets.getModule("command/KeyBindingManager");
+        KeyBindingManager   = brackets.getModule("command/KeyBindingManager"),
+        ExtensionUtils      = brackets.getModule("utils/ExtensionUtils");
 
     // Command constants for recent files
     var SHOW_RECENT_FILES       = "show.recent.files",
@@ -382,6 +384,9 @@ define(function (require, exports, module) {
     });
 
     AppInit.appReady(function () {
+
+        ExtensionUtils.loadStyleSheet(module, "styles/recent-files.css");
+
         // Command to show recent files list
         CommandManager.register("Open Recent", SHOW_RECENT_FILES, _createMROFDisplayList);
 

diff --git a/src/extensions/default/NavigationAndHistory/styles/recent-files.css b/src/extensions/default/NavigationAndHistory/styles/recent-files.css
@@ -0,0 +1,154 @@
+#mrof-container {
+    display:block;
+    width:60%;
+    height:50%;
+    background: #3c3f41;
+    position:absolute;
+    left:20%;
+    top:25%;
+    max-width: 900px;
+}
+
+#mrof-container > #mrof-list {
+    display: block;
+    width: 100%;
+    height: calc(100% - 60px);
+    position: absolute;
+    left: 0%;
+    top: 30px;
+    padding: 10px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    margin: 0px;
+    box-sizing: border-box; 
+}
+
+#mrof-container > #mrof-list > li {
+    position:relative;
+    display: block;
+    height: 22px;
+    margin-left: 18px;
+    margin-top: 4px;
+    float: left;
+    width: calc(25% - 20px);
+    min-width: 230px;
+    padding:1px 5px;
+    white-space: nowrap;
+}
+
+#mrof-container > #mrof-list > li.highlight {
+    background: #2d2e30;
+}
+
+#mrof-container > #mrof-list > li > a.mroitem {
+    color: #ffffff;
+    font-size: 13px;
+    height: 22px;
+    text-decoration: none;
+    display: block;
+    line-height: 15px;
+    padding: 3px;
+    cursor: default;
+    padding-left: 10px;
+    width: 100%;
+    box-sizing: border-box;
+    text-overflow: ellipsis;
+    overflow-wrap: normal;
+    overflow: hidden;
+}
+
+#mrof-container > #mrof-list > li > a.mroitem > .extension {
+    color: #adb9bd;
+}
+
+#mrof-container > #mrof-list > li > a.mroitem:focus {
+    background: transparent;
+    color:#8fddff;
+    box-shadow: none !important;
+    padding-left: 10px;
+}
+
+#mrof-container > #mrof-list > li.highlight > a.mroitem {
+    background: transparent;
+    color:#8fddff;
+    box-shadow: none !important;
+    padding-left: 10px;
+}
+
+#mrof-container > #mrof-list > li.highlight > a.mroitem > .extension {
+    color:#8fddff;
+}
+
+#mrof-container > .header { 
+    color: #adb9bd;
+    width: 100%;
+    height: 30px;
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    padding-right: 15px;
+    box-sizing: border-box;
+    padding: 5px 15px;
+    border-bottom: 1px solid #44464C;
+}
+
+#mrof-container > .header > span {
+    color: #adb9bd;
+    float:left;
+    font-weight: 800;
+}
+
+#mrof-container > .footer {
+    color: #adb9bd;
+    width: 100%;
+    height: 30px;
+    position: absolute;
+    bottom: 0px;
+    left: 0px;
+    padding: 5px 15px;
+    padding-left: 20px;
+    border-top: 1px solid #44464C;
+    box-sizing: border-box;
+    overflow:hidden;
+}
+
+#mrof-container > .header > .close {
+    color: #adb9bd;
+    margin: 0px;
+}
+
+#mrof-container.confirmation-mode > .header > .close {
+    display: none;
+}
+
+#mrof-container > .hseperator {
+    width: 100%;
+    height:10px;
+    position: absolute;
+    top:30px;
+    left:0px;
+}
+
+#mrof-container > .vseperator {
+    width: 100%;
+    height:10px;
+    position:absolute;
+    bottom:30px;
+    left:0px;
+}
+
+#mrof-container #clear-mrof-list {
+    display: block;
+    position: absolute;
+    top: 1px;
+    right: 15px;
+    width: 80px;
+    height: 25px;
+    padding: 3px;
+    text-align: center;
+    box-sizing: border-box;
+}
+
+#mrof-container.confirmation-mode #clear-mrof-list {
+    display: none;
+}