Add the project display name

Author: Matt Karl

deploy/index.html

@@ -23,6 +23,10 @@
 				<span class="icon glyphicon glyphicon-remove"></span> Close
 			</button>
 		</nav>
+		<div class="project empty" id="project">
+			<div class="name" id="projectName"></div>
+			<div class="empty">No project opened</div>
+		</div>
 		<div class="modules btn-group-vertical">
 			<a class="btn btn-primary btn-lg requires-project" href="captions.html" id="captions" target="_blank" title="Caption Creator" data-width="640" data-height="480" data-min-width="510" data-min-height="400">
 				Caption Creator

deploy/package.json

@@ -15,7 +15,7 @@
     "frame": true,
     "position": "center",
     "width": 340,
-    "height": 390,
+    "height": 435,
     "resizable": false
   },
   "webkit": {

src/springroll/SpringRollStudio.js

@@ -30,6 +30,18 @@
 		this.requiresProject = $(".requires-project")
 			.addClass('disabled');
 
+		/**
+		 * The current project name
+		 * @property {jquery} projectName
+		 */
+		this.projectName = $("#projectName");
+
+		/**
+		 * The current project name
+		 * @property {jquery} project
+		 */
+		this.project = $("#project");
+
 		if (APP)
 		{
 			this.menu = new gui.Menu({ type: 'menubar' });
@@ -125,7 +137,10 @@
 			alert("Folder is not a valid SpringRoll project");
 			return;
 		}
+		this.projectName.text(path.basename(project));
+		this.project.removeClass('empty');
 		this.closeButton.removeClass('disabled');
+
 		if (localStorage.getItem('project') != project)
 		{
 			localStorage.setItem('project', project);
@@ -139,6 +154,8 @@
 	 */
 	p.closeProject = function()
 	{
+		this.projectName.text('');
+		this.project.addClass('empty');
 		this.requiresProject.addClass('disabled');
 		this.closeButton.addClass('disabled');
 		localStorage.removeItem('project');

src/springroll/SpringRollStudio.less

@@ -19,6 +19,36 @@ body {
 	}
 }
 
+.project {
+	background:#363842;
+	padding:10px 0;
+	border-radius: 4px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	text-align: center;
+	margin:0 10px;
+	width:auto;
+	color:#fff;
+	border:0;
+	.name:before {
+		content:"Project:";
+		margin-right:5px;
+		color:#999;
+	}
+	.empty {
+		display:none;
+		color:#999;
+	}
+	&.empty {
+		.empty {
+			display:block;
+		}
+		.name {
+			display:none;
+		}
+	}
+}
+
 header {
 	.logo {
 		display:block;
@@ -35,11 +65,17 @@ input[type="file"] {
 
 nav {
 	.btn {
-		width:33.333%;
+		width:33.5%;
 		text-align:center;
 		.icon {
 			margin-right:5px;
 		}
+		&:first-child {
+			border-bottom-left-radius: 0;
+		}
+		&:last-child {
+			border-bottom-right-radius: 0;
+		}
 	}
 }