Custom colors for loklak

You can now customize the background and card colors on loklak walls!

Here’s how we did it:

First, we had to add extra fields to the wall schema:

1
2
3
4
5
6
7
var UserSchema = new Schema({
apps: {
wall: [{
// other options
cardBgColour: String,
cardForeColour: String,
wallBgColour: String,

Next, we had to add these extra options in the angular controller (wall.js) for the creation modal:

1
2
3
4
5
6
7
8
9
10
var initWallOptions = function() {
$scope.newWallOptions.wallBgColour = '#ecf0f5';
$scope.newWallOptions.cardBgColour = '#ffffff';
}

$scope.$watch('newWallOptions.cardBgColour', function() {
if ($scope.newWallOptions.cardBgColour) {
$scope.newWallOptions.cardForeColour = colourCalculator(hexToRgb($scope.newWallOptions.cardBgColour));
}
});

The $watch function watches for any changes in the card background color and changes the cardForeColour / text color to be black or white depending on the bg color.

Now, we have to use the saved data in the wall display pages (display.html):

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<div ng-style="{'background-color': wall.wallOptions.wallBgColour}" class="wall-container container-fluid">
<div class="container content-container wall-body">
<div ng-switch on="wall.wallOptions.layoutStyle" ng-show="wall.statuses.length>0" ng-class="wall.wallOptions.showStatistics || wall.currentAnnoucement?'col-md-8':'col-md-12'" masonry>
<!-- 1. Linear -->
<div ng-switch-when="1" linear ng-repeat="status in wall.statuses" open="wall.open" data="status"
cardbgcolor="wall.wallOptions.cardBgColour" cardtxtcolor="wall.wallOptions.cardForeColour"></div>

<!-- 2. Masonry -->
<div ng-switch-when="2" card ng-repeat="status in wall.statuses" open="wall.open" data="status"
cardbgcolor="wall.wallOptions.cardBgColour" cardtxtcolor="wall.wallOptions.cardForeColour"
leaderboardEnabled="{{wall.wallOptions.showStatistics}}"></div>

<!-- 3. Single -->
<div ng-switch-when="3" coa ng-repeat="status in wall.statuses" open="wall.open" data="status"
cardbgcolor="wall.wallOptions.cardBgColour" cardtxtcolor="wall.wallOptions.cardForeColour"
></div>

</div>
</div>
</div>

We pass the saved wall options into each directive using the attributes cardbgcolor, cardtxtcolor, and we use ng-style to evaluate the expression with wallBgColour.

In the linear layout directive file, we use the ‘=’ sign to signal 2-way-binding.

1
2
3
4
5
6
7
8
9
10
function linearLayoutDirective() {
return {
scope: {
data: '=',
cardbgcolor:'=',
cardtxtcolor:'=',
},
templateUrl: 'wall/templates/linear.html',
};
}

Then we can use it in our template (linear.html):

1
2
3
4
<div class="linear linear-simple" style="background-color: {{cardbgcolor}};">
<!-- Main content -->
<p class="linear-content-text" style="color:{{cardtxtcolor}}" ng-class="data.images.length>0?'col-xs-9':'col-xs-12'" ng-bind-html="data.text | tweetTextLink:cardbgcolor | tweetMention:cardbgcolor | tweetHashtag:cardbgcolor | toTrusted"></p>
</div>

I have passed the cardbgcolour into the filter | tweetTextLink:cardbgcolor so we can also change the colours of the links:

1
2
3
4
5
filtersModule.filter('tweetTextLink', function() {
return function(input, cardBgColour) {
var textClassName = cardBgColour ? colourCalculator(hexToRgb(cardBgColour)) : '';
}
}

Have fun customizing your walls at: loklak-wall.herokuapp.com
Screenshot 2016-07-10 09.25.14