justin/slackthemes
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Link url routes and themes

Browse Source
This commit is contained in:
Ufuk Kayserilioglu
2015-03-17 01:24:29 +02:00
parent 960a7f1102
commit c58a2d0142
4 changed files with 52 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files
source/index.html.erb
+1 -1
View File
@@ -5,6 +5,6 @@ title: Slack Themes
<% themes.each do |theme| %>
<label class="radio theme_label theme_<%= theme.slug %>">
<img src="/images/theme/<%= theme.slug %>-<%= theme.digest %>.png" class="theme_thumb"><br>
<input name="sidebar_theme_rd" type="radio" value="<%= theme.colors %>" ng-model="theme" ng-change="setTheme()"> <%= theme.name %>
<input name="sidebar_theme_rd" type="radio" value="<%= theme.slug %>" ng-model="slug"> <%= theme.name %>
</label>
<% end %>
source/javascripts/all.js
-18
View File
@@ -1,18 +0,0 @@
//= require_tree .
angular.module('theme', [])
.controller('ThemeController', ['$scope', function($scope) {
$scope.$watch(
function() { return $scope.theme; },
function(theme) {
parts = theme.split(',');
$scope.column_bg = parts[0];
$scope.menu_bg = parts[1];
$scope.active_item = parts[2];
$scope.active_item_text = parts[3];
$scope.hover_item = parts[4];
$scope.text_color = parts[5];
$scope.active_presence = parts[6];
$scope.mention_badge = parts[7];
});
}]);
source/javascripts/all.js.erb
+48
View File
@@ -0,0 +1,48 @@
//= require_tree .
var app = angular.module('theme', ['ui.router']);
app.config(['$stateProvider',
function($stateProvider) {
$stateProvider
.state('theme', {
url: "/{slug}",
controller: 'ThemeController'
});
}]);
app.controller('ThemeController', ['$scope', '$stateParams', '$state',
function($scope, $stateParams, $state) {
var colors = {
<%= themes.map do |theme|
"'#{theme.slug}': '#{theme.colors}'"
end.join ",\n" %>
};
$scope.$on('$stateChangeSuccess', function() {
$scope.slug = $stateParams.slug;
});
$scope.$watch('slug', function(slug) {
if (!slug) {
return;
}
$scope.colors = colors[$scope.slug]
$state.go('theme', { slug: slug });
});
$scope.$watch('colors', function(colors) {
if (!colors) {
return;
}
var parts = colors.split(',');
$scope.column_bg = parts[0];
$scope.menu_bg = parts[1];
$scope.active_item = parts[2];
$scope.active_item_text = parts[3];
$scope.hover_item = parts[4];
$scope.text_color = parts[5];
$scope.active_presence = parts[6];
$scope.mention_badge = parts[7];
});
}]);
source/layouts/layout.erb
+3 -3
View File
@@ -10,6 +10,7 @@
<title><%= current_page.data.title || "The Middleman" %></title>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.14/angular.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.13/angular-ui-router.min.js"></script>
<link href="/stylesheets/rollup-client_core.css" rel="stylesheet" type="text/css">
<link href="/stylesheets/rollup-client_primary.css" rel="stylesheet" type="text/css">
@@ -24,8 +25,7 @@
<body class="<%= page_classes %>">
<%= google_analytics_universal_tag %>
<div ng-app="theme" ng-controller='ThemeController'
ng-init="theme = '<%= data.themes.first[:colors] %>'">
<div ng-app="theme" ng-controller='ThemeController'>
<style type="text/css" id="sidebar_theme_css">
/* Column Background */
#col_channels_bg,
@@ -353,7 +353,7 @@
</div> -->
<p class="input_note no_bottom_margin">Copy and paste these values to your <strong>Slack</strong> settings <strong>Sidebar Theme</strong> section:</p>
<input type="text" name="sidebar_theme_custom" id="sidebar_theme_custom" class="monospace subtle_silver no_top_margin" ng-model="theme">
<input type="text" name="sidebar_theme_custom" id="sidebar_theme_custom" class="monospace subtle_silver no_top_margin" ng-model="colors">
</div>
</div>
</div>