mirror of
https://we.phorge.it/source/phorge.git
synced 2024-11-30 18:52:42 +01:00
27a60bdb3c
Summary: Ref T7014. This hooks up the durable column such that when you open it up it loads your most recent Conpherence. You can then switch amongst the various widgets and stuff and everything works nicely. Except... - scroll bar does not work - also doesn't work at HEAD when I add a ton of text to the UI with no changes? (wrapped $copy in array_fill(0, 1000, $copy)) - "widget selector" does not collapse when you select something else - this part wasn't really specified so I used the aphlict dropdown stuff. didn't want to keep working on that if this was the wrong UI choice - can not edit title - do we still want that to be done by clicking on the title, which pops a dialogue? - can not add participants or calendar events - what should this UI be? maybe just a button on the top for "participants" and a button on the bottom for calendar? both on top? - this is not pixel perfect to the mock or two I've seen around. Aside from generally being bad at that, I definitely didn't get the name + timestamps formatting correctly, because the standard DOM of that has timestamp FIRST which appears second due to a "float right". Seemed like a lot of special-casing for what might not even be that important in the UI so I punted. (And again, there's likely many unknown ways in which this isn't pixel perfect) There's also code quality issues - `ConpherenceWidgetConfigConstants` is hopefully temporary or at least gets more sleek as we keep progressing here - copied some CSS from main Conpherence app - DOM structure is pretty different - there's some minor CSS tweaks too given the different width (not to mention the DOM structure being different) - copied some JS from behavior-pontificate.js to sync threads relative to aphlict updates - JS in general is like a better version of existing JS; these should collapse I'd hope? - maybe the aphlict-behavior-dropdown change was badsauce? ...but all that said, this definitely feels really nice and I feel like adding stuff is going to be really easy compared to how normal Conpherence is. Also includes a bonus bug fix - we now correctly update participation. The user would encounter this issue if they were in a conpherence that got some updates and then they went to a different page; they would have unread status for the messages that were ajax'd in. This patch fixes that by making sure we mark participation up to date with the proper transaction in all cases. Test Plan: hit "\" to invoke the column and saw nice loading UI and my latest conpherence load. sent messages and verified they received A-OK by looking in DOM console. toggled various widges and verified they rendered correctly. opened up a second browser with a second user on the thread, sent a message, and it was received in a nice asynchronous fashion Reviewers: chad, epriestley Reviewed By: epriestley Subscribers: Korvin, epriestley Maniphest Tasks: T7014 Differential Revision: https://secure.phabricator.com/D11968
383 lines
8.1 KiB
CSS
383 lines
8.1 KiB
CSS
/**
|
|
* @provides conpherence-durable-column-view
|
|
*/
|
|
|
|
.with-durable-column {
|
|
margin-right: 300px;
|
|
}
|
|
|
|
.conpherence-durable-column {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 300px;
|
|
background: #fff;
|
|
}
|
|
|
|
.conpherence-durable-column .loading-mask {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 300px;
|
|
background: #fff;
|
|
display: none;
|
|
opacity: .6;
|
|
z-index: 2;
|
|
}
|
|
|
|
.conpherence-durable-column.loading .loading-mask {
|
|
display: block;
|
|
}
|
|
|
|
.conpherence-durable-column-header {
|
|
height: 44px;
|
|
border-left: 1px solid #000;
|
|
}
|
|
|
|
.conpherence-durable-column-header .conpherence-settings-dropdown {
|
|
z-index: 1;
|
|
}
|
|
|
|
.conpherence-durable-column-header-text {
|
|
float: left;
|
|
padding: 12px 16px;
|
|
font-size: 15px;
|
|
color: rgba(255,255,255,.8);
|
|
width: 230px;
|
|
}
|
|
|
|
.conpherence-durable-column-header-text:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.conpherence-durable-column-icon-bar {
|
|
height: 34px;
|
|
padding: 5px 16px;
|
|
border-bottom: 1px solid {$thinblueborder};
|
|
}
|
|
|
|
.conpherence-durable-column-body {
|
|
position: absolute;
|
|
top: 44px;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
border-left: 1px solid {$lightblueborder};
|
|
}
|
|
|
|
.conpherence-durable-column-main {
|
|
position: absolute;
|
|
top: 44px;
|
|
bottom: 144px;
|
|
left: 0;
|
|
right: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.conpherence-durable-column-transactions {
|
|
padding: 8px 12px;
|
|
}
|
|
|
|
.conpherence-durable-column-transactions .phabricator-transaction-view {
|
|
background: none;
|
|
margin: 0 10px 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.conpherence-durable-column-transactions .phabricator-transaction-detail {
|
|
border: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.conpherence-durable-column-transactions .phabricator-transaction-detail
|
|
.phabricator-transaction-header {
|
|
background: none;
|
|
padding: 0;
|
|
}
|
|
.conpherence-durable-column-transactions .phabricator-transaction-detail
|
|
.phabricator-transaction-header .phabricator-transaction-info {
|
|
margin: 3px 0px 0px 0px;
|
|
}
|
|
|
|
.conpherence-durable-column-transactions .phabricator-transaction-detail
|
|
.phabricator-transaction-content {
|
|
padding: 0;
|
|
}
|
|
|
|
.conpherence-durable-column-textarea {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 36px;
|
|
height: 100px;
|
|
margin: 0;
|
|
border-width: 1px 0;
|
|
border-style: solid;
|
|
border-top-color: {$thinblueborder};
|
|
border-bottom-color: {$thinblueborder};
|
|
padding: 8px 12px;
|
|
width: 100%;
|
|
resize: none;
|
|
}
|
|
|
|
.conpherence-durable-column-textarea:focus {
|
|
outline: 0;
|
|
border-top-color: {$sky};
|
|
border-bottom-color: {$sky};
|
|
box-shadow: none;
|
|
}
|
|
|
|
/* participants widget */
|
|
|
|
.conpherence-durable-column-body .person-entry {
|
|
padding: 8px 0 0 8px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .person-entry a {
|
|
float: left;
|
|
font-weight: bold;
|
|
line-height: 20px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .person-entry a img {
|
|
height: 35px;
|
|
width: 35px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .person-entry .pic {
|
|
float: left;
|
|
margin: 0 8px 0 0;
|
|
width: 35px;
|
|
padding: 0;
|
|
}
|
|
|
|
.conpherence-durable-column-body .person-entry .remove {
|
|
float: right;
|
|
width: 20px;
|
|
font-size: 18px;
|
|
padding: 5px 0 8px 0;
|
|
}
|
|
|
|
.conpherence-durable-column-body .person-entry .remove:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.conpherence-durable-column-body .person-entry .remove .close-icon {
|
|
color: #bfbfbf;
|
|
}
|
|
|
|
.conpherence-durable-column-body .person-entry .remove:hover .close-icon {
|
|
color: #000;
|
|
}
|
|
|
|
/* files widget */
|
|
|
|
.conpherence-durable-column-body .no-files {
|
|
width: 100%;
|
|
padding: 20px 0px;
|
|
text-align: center;
|
|
color: #555;
|
|
}
|
|
|
|
.conpherence-durable-column-body .file-entry {
|
|
padding: 10px 0;
|
|
margin: 0 5px 0 10px;
|
|
border-bottom: 1px solid #e7e7e7;
|
|
}
|
|
.conpherence-durable-column-body .file-icon {
|
|
width: 32px;
|
|
height: 32px;
|
|
float: left;
|
|
font-size: 30px;
|
|
}
|
|
.conpherence-durable-column-body .file-title {
|
|
display: block;
|
|
position: relative;
|
|
top: -4px;
|
|
left: 2px;
|
|
overflow-x: hidden;
|
|
width: 180px;
|
|
font-weight: bold;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.conpherence-durable-column-body .file-uploaded-by {
|
|
color: #a1a5a9;
|
|
position: relative;
|
|
top: 0px;
|
|
left: 2px;
|
|
width: 170px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
/* calendar widget */
|
|
|
|
.conpherence-durable-column-body .aphront-multi-column-view {
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column {
|
|
background: white;
|
|
border-right: 1px solid #bfbfbf;
|
|
text-align: center;
|
|
}
|
|
|
|
.conpherence-durable-column-body .no-events {
|
|
color: {$lightgreytext};
|
|
}
|
|
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column-last {
|
|
border-right: 0;
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-column,
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-column-active {
|
|
color: #bfbfbf;
|
|
background-color: white;
|
|
font-weight: bold;
|
|
padding: 0px 0px 10px 0px;
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .day-column-active {
|
|
color: black;
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .present ,
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .sporadic ,
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .away {
|
|
height: 10px;
|
|
margin: 5px 0px 5px 0px;
|
|
width: 100%;
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .present {
|
|
background-color: white;
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .sporadic {
|
|
background-color: rgb(222, 226, 232);
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.aphront-multi-column-column .away {
|
|
background-color: rgb(102, 204, 255);
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.day-name {
|
|
padding: 5px 0px 0px 0px;
|
|
font-size: 12px;
|
|
}
|
|
.conpherence-durable-column-body .aphront-multi-column-view
|
|
.day-number {
|
|
font-size: 16px;
|
|
padding: 0 0 5px 0;
|
|
}
|
|
|
|
.conpherence-durable-column-body .day-header {
|
|
overflow: hidden;
|
|
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
|
|
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
|
|
border-top: 1px solid #e7e7e7;
|
|
border-bottom: 1px solid #d7d7d7;
|
|
padding: 5px 10px 5px 10px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .day-header.today {
|
|
background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
|
|
background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
|
|
border-top: none;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.conpherence-durable-column-body .day-header.today .day-name,
|
|
.conpherence-durable-column-body .day-header.today .day-date {
|
|
color: #fff;
|
|
}
|
|
|
|
.conpherence-durable-column-body .day-header .day-name {
|
|
float: left;
|
|
color: #555759;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .day-header .day-date {
|
|
float: right;
|
|
color: #555759;
|
|
font-size: 11px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .top-border {
|
|
border-top: 1px solid #E7E7E7;
|
|
}
|
|
|
|
.conpherence-durable-column-body .user-status {
|
|
padding: 10px 0px 10px 0px;
|
|
margin: 0px 0px 0px 10px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .user-status .icon {
|
|
border-radius: 8px;
|
|
height: 14px;
|
|
width: 14px;
|
|
margin-top: 7px;
|
|
float: left;
|
|
}
|
|
|
|
.conpherence-durable-column-body .sporadic .icon {
|
|
background-color: rgb(222, 226, 232);
|
|
}
|
|
|
|
.conpherence-durable-column-body .away .icon {
|
|
background-color: rgb(102, 204, 255);
|
|
}
|
|
|
|
.conpherence-durable-column-body .user-status .description {
|
|
width: 195px;
|
|
text-overflow: ellipsis;
|
|
margin: 0 0 0px 20px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .user-status .participant {
|
|
font-size: 11px;
|
|
color: {$lightgreytext};
|
|
padding-top: 2px;
|
|
}
|
|
|
|
/* settings widget */
|
|
|
|
.conpherence-durable-column-body .notifications-update {
|
|
margin: 0px 12px;
|
|
}
|
|
|
|
.conpherence-durable-column-body .aphront-form-input {
|
|
margin: 8px 12px;
|
|
width: 100%;
|
|
}
|
|
|
|
.conpherence-durable-column-footer {
|
|
position: absolute;
|
|
height: 26px;
|
|
padding: 4px 8px 4px 12px;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.conpherence-durable-column-footer button {
|
|
float: right;
|
|
}
|
|
|
|
.conpherence-durable-column-status {
|
|
vertical-align: middle;
|
|
line-height: 24px;
|
|
font-size: 12px;
|
|
color: {$lightbluetext};
|
|
}
|