Convert Durable Column to popup chat in footer · recaptime.dev/phorge@95d1749

+21 -21

resources/celerity/map.php

··· 7 7 */ 8 8 return array( 9 9 'names' => array( 10 - 'conpherence.pkg.css' => 'd93561e2', 10 + 'conpherence.pkg.css' => '3f5d038e', 11 11 'conpherence.pkg.js' => '11f3e07e', 12 - 'core.pkg.css' => '2fd26498', 13 - 'core.pkg.js' => '1d376fa9', 12 + 'core.pkg.css' => '55d32e63', 13 + 'core.pkg.js' => '32939240', 14 14 'darkconsole.pkg.js' => 'e7393ebb', 15 15 'differential.pkg.css' => '3fb7f532', 16 16 'differential.pkg.js' => '634399e9', ··· 23 23 'rsrc/css/aphront/dialog-view.css' => '593d3f67', 24 24 'rsrc/css/aphront/lightbox-attachment.css' => '7acac05d', 25 25 'rsrc/css/aphront/list-filter-view.css' => '5d6f0526', 26 - 'rsrc/css/aphront/multi-column.css' => 'fd18389d', 26 + 'rsrc/css/aphront/multi-column.css' => '84cc6640', 27 27 'rsrc/css/aphront/notification.css' => '3f6c89c9', 28 28 'rsrc/css/aphront/panel-view.css' => '8427b78d', 29 29 'rsrc/css/aphront/phabricator-nav-view.css' => 'b29426e9', ··· 46 46 'rsrc/css/application/config/config-template.css' => '8f18fa41', 47 47 'rsrc/css/application/config/setup-issue.css' => 'f794cfc3', 48 48 'rsrc/css/application/config/unhandled-exception.css' => '4c96257a', 49 - 'rsrc/css/application/conpherence/durable-column.css' => '194ac487', 49 + 'rsrc/css/application/conpherence/durable-column.css' => '63114a54', 50 50 'rsrc/css/application/conpherence/header-pane.css' => '517de9fe', 51 51 'rsrc/css/application/conpherence/menu.css' => '78c7b811', 52 52 'rsrc/css/application/conpherence/message-pane.css' => 'bbbb8a9b', ··· 164 164 'rsrc/css/phui/phui-timeline-view.css' => 'bc523970', 165 165 'rsrc/css/phui/phui-two-column-view.css' => 'fcfbe347', 166 166 'rsrc/css/phui/workboards/phui-workboard-color.css' => 'ac6fe6a7', 167 - 'rsrc/css/phui/workboards/phui-workboard.css' => 'bda3ef58', 167 + 'rsrc/css/phui/workboards/phui-workboard.css' => 'e09eb53a', 168 168 'rsrc/css/phui/workboards/phui-workcard.css' => '0c62d7c5', 169 169 'rsrc/css/phui/workboards/phui-workpanel.css' => '92197373', 170 170 'rsrc/css/sprite-login.css' => '6dbbbd97', ··· 438 438 'rsrc/js/application/config/behavior-reorder-fields.js' => 'b6993408', 439 439 'rsrc/js/application/conpherence/ConpherenceThreadManager.js' => '01774ab2', 440 440 'rsrc/js/application/conpherence/behavior-drag-and-drop-photo.js' => 'cf86d16a', 441 - 'rsrc/js/application/conpherence/behavior-durable-column.js' => 'd3506890', 441 + 'rsrc/js/application/conpherence/behavior-durable-column.js' => '39e0ea32', 442 442 'rsrc/js/application/conpherence/behavior-menu.js' => '9eb55204', 443 443 'rsrc/js/application/conpherence/behavior-participant-pane.js' => '8604caa8', 444 444 'rsrc/js/application/conpherence/behavior-pontificate.js' => 'f2e58483', ··· 605 605 'aphront-dark-console-css' => 'f54bf286', 606 606 'aphront-dialog-view-css' => '593d3f67', 607 607 'aphront-list-filter-view-css' => '5d6f0526', 608 - 'aphront-multi-column-view-css' => 'fd18389d', 608 + 'aphront-multi-column-view-css' => '84cc6640', 609 609 'aphront-panel-view-css' => '8427b78d', 610 610 'aphront-table-view-css' => '3225137a', 611 611 'aphront-tokenizer-control-css' => '056da01b', ··· 618 618 'conduit-api-css' => '7bc725c4', 619 619 'config-options-css' => '0ede4c9b', 620 620 'config-page-css' => '8798e14f', 621 - 'conpherence-durable-column-view' => '194ac487', 621 + 'conpherence-durable-column-view' => '63114a54', 622 622 'conpherence-header-pane-css' => '517de9fe', 623 623 'conpherence-menu-css' => '78c7b811', 624 624 'conpherence-message-pane-css' => 'bbbb8a9b', ··· 699 699 'javelin-behavior-diffusion-pull-lastmodified' => 'f01586dc', 700 700 'javelin-behavior-doorkeeper-tag' => 'e5822781', 701 701 'javelin-behavior-drydock-live-operation-status' => '901935ef', 702 - 'javelin-behavior-durable-column' => 'd3506890', 702 + 'javelin-behavior-durable-column' => '39e0ea32', 703 703 'javelin-behavior-editengine-reorder-configs' => 'd7a74243', 704 704 'javelin-behavior-editengine-reorder-fields' => 'b59e1e96', 705 705 'javelin-behavior-error-log' => '6882e80a', ··· 943 943 'phui-timeline-view-css' => 'bc523970', 944 944 'phui-two-column-view-css' => 'fcfbe347', 945 945 'phui-workboard-color-css' => 'ac6fe6a7', 946 - 'phui-workboard-view-css' => 'bda3ef58', 946 + 'phui-workboard-view-css' => 'e09eb53a', 947 947 'phui-workcard-view-css' => '0c62d7c5', 948 948 'phui-workpanel-view-css' => '92197373', 949 949 'phuix-action-list-view' => 'b5c256b8', ··· 1200 1200 'javelin-stratcom', 1201 1201 'javelin-dom', 1202 1202 'javelin-workflow', 1203 + ), 1204 + '39e0ea32' => array( 1205 + 'javelin-behavior', 1206 + 'javelin-dom', 1207 + 'javelin-stratcom', 1208 + 'javelin-behavior-device', 1209 + 'javelin-scrollbar', 1210 + 'javelin-quicksand', 1211 + 'phabricator-keyboard-shortcut', 1212 + 'conpherence-thread-manager', 1203 1213 ), 1204 1214 '3ab51e2c' => array( 1205 1215 'javelin-behavior', ··· 2033 2043 ), 2034 2044 'd254d646' => array( 2035 2045 'javelin-util', 2036 - ), 2037 - 'd3506890' => array( 2038 - 'javelin-behavior', 2039 - 'javelin-dom', 2040 - 'javelin-stratcom', 2041 - 'javelin-behavior-device', 2042 - 'javelin-scrollbar', 2043 - 'javelin-quicksand', 2044 - 'phabricator-keyboard-shortcut', 2045 - 'conpherence-thread-manager', 2046 2046 ), 2047 2047 'd4505101' => array( 2048 2048 'javelin-stratcom',

+3 -43

src/applications/conpherence/view/ConpherenceDurableColumnView.php

··· 125 125 126 126 $classes = array(); 127 127 $classes[] = 'conpherence-durable-column-header'; 128 - $classes[] = 'phabricator-main-menu-background'; 129 - 130 - $loading_mask = phutil_tag( 131 - 'div', 132 - array( 133 - 'class' => 'loading-mask', 134 - ), 135 - ''); 128 + $classes[] = 'grouped'; 136 129 137 130 $header = phutil_tag( 138 131 'div', ··· 175 168 176 169 $input = $this->buildTextInput(); 177 170 178 - $footer = phutil_tag( 179 - 'div', 180 - array( 181 - 'class' => 'conpherence-durable-column-footer', 182 - ), 183 - array( 184 - $this->buildSendButton(), 185 - phutil_tag( 186 - 'div', 187 - array( 188 - 'class' => 'conpherence-durable-column-status', 189 - ), 190 - $this->buildStatusText()), 191 - )); 192 - 193 171 return array( 194 - $loading_mask, 195 172 $header, 196 173 javelin_tag( 197 174 'div', ··· 203 180 $icon_bar, 204 181 $content, 205 182 $input, 206 - $footer, 207 183 )), 208 184 ); 209 185 } ··· 263 239 ), 264 240 '')); 265 241 } 266 - $icons[] = $this->buildSearchButton(); 267 242 268 243 return $icons; 269 244 } 270 245 271 - private function buildSearchButton() { 272 - return phutil_tag( 273 - 'div', 274 - array( 275 - 'class' => 'conpherence-durable-column-search-button', 276 - ), 277 - id(new PHUIButtonBarView()) 278 - ->addButton( 279 - id(new PHUIButtonView()) 280 - ->setTag('a') 281 - ->setHref('/conpherence/search/') 282 - ->setColor(PHUIButtonView::GREY) 283 - ->setIcon('fa-search'))); 284 - } 285 - 286 246 private function buildHeader() { 287 247 $conpherence = $this->getSelectedConpherence(); 288 248 ··· 354 314 phutil_tag( 355 315 'div', 356 316 array( 357 - 'class' => 'conpherence-durable-column-header', 317 + 'class' => 'conpherence-durable-column-header-inner', 358 318 ), 359 319 array( 360 320 javelin_tag( ··· 401 361 } 402 362 403 363 $actions[] = array( 404 - 'name' => pht('Hide Column'), 364 + 'name' => pht('Hide Window'), 405 365 'disabled' => false, 406 366 'href' => '#', 407 367 'icon' => 'fa-times',

-36

webroot/rsrc/css/aphront/multi-column.css

··· 182 182 margin: 0 0 16px; 183 183 } 184 184 } 185 - 186 - /* Make Dashboards with Durable reasonably display on homepage narrow widths */ 187 - @media (max-width: 1300px) { 188 - .device-desktop.with-durable-column .dashboard-view 189 - .aphront-multi-column-inner { 190 - display: block; 191 - width: auto; 192 - } 193 - .device-desktop.with-durable-column .dashboard-view 194 - .aphront-multi-column-column-outer { 195 - display: block; 196 - border: none; 197 - } 198 - .device-desktop.with-durable-column .dashboard-view 199 - .aphront-multi-column-column.mlr { 200 - margin: 0; 201 - } 202 - .device-desktop.with-durable-column .dashboard-view 203 - .aphront-multi-column-fluid .aphront-multi-column-2-up 204 - .aphront-multi-column-column-outer.half { 205 - width: auto; 206 - margin: 0 0 16px; 207 - } 208 - .device-desktop.with-durable-column .dashboard-view 209 - .aphront-multi-column-fluid .aphront-multi-column-2-up 210 - .aphront-multi-column-column-outer.thirds { 211 - width: auto; 212 - margin: 0 0 16px; 213 - } 214 - .device-desktop.with-durable-column .dashboard-view 215 - .aphront-multi-column-fluid .aphront-multi-column-2-up 216 - .aphront-multi-column-column-outer.third { 217 - width: auto; 218 - margin: 0 0 16px; 219 - } 220 - }

+70 -135

webroot/rsrc/css/application/conpherence/durable-column.css

··· 2 2 * @provides conpherence-durable-column-view 3 3 */ 4 4 5 - .with-durable-column .phabricator-standard-page-body { 6 - margin-right: 300px; 7 - } 8 - 9 - .with-durable-margin .phabricator-standard-page-body { 10 - margin-right: 312px; 11 - } 12 - 13 - .with-durable-column .phabricator-main-menu { 14 - padding-right: 304px; 15 - } 16 - 17 - .with-durable-margin .phabricator-main-menu { 18 - padding-right: 316px; 19 - } 20 - 21 - .with-durable-column 22 - .phabricator-global-upload-instructions { 23 - font-size: 28px; 24 - width: 50%; 25 - } 26 - 27 5 .global-upload-mask { 28 6 pointer-events: none; 29 7 } 30 8 31 - .with-durable-column .global-upload-mask { 32 - right: 300px; 33 - } 34 - 35 - .with-durable-margin .global-upload-mask { 36 - right: 312px; 37 - } 38 - 39 9 .conpherence-durable-column { 40 10 position: fixed; 41 - top: 0; 42 11 bottom: 0; 43 - right: 0; 12 + right: 12px; 44 13 width: 300px; 14 + height: 380px; 45 15 background: #fff; 46 - } 47 - 48 - .with-durable-margin .conpherence-durable-column { 49 - border-right: 12px solid {$lightgreybackground}; 16 + box-shadow: 0px 1px 8px rgba(55,55,55, .3); 50 17 } 51 18 52 - .conpherence-durable-column .loading-mask { 53 - position: absolute; 54 - top: 90px; 55 - bottom: 0; 56 - right: 1px; 57 - width: 298px; 58 - background: #fff; 19 + .device .conpherence-durable-column { 59 20 display: none; 60 - opacity: .6; 61 - z-index: 2; 62 21 } 63 22 64 23 .device-desktop .conpherence-durable-column.loading .loading-mask { ··· 75 34 padding-right: 4px; 76 35 width: 36px; 77 36 } 78 - .conpherence-durable-column-header 79 - .phabricator-application-menu .phui-list-item-view.core-menu-item { 80 - display: block; 37 + 38 + .conpherence-durable-column-header .phabricator-application-menu 39 + .phui-list-item-view.core-menu-item { 40 + display: block; 81 41 } 82 - .conpherence-durable-column-header 83 - .phabricator-application-menu .phui-list-item-name { 84 - display: none; 42 + 43 + .conpherence-durable-column-header .phabricator-application-menu 44 + .phui-list-item-name { 45 + display: none; 85 46 } 86 - .conpherence-durable-column-header 87 - .phabricator-application-menu .phui-list-item-view { 88 - float: left; 89 - position: relative; 90 - width: 36px; 91 - height: 36px; 92 - margin-top: 4px; 47 + 48 + .conpherence-durable-column-header .phabricator-application-menu 49 + .phui-list-item-view { 50 + float: left; 51 + position: relative; 52 + width: 30px; 53 + height: 30px; 54 + margin-top: 2px; 93 55 } 94 - .conpherence-durable-column-header 95 - .phabricator-application-menu .phui-list-item-href { 96 - background: transparent; 97 - border: none; 98 - padding: 0; 56 + 57 + .conpherence-durable-column-header .phabricator-application-menu 58 + .phui-list-item-href { 59 + background: transparent; 60 + border: none; 61 + padding: 0; 99 62 } 100 - .conpherence-durable-column-header 101 - .phabricator-dark-menu .phui-list-item-type-link { 102 - background: transparent; 63 + 64 + .conpherence-durable-column-header .phabricator-application-menu 65 + .phui-list-item-view.core-menu-item { 66 + display: block; 103 67 } 104 - .conpherence-durable-column-header 105 - .phabricator-application-menu 106 - .phui-list-item-view.core-menu-item { 107 - display: block; 68 + 69 + .conpherence-durable-column-header { 70 + border-top-right-radius: 3px; 71 + border-top-left-radius: 3px; 72 + background-color: #525867; 108 73 } 109 74 110 - .conpherence-durable-column-header { 111 - border-left: 1px solid rgba({$alphablack},.1); 112 - border-right: 1px solid rgba({$alphablack},.1); 75 + .conpherence-durable-column-header 76 + .phabricator-main-menu-dropdown.phui-list-sidenav { 77 + top: 30px; 113 78 } 114 79 115 80 .conpherence-durable-column-header-text { 116 81 float: left; 117 - padding: 13px 0 12px 12px; 118 - font-size: 15px; 119 - color: {$hoverwhite}; 82 + padding: 8px 0 8px 10px; 83 + color: #fff; 120 84 width: 230px; 121 85 text-overflow: ellipsis; 122 86 overflow: hidden; 123 87 white-space: nowrap; 88 + text-shadow: 1px 1px 0 rgba(0,0,0,.6); 89 + } 90 + 91 + .conpherence-durable-column-header .phabricator-application-menu 92 + .phui-list-item-icon.phui-font-fa { 93 + font-size: 14px; 94 + margin: 8px 10px; 124 95 } 125 96 126 97 .conpherence-durable-column-header-text .phui-icon-view { 127 - color: {$hoverwhite}; 98 + color: #fff; 99 + text-shadow: 1px 1px 0 rgba(0,0,0,.6); 128 100 } 129 101 130 102 .conpherence-durable-column-icon-bar { 131 - height: 38px; 103 + height: 32px; 132 104 padding: 4px; 133 105 background-color: {$lightgreybackground}; 134 106 } ··· 136 108 .conpherence-durable-column-icon-bar .conpherence-durable-column-thread-icon { 137 109 float: left; 138 110 display: block; 139 - height: 34px; 140 - width: 34px; 111 + height: 28px; 112 + width: 28px; 141 113 border: 2px solid transparent; 142 114 border-radius: 3px; 143 - margin: 0 4px 0 0; 144 - } 145 - 146 - .conpherence-durable-column-icon-bar .conpherence-durable-column-search-button { 147 - margin: 4px 0px 0px 0px; 148 - } 149 - .conpherence-durable-column-icon-bar .phui-button-bar { 150 - } 151 - .conpherence-durable-column-icon-bar .phui-button-bar a.button.has-icon { 152 - height: 21px; 153 - } 154 - .conpherence-durable-column-icon-bar .phui-button-bar .button .phui-icon-view { 155 - top: 8px; 115 + margin: 0 2px 0 0; 156 116 } 157 117 158 118 .conpherence-durable-column-icon-bar ··· 164 124 .conpherence-durable-column-thread-icon span { 165 125 position: relative; 166 126 display: block; 167 - width: 30px; 168 - height: 30px; 127 + width: 24px; 128 + height: 24px; 169 129 top: 2px; 170 130 left: 2px; 171 - background-size: 30px 30px; 131 + background-size: 24px 24px; 172 132 } 173 133 174 134 .conpherence-durable-column-body { 175 135 position: absolute; 176 - top: 44px; 136 + top: 34px; 177 137 bottom: 0; 178 138 right: 0; 179 139 left: 0; 180 - border-left: 1px solid {$lightblueborder}; 181 - } 182 - 183 - .with-durable-margin .conpherence-durable-column-body { 184 - border-right: 1px solid {$lightblueborder}; 185 140 } 186 141 187 142 .conpherence-durable-column-main { 188 143 position: absolute; 189 - top: 46px; 190 - bottom: 134px; 144 + top: 40px; 145 + bottom: 36px; 191 146 left: 0; 192 147 right: 0; 193 148 overflow-x: hidden; ··· 218 173 min-height: 0; 219 174 } 220 175 221 - .conpherence-durable-column-transactions 222 - .conpherence-transaction-view 176 + .conpherence-durable-column-transactions .conpherence-transaction-view 223 177 .conpherence-message { 224 - word-wrap: break-word; 178 + word-wrap: break-word; 225 179 } 226 180 227 181 .conpherence-durable-column-transactions .conpherence-transaction-detail { ··· 230 184 } 231 185 232 186 .conpherence-durable-column-transactions .conpherence-transaction-detail 233 - .conpherence-transaction-header { 234 - background: none; 235 - padding: 0 0 2px 0; 187 + .conpherence-transaction-header { 188 + background: none; 189 + padding: 0 0 2px 0; 236 190 } 237 191 238 192 .conpherence-durable-column-transactions ··· 295 249 position: absolute; 296 250 left: 0; 297 251 right: 0; 298 - bottom: 34px; 299 - height: 100px; 252 + bottom: 0; 253 + height: 36px; 300 254 margin: 0; 301 - border-width: 1px 0; 255 + border-width: 1px 0 0 0; 302 256 border-style: solid; 303 257 border-top-color: {$thinblueborder}; 304 - border-bottom-color: {$thinblueborder}; 305 - padding: 8px 12px; 258 + padding: 8px; 306 259 width: 100%; 307 260 resize: none; 308 261 } 309 262 310 263 .conpherence-durable-column-textarea:focus { 311 264 outline: 0; 312 - border-top-color: {$sky}; 313 - border-bottom-color: {$sky}; 265 + border-top-color: {$lightblueborder}; 314 266 box-shadow: none; 315 267 } 316 268 317 269 .conpherence-durable-column-footer { 318 - position: absolute; 319 - height: 26px; 320 - padding: 4px 8px 4px 12px; 321 - left: 0; 322 - right: 0; 323 - bottom: 0; 324 - background-color: {$lightgreybackground}; 325 - } 326 - 327 - .conpherence-durable-column-footer button { 328 - float: right; 329 - } 330 - 331 - .conpherence-durable-column-status { 332 - vertical-align: middle; 333 - line-height: 24px; 334 - font-size: {$smallerfontsize}; 335 - color: {$lightbluetext}; 270 + display: none; 336 271 }

-8

webroot/rsrc/css/phui/workboards/phui-workboard.css

··· 22 22 background-color: #fff; 23 23 } 24 24 25 - .device-desktop.with-durable-column .phui-workboard-view-shadow { 26 - right: 300px; 27 - } 28 - 29 - .device-desktop.with-durable-margin .phui-workboard-view-shadow { 30 - right: 312px; 31 - } 32 - 33 25 .phui-workboard-view-shadow::-webkit-scrollbar { 34 26 height: 8px; 35 27 width: 8px;

+1 -28

webroot/rsrc/js/application/conpherence/behavior-durable-column.js

··· 31 31 32 32 var margin = JX.Scrollbar.getScrollbarControlMargin(); 33 33 34 - var columnWidth = (300 + margin); 35 - // This is the smallest window size where we'll enable the column. 36 - var minimumViewportWidth = (920 - margin); 37 - 38 34 var quick = JX.$('phabricator-standard-page-body'); 39 35 40 36 function _getColumnNode() { ··· 46 42 return JX.DOM.find(column, 'div', 'conpherence-durable-column-main'); 47 43 } 48 44 49 - function _isViewportWideEnoughForColumn() { 50 - var viewport = JX.Vector.getViewport(); 51 - if (viewport.x < minimumViewportWidth) { 52 - return false; 53 - } else { 54 - return true; 55 - } 56 - } 57 - 58 45 function _updateColumnVisibility() { 59 - var new_value = (userVisible && _isViewportWideEnoughForColumn()); 46 + var new_value = (userVisible); 60 47 if (new_value !== show) { 61 48 show = new_value; 62 49 _drawColumn(show); ··· 77 64 document.body, 78 65 'with-durable-column', 79 66 visible); 80 - JX.DOM.alterClass( 81 - document.body, 82 - 'with-durable-margin', 83 - visible && !!margin); 84 67 85 68 var column = _getColumnNode(); 86 69 if (visible) { ··· 90 73 JX.DOM.hide(column); 91 74 } 92 75 JX.Quicksand.setFrame(visible ? quick : null); 93 - 94 - // When we activate the column, adjust the tablet breakpoint so that we 95 - // convert the left side of the screen to tablet mode on narrow displays. 96 - var breakpoint; 97 - if (visible) { 98 - breakpoint = minimumViewportWidth + columnWidth; 99 - } else { 100 - breakpoint = minimumViewportWidth; 101 - } 102 - JX.Device.setTabletBreakpoint(breakpoint); 103 76 104 77 JX.Stratcom.invoke('resize'); 105 78 }

Configure Feed

Configure Feed