Sitic has uploaded a new change for review.
https://gerrit.wikimedia.org/r/224375
Change subject: Add coloring to differentiate projects
......................................................................
Add coloring to differentiate projects
Shows a 4px wide color border for each watchlist event to
differentiate projects.
Change-Id: Ibd7c228f6c412c16f39e73e4f5a4307f944ac38c
---
M frontend/src/app/index.css
M frontend/src/app/services.js
M frontend/src/components/watchlist/watchlist.controller.js
M frontend/src/components/watchlist/watchlist.html
4 files changed, 102 insertions(+), 10 deletions(-)
git pull ssh://gerrit.wikimedia.org:29418/labs/tools/crosswatch
refs/changes/75/224375/1
diff --git a/frontend/src/app/index.css b/frontend/src/app/index.css
index 868a0b4..1c9dbcd 100644
--- a/frontend/src/app/index.css
+++ b/frontend/src/app/index.css
@@ -125,6 +125,30 @@
max-width: 1200px;
}
+.watchlist-container {
+ padding: 0;
+}
+
+md-list-item.watchlist {
+ border-left-width: 4px;
+ border-left-style: solid;
+ padding-left: 12px;
+}
+
+md-list-item.watchlist:first-child {
+ padding-top: 8px;
+}
+
+md-list-item.watchlist:last-child {
+ padding-bottom: 8px;
+}
+
+.watchlist:last-child md-divider,
+.notifications:last-child md-divider
+{
+ border-top: 0;
+}
+
.watchlist-list-item-oneline {
min-height: 32px;
}
@@ -160,12 +184,6 @@
outline:none;
}
-.watchlist:last-child md-divider,
-.notifications:last-child md-divider
-{
- border-top: 0;
-}
-
span.comment{
font-style: italic;
unicode-bidi: embed;
@@ -183,6 +201,62 @@
font-weight: bold;
}
+.project-color-white {
+ border-left-color: white;
+}
+
+.project-color-pink {
+ border-left-color: #F06292;
+}
+
+.project-color-purple {
+ border-left-color: #CE93D8;
+}
+
+.project-color-deep-purple {
+ border-left-color: #9575CD;
+}
+
+.project-color-blue {
+ border-left-color: #64B5F6;
+}
+
+.project-color-cyan {
+ border-left-color: #4DD0E1;
+}
+
+.project-color-teal {
+ border-left-color: #4DB6AC;
+}
+
+.project-color-green {
+ border-left-color: #81C784;
+}
+
+.project-color-lime {
+ border-left-color: #DCE775;
+}
+
+.project-color-yellow {
+ border-left-color: #FFF176;
+}
+
+.project-color-amber {
+ border-left-color: #FFD54F;
+}
+
+.project-color-orange {
+ border-left-color: #FFB74D;
+}
+
+.project-color-brown {
+ border-left-color: #A1887F;
+}
+
+.project-color-blue-grey {
+ border-left-color: #90A4AE;
+}
+
/** material design icons **/
@font-face {
font-family: 'Material Icons';
diff --git a/frontend/src/app/services.js b/frontend/src/app/services.js
index f08e222..08e94b7 100644
--- a/frontend/src/app/services.js
+++ b/frontend/src/app/services.js
@@ -105,6 +105,14 @@
* List of selected namespaces
*/
vm.config.namespacesSelected = vm.config.namespacesSelected ||
vm.defaultconfig.namespacesList;
+ /**
+ * Associative array from project to border color
+ */
+ vm.config.projectColors = vm.config.projectColors || {};
+
+
+ var colors = ['pink', 'deep-purple', 'blue', 'cyan', 'green', 'lime',
'orange', 'brown', 'blue-grey'];
+ var colorsIndex = 0;
/**
* Process an array of new watchlist entries.
@@ -123,6 +131,16 @@
vm.saveConfig();
}
+ if (!vm.config.projectColors.hasOwnProperty(project)) {
+ vm.config.projectColors[project] = 'project-color-' +
colors[colorsIndex];
+
+ colorsIndex += 1;
+ if (colorsIndex >= colors.length) {
+ colorsIndex = 0;
+ }
+ vm.saveConfig();
+ }
+
vm.filterWatchlistDebounced();
};
diff --git a/frontend/src/components/watchlist/watchlist.controller.js
b/frontend/src/components/watchlist/watchlist.controller.js
index 990d430..81c79c3 100644
--- a/frontend/src/components/watchlist/watchlist.controller.js
+++ b/frontend/src/components/watchlist/watchlist.controller.js
@@ -19,5 +19,5 @@
event.diff = diff;
})
}
- }
+ };
});
diff --git a/frontend/src/components/watchlist/watchlist.html
b/frontend/src/components/watchlist/watchlist.html
index 3b683a0..decaceb 100644
--- a/frontend/src/components/watchlist/watchlist.html
+++ b/frontend/src/components/watchlist/watchlist.html
@@ -22,10 +22,10 @@
<md-progress-circular md-mode="indeterminate"></md-progress-circular>
</md-list-item>
</md-list>
- <md-list infinite-scroll="ctrl.moreWatchlistEntries()"
infinite-scroll-immediate-check="false"
+ <md-list class="watchlist-container"
infinite-scroll="ctrl.moreWatchlistEntries()"
infinite-scroll-immediate-check="false"
infinite-scroll-distance="1">
- <md-list-item layout="row" id="watchlist" class="watchlist"
- ng-class="(ctrl.config.oneline) ?
'watchlist-list-item-oneline' : ''"
+ <md-list-item layout="row" class="watchlist"
+ ng-class="[{'watchlist-list-item-oneline':
ctrl.config.oneline}, ctrl.config.projectColors[event.project]]"
ng-repeat="event in ctrl.watchlist.active track by
event.id">
<watchlist-entry ng-click="event.clicked = !event.clicked;
ctrl.clicked(event)" md-ink-ripple></watchlist-entry>
<md-divider></md-divider>
--
To view, visit https://gerrit.wikimedia.org/r/224375
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: Ibd7c228f6c412c16f39e73e4f5a4307f944ac38c
Gerrit-PatchSet: 1
Gerrit-Project: labs/tools/crosswatch
Gerrit-Branch: master
Gerrit-Owner: Sitic <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
