Custom colours for loklak walls

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:

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:

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):


   <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.

function linearLayoutDirective() {
  return {
    scope: {
      data: '=',
      cardbgcolor:'=',
      cardtxtcolor:'=',
    },
    templateUrl: 'wall/templates/linear.html',
  };
}

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

<div class="linear linear-simple" style="background-color: {{cardbgcolor}};">
  <!-- Main content -->
  <p class="linear-content-text" style="color: {{cardtxtcolor}};"></p>
</div>

I have passed the cardbgcolour into the filter

|tweetTextLink:cardbgcolor

so we can also change the colours of the links:

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

Custom colours for loklak walls