Whats new module

app/angular/components/icons/close/index.html

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="20" viewBox="0 -960 960 960" ><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

app/angular/components/icons/close/index.js

@@ -0,0 +1,10 @@
+import angular from "angular";
+import template from "./index.html";
+import "./index.scss";
+
+const iconClose = function () {};
+
+export default angular.module("app.iconClose", []).component("iconClose", {
+	template,
+	controller: iconClose
+}).name;

app/angular/components/icons/close/index.scss

@@ -0,0 +1,10 @@
+icon-close {
+	position: relative;
+	display: inline-block;
+}
+
+icon-close svg {
+	display: block;
+	position: relative;
+	top: 2px;
+}

app/angular/components/whatsNewBanner/index.html

@@ -0,0 +1,8 @@
+<aside class="whats-new">
+	<div class="alert" role="alert">
+		<p>🎉 New: Now you can create sharable link to your models. <a href="#">Read more</a></p>
+		<button class="dismiss-news">
+			<icon-close></icon-close>
+		</button>
+	</div>
+</aside>

app/angular/components/whatsNewBanner/index.js

@@ -0,0 +1,15 @@
+import angular from "angular";
+import template from "./index.html";
+import "./index.scss";
+import iconClose from "../icons/close";
+
+const bannerWhatsNew = function () {};
+
+export default angular
+	.module("app.bannerWhatsNew", [
+		iconClose
+	])
+	.component("bannerWhatsNew", {
+		template,
+		controller: bannerWhatsNew,
+}).name;

app/angular/components/whatsNewBanner/index.scss

@@ -0,0 +1,41 @@
+///////////////////////////////////////////////////////////////////////////////
+// banner-whats-new (Element)
+///////////////////////////////////////////////////////////////////////////////
+banner-whats-new {
+	display: block;
+	margin-top: 24px;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// .whats-new .alert
+///////////////////////////////////////////////////////////////////////////////
+.whats-new .alert {
+	display: flex;
+	border: 1px solid #ddd;
+	margin: 12px 0;
+	align-items: center;
+	justify-content: space-between;
+}
+
+///////////////////////////////////////////////////////////////////////////////
+// .dismiss-news
+///////////////////////////////////////////////////////////////////////////////
+.dismiss-news {
+	padding: 3px 5px;
+	border: 1px solid transparent;
+	border-radius: 3px;
+	background-color: transparent;
+	text-align: center;
+}
+
+.dismiss-news:hover {
+	border-color: #ddd;
+}
+
+.dismiss-news path {
+	fill: #7b7b7b;;
+}
+
+.dismiss-news:hover path {
+	fill: #000;
+}

app/angular/workspace/workspace.html

@@ -16,22 +16,24 @@
 	<section class="mainContent">
 		<header class="container">
 
-			<aside class="feedback">
-				<div
-					class="alert"
-					role="alert"
-					data-ng-class="{
-						'hide': !$ctrl.feedback.showing,
-						'alert-danger': $ctrl.feedback.type=='error',
-						'alert-success': $ctrl.feedback.type=='success',
-						'alert-warning': $ctrl.feedback.type=='warning'
-					}"
-				>
-					<p>{{ $ctrl.feedback.message }}</p>
-				</div>
-			</aside>
+			<banner-whats-new></banner-whats-new>
 
 			<div class="page-header clearfix">
+				<aside class="feedback">
+					<div
+						class="alert"
+						role="alert"
+						data-ng-class="{
+							'hide': !$ctrl.feedback.showing,
+							'alert-danger': $ctrl.feedback.type=='error',
+							'alert-success': $ctrl.feedback.type=='success',
+							'alert-warning': $ctrl.feedback.type=='warning'
+						}"
+					>
+						<p>{{ $ctrl.feedback.message }}</p>
+					</div>
+				</aside>
+
 				<h2 class="h2 pull-left">{{ 'Models' | translate }}</h2>
 				<aside class="header-actions pull-right">
 					<a class="br-button" data-ng-click="$ctrl.newModel()"><i class="fa fa-plus-circle" aria-hidden="true"></i> {{ 'New model' | translate }}</a>

app/angular/workspace/workspace.js

@@ -9,6 +9,7 @@ import modelRenameComponent from "../components/renameModelModal";
 import bugReportButton from "../components/bugReportButton";
 import iconConceptual from  "../components/icons/conceptual";
 import iconLogic from  "../components/icons/logic";
+import whatsNewBanner from "../components/whatsNewBanner";
 
 
 const ListController = function (
@@ -183,7 +184,8 @@ export default angular
 		modelRenameComponent,
 		bugReportButton,
 		iconConceptual,
-		iconLogic
+		iconLogic,
+		whatsNewBanner
 	])
 	.component("workspace", {
 		template,

app/sass/modelsList.scss

@@ -7,6 +7,7 @@
 }
 
 .modelsList header.container .page-header {
+	position: relative;
 	margin-top: 60px
 }
 
@@ -15,8 +16,8 @@
 ///////////////////////////////////////////////////////////////////////////////
 .modelsList .feedback {
 	position: absolute;
-	top: 15px;
-	right: 15px;
-	left: 15px;	
+	top: -48px;
+	right: 0;
+	left: 0;
 
 }