Move Delete File and Delete Gist in more contextually appropriate places

Author: mythz

src/Gistlyn.Resources/app.js

@@ -26,6 +26,15 @@
 #tabs #files-menu:hover {
     color: #ffc;
 }
+#tabs .delete {
+    font-size: 16px;
+    vertical-align: bottom;
+    padding: 0 0 0 5px;
+    cursor: pointer;
+}
+#tabs .delete:hover {
+    color: #f00;
+}
 .popup {
     display: none;
     position: absolute;

src/Gistlyn.Resources/css/app.min.css

@@ -358,6 +358,9 @@ span.CodeMirror-selectedtext { background: none; }
     flex: 1;
     overflow: auto;
 }
+.macintel .ReactCodeMirror {
+    margin-left: -3px; 
+}
 
 .CodeMirror {
     margin: 0;

src/Gistlyn.Resources/css/editor.css

@@ -26,6 +26,15 @@
 #tabs #files-menu:hover {
     color: #ffc;
 }
+#tabs .delete {
+    font-size: 16px;
+    vertical-align: bottom;
+    padding: 0 0 0 5px;
+    cursor: pointer;
+}
+#tabs .delete:hover {
+    color: #f00;
+}
 .popup {
     display: none;
     position: absolute;

src/Gistlyn/css/codemirror.css

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { queryString, splitOnLast } from 'servicestack-client';
-import { UA, getSortedFileNames, IGistFile } from './utils';
+import { UA, getSortedFileNames, IGistFile, FileNames } from './utils';
 
 import CodeMirror from 'react-codemirror';
 import "jspm_packages/npm/[email protected]/addon/edit/matchbrackets.js";
@@ -149,7 +149,12 @@ export default class Editor extends React.Component<any, any> {
                     <div className={active ? 'active' : null}
                         onClick={e => !active ? this.props.selectFileName(fileName) : this.props.editFileName(fileName) }>
                         {this.props.editingFileName !== fileName
-                            ? <b>{fileName}</b>
+                            ? <b>
+                                {fileName}
+                                { this.props.isOwner && active && FileNames.canDelete(fileName)
+                                    ? <i className="material-icons delete" onClick={e => e.stopPropagation() || confirm(`Are you sure you want to delete file '${fileName}'?`) ? this.props.onDeleteFile(fileName) : null } title="delete file">cancel</i>
+                                    : null}
+                              </b>
                             : <input type="text" className="txtFileName"
                                 onBlur={e => this.props.onRenameFile(fileName, e) }
                                 onKeyDown={e => e.keyCode === 13 ? (e.target as HTMLElement).blur() : null }

src/Gistlyn/css/editor.css

@@ -814,8 +814,6 @@ class App extends React.Component<any, any> {
         if (authUsername) {
             EditorPopup.push((
                 <div onClick={e => this.props.showDialog("edit-gist") }>Edit Gist</div>));
-            EditorPopup.push((
-                <div onClick={e => confirm(`Are you sure you want to delete this gist?`) ? this.deleteGist(this.props.gist) : null }>Delete Gist</div>));
         }
         EditorPopup.push((
             <div onClick={e => this.props.showDialog("add-ss-ref") }>Add ServiceStack Reference</div>));
@@ -918,6 +916,7 @@ class App extends React.Component<any, any> {
                             updateSource={(fileName, src) => this.props.updateSource(fileName, src) }
                             onRenameFile={(fileName, e) => this.handleRenameFile(fileName, e) }
                             onCreateFile={e => this.handleCreateFile(e) }
+                            onDeleteFile={fileName => this.deleteFile(fileName) }
                             onShortcut={keyPattern => this.onShortcut(keyPattern)} />
 
                         <div id="preview">
@@ -944,12 +943,10 @@ class App extends React.Component<any, any> {
                                 <span className="octicon octicon-repo-forked" style={{ margin: "3px 3px 0 0" }}></span>
                                 <p>{authUsername ? (shouldFork ? "Fork As" : "Save As") : "Sign-in to save"}</p>
                             </div>) }
-                        { meta && meta.owner_login === authUsername && this.props.activeFileName &&
-                            this.props.activeFileName !== FileNames.GistMain &&
-                            this.props.activeFileName !== FileNames.GistPackages
-                            ? (<div id="delete-file" onClick={e => confirm(`Are you sure you want to delete '${this.props.activeFileName}?`) ? this.deleteFile(this.props.activeFileName) : null }>
-                                <i className="material-icons">delete </i>
-                                <p>Delete File</p>
+                        { meta && meta.owner_login === authUsername
+                            ? (<div id="delete-file" onClick={e => confirm(`Are you sure you want to delete gist '${meta.description}'?`) ? this.deleteGist(this.props.gist) : null }>
+                                <i className="material-icons">delete_forever</i>
+                                <p>Delete Gist</p>
                             </div>)
                             : null }
                     </div>