mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-25 16:22:43 +01:00
Allow users to choo choo choose a room color
Summary: This adds some basic per user / per room theming for Conpherence, which should hopefully let users identify rooms from just the sidebar color. Test Plan: Lots of threads with different colors. Reviewers: epriestley Reviewed By: epriestley Subscribers: Korvin Differential Revision: https://secure.phabricator.com/D17747
This commit is contained in:
parent
1c222c8834
commit
ed9afa18cc
12 changed files with 139 additions and 27 deletions
|
@ -7,8 +7,8 @@
|
|||
*/
|
||||
return array(
|
||||
'names' => array(
|
||||
'conpherence.pkg.css' => '3776e82d',
|
||||
'conpherence.pkg.js' => '7b6aa581',
|
||||
'conpherence.pkg.css' => 'ff161f2d',
|
||||
'conpherence.pkg.js' => 'b5b51108',
|
||||
'core.pkg.css' => '959330a2',
|
||||
'core.pkg.js' => '47a69358',
|
||||
'darkconsole.pkg.js' => '1f9a31bc',
|
||||
|
@ -50,9 +50,10 @@ return array(
|
|||
'rsrc/css/application/config/config-template.css' => '8f18fa41',
|
||||
'rsrc/css/application/config/setup-issue.css' => 'f794cfc3',
|
||||
'rsrc/css/application/config/unhandled-exception.css' => '4c96257a',
|
||||
'rsrc/css/application/conpherence/color.css' => 'abb4c358',
|
||||
'rsrc/css/application/conpherence/durable-column.css' => '89ea6bef',
|
||||
'rsrc/css/application/conpherence/header-pane.css' => 'a1104b93',
|
||||
'rsrc/css/application/conpherence/menu.css' => '88100764',
|
||||
'rsrc/css/application/conpherence/header-pane.css' => 'cb6f4e19',
|
||||
'rsrc/css/application/conpherence/menu.css' => '6953e7ec',
|
||||
'rsrc/css/application/conpherence/message-pane.css' => 'b0f55ecc',
|
||||
'rsrc/css/application/conpherence/notification.css' => 'cef0a3fc',
|
||||
'rsrc/css/application/conpherence/participant-pane.css' => '26a3ce56',
|
||||
|
@ -378,7 +379,7 @@ return array(
|
|||
'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '4d863052',
|
||||
'rsrc/js/application/conpherence/behavior-conpherence-search.js' => '9bbf3762',
|
||||
'rsrc/js/application/conpherence/behavior-durable-column.js' => 'aa3bd034',
|
||||
'rsrc/js/application/conpherence/behavior-menu.js' => '31ab6d0f',
|
||||
'rsrc/js/application/conpherence/behavior-menu.js' => 'c9b99b77',
|
||||
'rsrc/js/application/conpherence/behavior-participant-pane.js' => '8604caa8',
|
||||
'rsrc/js/application/conpherence/behavior-pontificate.js' => '55616e04',
|
||||
'rsrc/js/application/conpherence/behavior-quicksand-blacklist.js' => '7927a7d3',
|
||||
|
@ -559,9 +560,10 @@ return array(
|
|||
'conduit-api-css' => '7bc725c4',
|
||||
'config-options-css' => '0ede4c9b',
|
||||
'config-page-css' => 'c1d5121b',
|
||||
'conpherence-color-css' => 'abb4c358',
|
||||
'conpherence-durable-column-view' => '89ea6bef',
|
||||
'conpherence-header-pane-css' => 'a1104b93',
|
||||
'conpherence-menu-css' => '88100764',
|
||||
'conpherence-header-pane-css' => 'cb6f4e19',
|
||||
'conpherence-menu-css' => '6953e7ec',
|
||||
'conpherence-message-pane-css' => 'b0f55ecc',
|
||||
'conpherence-notification-css' => 'cef0a3fc',
|
||||
'conpherence-participant-pane-css' => '26a3ce56',
|
||||
|
@ -605,7 +607,7 @@ return array(
|
|||
'javelin-behavior-choose-control' => '327a00d1',
|
||||
'javelin-behavior-comment-actions' => '9a6dd75c',
|
||||
'javelin-behavior-config-reorder-fields' => 'b6993408',
|
||||
'javelin-behavior-conpherence-menu' => '31ab6d0f',
|
||||
'javelin-behavior-conpherence-menu' => 'c9b99b77',
|
||||
'javelin-behavior-conpherence-participant-pane' => '8604caa8',
|
||||
'javelin-behavior-conpherence-pontificate' => '55616e04',
|
||||
'javelin-behavior-conpherence-search' => '9bbf3762',
|
||||
|
@ -1126,20 +1128,6 @@ return array(
|
|||
'31420f77' => array(
|
||||
'javelin-behavior',
|
||||
),
|
||||
'31ab6d0f' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-dom',
|
||||
'javelin-util',
|
||||
'javelin-stratcom',
|
||||
'javelin-workflow',
|
||||
'javelin-behavior-device',
|
||||
'javelin-history',
|
||||
'javelin-vector',
|
||||
'javelin-scrollbar',
|
||||
'phabricator-title',
|
||||
'phabricator-shaped-request',
|
||||
'conpherence-thread-manager',
|
||||
),
|
||||
'320810c8' => array(
|
||||
'javelin-install',
|
||||
'javelin-dom',
|
||||
|
@ -2003,6 +1991,20 @@ return array(
|
|||
'javelin-util',
|
||||
'javelin-stratcom',
|
||||
),
|
||||
'c9b99b77' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-dom',
|
||||
'javelin-util',
|
||||
'javelin-stratcom',
|
||||
'javelin-workflow',
|
||||
'javelin-behavior-device',
|
||||
'javelin-history',
|
||||
'javelin-vector',
|
||||
'javelin-scrollbar',
|
||||
'phabricator-title',
|
||||
'phabricator-shaped-request',
|
||||
'conpherence-thread-manager',
|
||||
),
|
||||
'ca3f91eb' => array(
|
||||
'javelin-behavior',
|
||||
'javelin-dom',
|
||||
|
@ -2261,6 +2263,7 @@ return array(
|
|||
'conpherence.pkg.css' => array(
|
||||
'conpherence-durable-column-view',
|
||||
'conpherence-menu-css',
|
||||
'conpherence-color-css',
|
||||
'conpherence-message-pane-css',
|
||||
'conpherence-notification-css',
|
||||
'conpherence-transaction-css',
|
||||
|
|
|
@ -161,6 +161,7 @@ return array(
|
|||
'conpherence.pkg.css' => array(
|
||||
'conpherence-durable-column-view',
|
||||
'conpherence-menu-css',
|
||||
'conpherence-color-css',
|
||||
'conpherence-message-pane-css',
|
||||
'conpherence-notification-css',
|
||||
'conpherence-transaction-css',
|
||||
|
|
|
@ -9,6 +9,13 @@ final class ConpherenceRoomSettings extends ConpherenceConstants {
|
|||
const DEFAULT_MENTION_SOUND = 'alert';
|
||||
const DEFAULT_NO_SOUND = 'none';
|
||||
|
||||
const COLOR_LIGHT = 'light';
|
||||
const COLOR_BLUE = 'blue';
|
||||
const COLOR_INDIGO = 'indigo';
|
||||
const COLOR_PEACH = 'peach';
|
||||
const COLOR_GREEN = 'green';
|
||||
const COLOR_PINK = 'pink';
|
||||
|
||||
public static function getSoundMap() {
|
||||
return array(
|
||||
'none' => array(
|
||||
|
@ -43,5 +50,20 @@ final class ConpherenceRoomSettings extends ConpherenceConstants {
|
|||
return ipull($map, 'name');
|
||||
}
|
||||
|
||||
public static function getThemeMap() {
|
||||
return array(
|
||||
self::COLOR_LIGHT => pht('Light'),
|
||||
self::COLOR_BLUE => pht('Blue'),
|
||||
self::COLOR_INDIGO => pht('Indigo'),
|
||||
self::COLOR_PEACH => pht('Peach'),
|
||||
self::COLOR_GREEN => pht('Green'),
|
||||
self::COLOR_PINK => pht('Pink'),
|
||||
);
|
||||
}
|
||||
|
||||
public static function getThemeClass($theme) {
|
||||
return 'conpherence-theme-'.$theme;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -41,10 +41,12 @@ final class ConpherenceRoomPreferencesController
|
|||
if ($request->isFormPost()) {
|
||||
$notifications = $request->getStr('notifications');
|
||||
$sounds = $request->getArr('sounds');
|
||||
$theme = $request->getStr('theme');
|
||||
|
||||
$participant->setSettings(array(
|
||||
'notifications' => $notifications,
|
||||
'sounds' => $sounds,
|
||||
'theme' => $theme,
|
||||
));
|
||||
$participant->save();
|
||||
|
||||
|
@ -60,6 +62,7 @@ final class ConpherenceRoomPreferencesController
|
|||
|
||||
$settings = $participant->getSettings();
|
||||
$notifications = idx($settings, 'notifications', $notification_default);
|
||||
$theme = idx($settings, 'theme', ConpherenceRoomSettings::COLOR_LIGHT);
|
||||
|
||||
$sounds = idx($settings, 'sounds', array());
|
||||
$map = PhabricatorConpherenceSoundSetting::getDefaultSound($sound_default);
|
||||
|
@ -92,7 +95,13 @@ final class ConpherenceRoomPreferencesController
|
|||
->setLabel(pht('New Message'))
|
||||
->setName('sounds['.ConpherenceRoomSettings::SOUND_RECEIVE.']')
|
||||
->setOptions(ConpherenceRoomSettings::getDropdownSoundMap())
|
||||
->setValue($receive));
|
||||
->setValue($receive))
|
||||
->appendChild(
|
||||
id(new AphrontFormSelectControl())
|
||||
->setLabel(pht('Theme'))
|
||||
->setName('theme')
|
||||
->setOptions(ConpherenceRoomSettings::getThemeMap())
|
||||
->setValue($theme));
|
||||
|
||||
return $this->newDialog()
|
||||
->setTitle(pht('Room Preferences'))
|
||||
|
|
|
@ -56,7 +56,11 @@ final class ConpherenceViewController extends
|
|||
$this->setConpherence($conpherence);
|
||||
|
||||
$participant = $conpherence->getParticipantIfExists($user->getPHID());
|
||||
$theme = ConpherenceRoomSettings::COLOR_LIGHT;
|
||||
|
||||
if ($participant) {
|
||||
$settings = $participant->getSettings();
|
||||
$theme = idx($settings, 'theme', ConpherenceRoomSettings::COLOR_LIGHT);
|
||||
if (!$participant->isUpToDate($conpherence)) {
|
||||
$write_guard = AphrontWriteGuard::beginScopedUnguardedWrites();
|
||||
$participant->markUpToDate($conpherence);
|
||||
|
@ -118,6 +122,7 @@ final class ConpherenceViewController extends
|
|||
->setSearch($search)
|
||||
->setMessages($messages)
|
||||
->setReplyForm($form)
|
||||
->setTheme($theme)
|
||||
->setLatestTransactionID($data['latest_transaction_id'])
|
||||
->setRole('thread');
|
||||
|
||||
|
|
|
@ -204,8 +204,13 @@ final class ConpherenceThread extends ConpherenceDAO
|
|||
}
|
||||
|
||||
$user_participation = $this->getParticipantIfExists($viewer->getPHID());
|
||||
$theme = ConpherenceRoomSettings::COLOR_LIGHT;
|
||||
if ($user_participation) {
|
||||
$user_seen_count = $user_participation->getSeenMessageCount();
|
||||
$participant = $this->getParticipant($viewer->getPHID());
|
||||
$settings = $participant->getSettings();
|
||||
$theme = idx($settings, 'theme', $theme);
|
||||
$theme_class = ConpherenceRoomSettings::getThemeClass($theme);
|
||||
} else {
|
||||
$user_seen_count = 0;
|
||||
}
|
||||
|
@ -221,6 +226,7 @@ final class ConpherenceThread extends ConpherenceDAO
|
|||
'unread_count' => $unread_count,
|
||||
'epoch' => $this->getDateModified(),
|
||||
'image' => $img_src,
|
||||
'theme' => $theme_class,
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -10,6 +10,7 @@ final class ConpherenceLayoutView extends AphrontTagView {
|
|||
private $search;
|
||||
private $messages;
|
||||
private $replyForm;
|
||||
private $theme = ConpherenceRoomSettings::COLOR_LIGHT;
|
||||
private $latestTransactionID;
|
||||
|
||||
public function setMessages($messages) {
|
||||
|
@ -56,6 +57,11 @@ final class ConpherenceLayoutView extends AphrontTagView {
|
|||
return $this;
|
||||
}
|
||||
|
||||
public function setTheme($theme) {
|
||||
$this->theme = $theme;
|
||||
return $this;
|
||||
}
|
||||
|
||||
public function setLatestTransactionID($id) {
|
||||
$this->latestTransactionID = $id;
|
||||
return $this;
|
||||
|
@ -66,6 +72,7 @@ final class ConpherenceLayoutView extends AphrontTagView {
|
|||
$classes[] = 'conpherence-layout';
|
||||
$classes[] = 'hide-widgets';
|
||||
$classes[] = 'conpherence-role-'.$this->role;
|
||||
$classes[] = ConpherenceRoomSettings::getThemeClass($this->theme);
|
||||
|
||||
return array(
|
||||
'id' => 'conpherence-main-layout',
|
||||
|
@ -105,6 +112,7 @@ final class ConpherenceLayoutView extends AphrontTagView {
|
|||
'canEditSelectedThread' => $can_edit_selected,
|
||||
'latestTransactionID' => $this->latestTransactionID,
|
||||
'role' => $this->role,
|
||||
'theme' => ConpherenceRoomSettings::getThemeClass($this->theme),
|
||||
'hasThreadList' => (bool)$this->threadView,
|
||||
'hasThread' => (bool)$this->messages,
|
||||
'hasWidgets' => false,
|
||||
|
|
|
@ -75,6 +75,7 @@ final class ConpherenceThreadListView extends AphrontView {
|
|||
'title' => $data['title'],
|
||||
'id' => $dom_id,
|
||||
'threadID' => $thread->getID(),
|
||||
'theme' => $data['theme'],
|
||||
));
|
||||
}
|
||||
|
||||
|
|
48
webroot/rsrc/css/application/conpherence/color.css
Normal file
48
webroot/rsrc/css/application/conpherence/color.css
Normal file
|
@ -0,0 +1,48 @@
|
|||
/**
|
||||
* @provides conpherence-color-css
|
||||
*/
|
||||
|
||||
.conpherence-theme-blue .conpherence-menu-pane {
|
||||
background-color: {$lightblue};
|
||||
}
|
||||
|
||||
.conpherence-theme-blue .phui-basic-nav .phabricator-side-menu
|
||||
.phui-list-item-selected {
|
||||
border-left-color: {$blue};
|
||||
}
|
||||
|
||||
.conpherence-theme-indigo .conpherence-menu-pane {
|
||||
background-color: {$lightindigo};
|
||||
}
|
||||
|
||||
.conpherence-theme-indigo .phui-basic-nav .phabricator-side-menu
|
||||
.phui-list-item-selected {
|
||||
border-left-color: {$indigo};
|
||||
}
|
||||
|
||||
.conpherence-theme-peach .conpherence-menu-pane {
|
||||
background-color: {$lightred};
|
||||
}
|
||||
|
||||
.conpherence-theme-peach .phui-basic-nav .phabricator-side-menu
|
||||
.phui-list-item-selected {
|
||||
border-left-color: rgba(0,0,0,.25);
|
||||
}
|
||||
|
||||
.conpherence-theme-green .conpherence-menu-pane {
|
||||
background-color: {$lightgreen};
|
||||
}
|
||||
|
||||
.conpherence-theme-green .phui-basic-nav .phabricator-side-menu
|
||||
.phui-list-item-selected {
|
||||
border-left-color: {$green};
|
||||
}
|
||||
|
||||
.conpherence-theme-pink .conpherence-menu-pane {
|
||||
background-color: {$lightpink};
|
||||
}
|
||||
|
||||
.conpherence-theme-pink .phui-basic-nav .phabricator-side-menu
|
||||
.phui-list-item-selected {
|
||||
border-left-color: {$pink};
|
||||
}
|
|
@ -2,10 +2,6 @@
|
|||
* @provides conpherence-header-pane-css
|
||||
*/
|
||||
|
||||
.conpherence-header-pane {
|
||||
background-color: {$lightbluebackground};
|
||||
}
|
||||
|
||||
.conpherence-header-pane .phui-header-shell {
|
||||
padding: 8px 16px 10px;
|
||||
min-height: 38px;
|
||||
|
|
|
@ -21,6 +21,10 @@
|
|||
background-color: {$page.sidenav};
|
||||
}
|
||||
|
||||
.conpherence-menu-pane .phui-basic-nav .phabricator-side-menu {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.conpherence-menu-pane.phabricator-side-menu .room-list-href {
|
||||
padding: 10px 0 9px 8px;
|
||||
display: inline-block;
|
||||
|
|
|
@ -25,6 +25,7 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
};
|
||||
|
||||
var scrollbar = null;
|
||||
var cur_theme = config.theme;
|
||||
|
||||
// TODO - move more logic into the ThreadManager
|
||||
var threadManager = new JX.ConpherenceThreadManager();
|
||||
|
@ -144,6 +145,14 @@ JX.behavior('conpherence-menu', function(config) {
|
|||
|
||||
function updatePageData(data) {
|
||||
var uri = '/Z' + _thread.selected;
|
||||
var new_theme = data.theme;
|
||||
|
||||
if (new_theme != cur_theme) {
|
||||
var root = JX.$('conpherence-main-layout');
|
||||
JX.DOM.alterClass(root, cur_theme, false);
|
||||
JX.DOM.alterClass(root, new_theme, true);
|
||||
cur_theme = new_theme;
|
||||
}
|
||||
JX.History.replace(uri);
|
||||
if (data.title) {
|
||||
JX.Title.setTitle(data.title);
|
||||
|
|
Loading…
Reference in a new issue