Navigation: Unified cloud navigation

* Removed main drop down menu
* Added "My cloud" to user menu
* Attract/Flamenco is found under Production Tools menu
* Attract/Flamenco has the same navigation as its project

pillar/web/nodes/custom/posts.py

@@ -109,6 +109,7 @@ def posts_view(project_id=None, project_url=None, url=None, *, archive=False, pa
         project.blog_archive_prev = None
 
     navigation_links = project_navigation_links(project, api)
+    extension_sidebar_links = current_app.extension_sidebar_links(project)
 
     return render_template(
         template_path,
@@ -121,6 +122,7 @@ def posts_view(project_id=None, project_url=None, url=None, *, archive=False, pa
         node_type_post=project.get_node_type('post'),
         can_create_blog_posts=can_create_blog_posts,
         navigation_links=navigation_links,
+        extension_sidebar_links=extension_sidebar_links,
         api=api)
 
 

pillar/web/projects/routes.py

@@ -415,9 +415,8 @@ def render_project(project, api, extra_context=None, template_name=None):
             embed_string = ''
         template_name = "projects/view{0}.html".format(embed_string)
 
-    extension_sidebar_links = current_app.extension_sidebar_links(project)
-
     navigation_links = project_navigation_links(project, api)
+    extension_sidebar_links = current_app.extension_sidebar_links(project)
 
     return render_template(template_name,
                            api=api,
@@ -490,12 +489,14 @@ def view_node(project_url, node_id):
                 raise wz_exceptions.NotFound('No such project')
 
     navigation_links = []
+    extension_sidebar_links = ''
     og_picture = node.picture = utils.get_file(node.picture, api=api)
     if project:
         if not node.picture:
             og_picture = utils.get_file(project.picture_header, api=api)
         project.picture_square = utils.get_file(project.picture_square, api=api)
         navigation_links = project_navigation_links(project, api)
+        extension_sidebar_links = current_app.extension_sidebar_links(project)
 
     # Append _theatre to load the proper template
     theatre = '_theatre' if theatre_mode else ''
@@ -506,10 +507,9 @@ def view_node(project_url, node_id):
                                node=node,
                                project=project,
                                navigation_links=navigation_links,
+                               extension_sidebar_links=extension_sidebar_links,
                                og_picture=og_picture,)
 
-    extension_sidebar_links = current_app.extension_sidebar_links(project)
-
     return render_template('projects/view{}.html'.format(theatre),
                            api=api,
                            project=project,
@@ -518,7 +518,7 @@ def view_node(project_url, node_id):
                            show_project=False,
                            og_picture=og_picture,
                            navigation_links=navigation_links,
-                           extension_sidebar_links=extension_sidebar_links)
+                           extension_sidebar_links=extension_sidebar_links,)
 
 
 def find_project_or_404(project_url, embedded=None, api=None):

src/styles/components/_navbar.sass

@@ -306,3 +306,35 @@ body.has-overlay
 			visibility: hidden
 			display: none !important
 
+.navbar
+	.pi-blender-cloud-logo
+		/* Ugly hack to make the logo line up with the other links */
+		width: 5.5em
+		font-size: 1.6em
+		margin-top: calc((-1.6em + 1em) / 2)	// use same vertical space as font-size 1em
+		margin-bottom: calc((-1.6em + 1em) / 2) //
+
+.navbar-toggler
+	border: none
+
+// Mobile layout
+@include media-breakpoint-down(sm)
+	.navbar
+		.navbar-collapse 
+			position: absolute
+			background-color: $body-bg
+			top: 100%
+			flex-direction: column
+			align-items: start
+			transition: unset
+			box-shadow: 1px 1px 0 rgba(black, .1), 0 5px 50px rgba(black, .25)
+
+			.dropdown-menu
+				top: 0
+				left: 100%
+
+	.project
+		.navbar
+			.navbar-collapse 
+				.nav-link
+					color: $color-text !important

src/styles/components/_search.sass

@@ -23,15 +23,18 @@
 #qs-toggle
 	opacity: 1
 	visibility: visible
+	display: block
 
 .quick-search
 	opacity: 0
 	transition: opacity $short-transition
 	visibility: hidden
+	display: none
 
-.quick-search.show
+	&.show
-	opacity: 1
+		opacity: 1
-	visibility: visible
+		visibility: visible
+		display: block
 
 .qs-input
 	&.show input

src/templates/menus/user_base.pug

@@ -13,6 +13,12 @@ li.dropdown
 		| {% if not current_user.has_role('protected') %}
 		| {% block menu_list %}
 
+		li
+			a.navbar-item.px-2(
+				href="{{ url_for('projects.home_project') }}"
+				title="My cloud")
+				| #[i.pi-home] My cloud
+
 		li
 			a.navbar-item.px-2(
 				href="{{ url_for('settings.profile') }}"

src/templates/nodes/custom/blog/index.pug

@@ -4,13 +4,20 @@
 
 | {% set title = 'blog' %}
 
+| {% block css %}
+| {{ super() }}
+| {% if project.url != 'blender-cloud' %}
+link(href="{{ url_for('static_cloud', filename='assets/css/project-main.css') }}", rel="stylesheet")
+| {% endif %}
+| {% endblock %}
+
 | {% block page_title %}Blog{% endblock%}
 
 | {% block navigation_tabs %}
 | {% if project.url == 'blender-cloud' %}
 | {{ navigation_homepage(title) }}
 | {% else %}
-| {{ navigation_project(project, navigation_links, title) }}
+| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }}
 | {% endif %}
 | {% endblock navigation_tabs %}
 

src/templates/nodes/search.pug

@@ -11,7 +11,7 @@ include ../mixins/components
 
 | {% block navigation_tabs %}
 | {% if project %}
-| {{ navigation_project(project, navigation_links, title) }}
+| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }}
 | {% else %}
 | {{ navigation_homepage(title) }}
 | {% endif %}
@@ -50,23 +50,6 @@ script.
 | {% endif %}
 
 #search-container.d-flex(class="{% if project %}search-project{% endif %}")
-	| {% if project %}
-	#project_sidebar.bg-white
-		ul.project-tabs.p-0
-			li.tabs-browse(
-				title="Browse",
-				data-toggle="tooltip",
-				data-placement="right")
-				a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-					i.pi-folder
-
-			li.tabs-search.active(
-				title="Search",
-				data-toggle="tooltip",
-				data-placement="right")
-				a(href="{{url_for('projects.search', project_url=project.url, _external=True)}}")
-					i.pi-search
-	| {% endif %}
 
 	.search-settings#search-sidebar.bg-light
 		input.search-field.p-2.bg-white(

src/templates/projects/edit_layout.pug

@@ -6,30 +6,12 @@ include ../mixins/components
 | {% block page_title %}Edit {{ project.name }}{% endblock %}
 
 | {% block navigation_tabs %}
-| {{ navigation_project(project, navigation_links, title) }}
+| {{ navigation_project(project, navigation_links, extension_sidebar_links, title) }}
 | {% endblock navigation_tabs %}
 
 | {% block body %}
 #project-container
 	#project-side-container
-		#project_sidebar
-			ul.project-tabs.p-0
-				li.tabs-browse(
-					title="Browse",
-					data-toggle="tooltip",
-					data-placement="left")
-					a(href="{{url_for('projects.view', project_url=project.url, _external=True)}}")
-						i.pi-folder
-
-				| {% if project.has_method('PUT') %}
-				li.active(
-					title="Edit Project",
-					data-toggle="tooltip",
-					data-placement="right")
-					a(href="{{ url_for('projects.edit', project_url=project.url) }}")
-						i.pi-cog
-				| {% endif %}
-
 
 		#project_nav
 			#project_nav-container