Merge pull request #39 from documize/section-rework

Section rework, making Trello and Github sections simpler, with a cleaner design
documize · Sep 30, 2016 · 5bf63cf · 5bf63cf
2 parents eb902d8 + ec8e0d7
commit 5bf63cf
Show file tree

Hide file tree

Showing 20 changed files with 318 additions and 293 deletions.
diff --git a/app/app/components/section/github/type-editor.js b/app/app/components/section/github/type-editor.js
@@ -41,6 +41,9 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
 						branchLines: "100",
 						userId: "",
 						pageId: page.get('id'),
+						showMilestones: false,
+						showIssues: false,
+						showCommits: false,
 					};
 
 					try {
@@ -50,6 +53,9 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
 						config.branchSince = metaConfig.branchSince;
 						config.userId = metaConfig.userId;
 						config.pageId = metaConfig.pageId;
+						config.showMilestones = metaConfig.showMilestones;
+						config.showIssues = metaConfig.showIssues;
+						config.showCommits = metaConfig.showCommits;
 					} catch (e) {}
 
 					self.set('config', config);
@@ -168,12 +174,16 @@ export default Ember.Component.extend(SectionMixin, NotifierMixin, TooltipMixin,
 			return this.get('isDirty');
 		},
 
-		onListCheckbox(id) {
+		onListCheckbox(id) { // select one repository only
 			let lists = this.get('config.lists');
 			let list = lists.findBy('id', id);
 
+			lists.forEach(function (entry) {
+				Ember.set(entry, 'included', false);
+			});
+
 			if (list !== null) {
-				Ember.set(list, 'included', !list.included);
+				Ember.set(list, 'included', true);
 			}
 		},
 

diff --git a/app/app/styles/base.scss b/app/app/styles/base.scss
@@ -35,6 +35,8 @@ html {
 	background-color: $color-white;
 	font-size: 14px;
 	height: 100%;
+	-webkit-font-smoothing: antialiased;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 }
 
 body {
@@ -46,6 +48,8 @@ a {
 	color: $color-link;
 	text-decoration: none;
 	cursor: pointer;
+	-webkit-font-smoothing: antialiased;
+	text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
 
 	a:hover, a:focus {
 		text-decoration: underline;

diff --git a/app/app/styles/color.scss b/app/app/styles/color.scss
@@ -21,10 +21,10 @@ $color-gray: #8b9096;
 $color-goldy: #cc9933;
 
 $color-header: #f3f5f8;
-$color-link: #4caf50;
+$color-link: #0092d3;
 $color-border: #e1e1e1;
 
-$color-input: #a1a1a1;
+$color-input: #5a5a5a;
 $color-stroke: #e1e1e1;
 
 $color-tooltip: #a1a1a1;

diff --git a/app/app/styles/section/github.scss b/app/app/styles/section/github.scss
@@ -1,4 +1,8 @@
 .section-github-editor {
+	.github-view label {
+		margin: 0 10px;
+	}
+
 	.github-repo {
 		width: 100%;
 		padding: 10px;
@@ -40,8 +44,13 @@
 }
 
 .section-github-render {
+
+	a:hover {
+		text-decoration: underline;
+	}
+
 	.github-table {
-		margin: 0 !important;
+		margin: 10px 0 !important;
 		border: none !important;
 		line-height: 30px;
 
@@ -56,63 +65,65 @@
 		margin: 30px 0 0 0;
 	}
 
-	.issue-label {
-		font-size: 11px;
-		color: $color-white;
-		padding: 0px 8px;
-		margin-right: 5px;
-		border-radius: 2px;
-		box-shadow: inset 0 -1px 0 rgba(0,0,0,0.12);
-		display: inline-block;
-		line-height: 22px;
-	}
-
-	progress[value] {
-		background-color: $color-off-white;
-		border-radius: 3px;
-		height: 15px;
-		width: 150px;
-	}
+	.github-table thead tr th {
+		padding: 15px 0;
+		border-bottom: 1px solid #e1e1e1;
+		text-transform: uppercase;
+		font-size: 14px;
+		text-align: left;
 
-	.progress-meta {
-		color: $color-gray;
-		font-size: 1rem;
-		font-family: "arial";
-	}
+		span {
+			color:#838d94;
+		}
 
-	.contributor-name {
-		line-height: 15px;
 	}
 
-	.milestone-name, .issue-name, .contributor-name {
-		font-size: 1.2rem;
+	.github-table tbody tr td {
+		border: none!important;
+		padding: 5px 20px 5px 20px !important;
 	}
 
-	.milestone-symbol {
-		padding-top: 3px;
+	.github-table .right-column {
+		text-align: right;
+		color:#838d94;
 	}
 
-	.issue-symbol {
-		padding-top: 3px;
+	span.data {
+		color:#838d94;
 	}
 
-	.contributor-meta {
-		line-height: 30px;
+	.issue-label {
+		color:white;
+        font-size: 11px;
+        padding: 4px 6px;
+        border-radius: 4px;
+        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+        margin-left: 10px;
+	}
+
+	.progress-bar {
+		display: inline-block; border-radius: 3px;
+		width: 40%;
+		background-color: #f1f1f1;
+		height: 8px;
+		margin-left: 10px;
+
+		.progress {
+			height: 8px;
+			border-radius: 4px;
+			background-color: #4caf50;
+		}
 	}
 
-	.milestone-meta, .issue-meta, .contributor-meta {
-		color: $color-gray;
-		font-size: 1rem;
+	span.issue-state {
+		float: left;
+    	margin-right: 10px;
+    	margin-top: 3px;
 	}
 
-	.github-avatar {
+	img.github-avatar {
+		width: 24px;
 		border-radius: 4px;
-		width: 36px;
-		height: 36px;
-		margin-right: 5px;
-	}
-
-	.branch {
-		font-family: "open_sanssemibold";
+		margin-right: 10px;
 	}
 }
diff --git a/app/app/styles/section/trello.scss b/app/app/styles/section/trello.scss
@@ -53,140 +53,51 @@
 }
 
 .section-trello-render {
-    .trello-table {
-        border: none!important;
-        margin: 0px !important;
 
-        td {
-            border: none !important;
-			vertical-align: top;
-        }
+    a:hover {
+        text-decoration: underline;
     }
 
     .heading {
-        font-size: 1.6rem;
-        margin: 30px 0 0 0;
-    }
 
-    .trello-label {
-        font-size: 11px;
-        color: #fff;
-        padding: 0 8px;
-        margin-right: 5px;
-        border-radius: 2px;
-        box-shadow: inset 0 -1px 0 rgba(0,0,0,.12);
-        display: inline-block;
-        line-height: 22px;
-        text-shadow: 0 0 5px rgba(0,0,0,.2),0 0 2px #000;
+        h3 {
+            font-size: 22px;
+            margin: 0;
+            font-family: "open_sanslight";
+        }
+
     }
 
-    .board-stats {
-        margin-bottom: 10px;
-            td {
-                color: $color-gray;
-                padding: 20px 40px 30px 0px !important;
-            }
-            .stat-number {
-                font-family: "open_sanslight";
-                font-size: 40px;
-                margin-right: 20px;
-                color: black;
-            }
+    table.trello-single-board {
+        border: none!important;
+        text-align: left;
+        margin:0!important;
     }
 
-    .trello-board {
-        color: white;
-        padding: 15px 20px;
-        width: 190px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: inline-block;
-        border-radius: 4px;
-        margin-right: 20px;
+    .trello-single-board thead tr th {
+        padding: 15px 0;
+        border-bottom: 1px solid #e1e1e1;
+        text-transform: uppercase;
+        font-size: 14px;
 
         span {
-            display: table;
-            font-size: 14px;
-            line-height: 10px;
-            opacity: 0.5;
-            padding-bottom: 10px;
-            margin-bottom: 8px;
+            color:#838d94;
         }
-    }
 
-    .board-summary {
-		font-size: 1.2rem;
-	}
-
-    .member-name {
-        font-size: 1.2rem;
-        line-height: 15px;
     }
 
-    .board-meta, .member-meta {
-        color: $color-gray;
+    .trello-single-board tbody tr td {
+        border: none!important;
+        padding: 5px 20px 5px 20px !important;
     }
 
-    .trello-avatar {
+    .trello-label {
+        color:white;
+        font-size: 11px;
+        padding: 4px 6px;
         border-radius: 4px;
-		width: 36px;
-		height: 36px;
-		margin-right: 5px;
+        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.12);
+        margin-left: 14px;
     }
 
-	> .single-trello-board {
-		width: 100%;
-		max-height: 600px;
-		padding: 10px;
-		white-space: nowrap;
-		overflow: auto;
-
-        > a {
-            > .trello-board-title {
-                font-weight: bold;
-                color: #fff;
-                font-size: 16px;
-            }
-        }
-
-        > .trello-list {
-            background-color: #e2e4e6;
-            padding: 10px;
-            border-radius: 3px;
-            margin: 10px 10px 0 0;
-            width: 300px;
-            max-height: 500px;
-            display: inline-block;
-            white-space: nowrap;
-            overflow: auto;
-            vertical-align: top;
-
-            > .trello-list-title {
-                font-weight: bold;
-                color: #4c4c4c;
-                font-size: 14px;
-                margin: 0 10px 10px 0;
-            }
-
-            > a {
-                > .trello-card {
-                    color: #4c4c4c;
-                    border-bottom: 1px solid #CDD2D4;
-                    background-color: #fff;
-                    border-radius: 3px;
-                    padding: 7px 7px;
-                    margin: 5px 0;
-                    font-size: 14px;
-                    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
-                    line-height: 18px;
-                    overflow: hidden;
-                    word-wrap: break-word;
-                    white-space: normal;
-                    cursor: pointer;
-                    vertical-align: top;
-                }
-            }
-        }
-	}
 }