@recaptime-dev's working patches + fork for Phorge, a community fork of Phabricator. (Upstream dev and stable branches are at upstream/main and upstream/stable respectively.)
hq.recaptime.dev/wiki/Phorge
phorge
phabricator
Make all CSS rules for draggable cards/items independent of container classes
Summary:
Ref T5240. With the new approach, the draggable clones lose their containers, so they don't get affected by rules like `.container .item`.
Put classes on the cards/items and use `.board-item.item` and `.standard-item.item` to apply rules instead.
This didn't turn out //too// gross, and seems relatively OK / not obviously broken.
Test Plan:
- Dragged cards on a workboard.
- Dragged items in normal lists (tasks, pinned apps).
Reviewers: chad
Reviewed By: chad
Maniphest Tasks: T5240
Differential Revision: https://secure.phabricator.com/D15161
+54
-35
+5
-5
resources/celerity/map.php
+5
-5
resources/celerity/map.php
···
7
7
*/
8
8
return array(
9
9
'names' => array(
10
-
'core.pkg.css' => 'cd66e467',
10
+
'core.pkg.css' => 'a01828d4',
11
11
'core.pkg.js' => 'c5178ede',
12
12
'darkconsole.pkg.js' => 'e7393ebb',
13
13
'differential.pkg.css' => '2de124c9',
···
142
142
'rsrc/css/phui/phui-info-view.css' => '6d7c3509',
143
143
'rsrc/css/phui/phui-list.css' => '9da2aa00',
144
144
'rsrc/css/phui/phui-object-box.css' => '407eaf5a',
145
-
'rsrc/css/phui/phui-object-item-list-view.css' => '699de05e',
145
+
'rsrc/css/phui/phui-object-item-list-view.css' => '56aab18d',
146
146
'rsrc/css/phui/phui-pager.css' => 'bea33d23',
147
147
'rsrc/css/phui/phui-pinboard-view.css' => '2495140e',
148
148
'rsrc/css/phui/phui-profile-menu.css' => 'ab4fcf5f',
···
154
154
'rsrc/css/phui/phui-timeline-view.css' => '2efceff8',
155
155
'rsrc/css/phui/phui-two-column-view.css' => 'c75bfc5b',
156
156
'rsrc/css/phui/workboards/phui-workboard.css' => 'b07a5524',
157
-
'rsrc/css/phui/workboards/phui-workcard.css' => 'ddb93318',
157
+
'rsrc/css/phui/workboards/phui-workcard.css' => '92178913',
158
158
'rsrc/css/phui/workboards/phui-workpanel.css' => 'b90970eb',
159
159
'rsrc/css/sprite-login.css' => '60e8560e',
160
160
'rsrc/css/sprite-menu.css' => '9dd65b92',
···
818
818
'phui-inline-comment-view-css' => '0fdb3667',
819
819
'phui-list-view-css' => '9da2aa00',
820
820
'phui-object-box-css' => '407eaf5a',
821
-
'phui-object-item-list-view-css' => '699de05e',
821
+
'phui-object-item-list-view-css' => '56aab18d',
822
822
'phui-pager-css' => 'bea33d23',
823
823
'phui-pinboard-view-css' => '2495140e',
824
824
'phui-profile-menu-css' => 'ab4fcf5f',
···
831
831
'phui-timeline-view-css' => '2efceff8',
832
832
'phui-two-column-view-css' => 'c75bfc5b',
833
833
'phui-workboard-view-css' => 'b07a5524',
834
-
'phui-workcard-view-css' => 'ddb93318',
834
+
'phui-workcard-view-css' => '92178913',
835
835
'phui-workpanel-view-css' => 'b90970eb',
836
836
'phuix-action-list-view' => 'b5c256b8',
837
837
'phuix-action-view' => '8cf6d262',
+1
src/applications/project/controller/PhabricatorProjectBoardViewController.php
+1
src/applications/project/controller/PhabricatorProjectBoardViewController.php
+11
src/view/phui/PHUIObjectItemListView.php
+11
src/view/phui/PHUIObjectItemListView.php
···
9
9
private $flush;
10
10
private $allowEmptyList;
11
11
private $states;
12
+
private $itemClass = 'phui-object-item-standard';
12
13
13
14
public function setAllowEmptyList($allow_empty_list) {
14
15
$this->allowEmptyList = $allow_empty_list;
···
46
47
47
48
public function setStates($states) {
48
49
$this->states = $states;
50
+
return $this;
51
+
}
52
+
53
+
public function setItemClass($item_class) {
54
+
$this->itemClass = $item_class;
49
55
return $this;
50
56
}
51
57
···
89
95
$item->setUser($viewer);
90
96
}
91
97
}
98
+
99
+
foreach ($this->items as $item) {
100
+
$item->addClass($this->itemClass);
101
+
}
102
+
92
103
$items = $this->items;
93
104
} else if ($this->allowEmptyList) {
94
105
$items = null;
+8
-1
webroot/rsrc/css/phui/phui-object-item-list-view.css
+8
-1
webroot/rsrc/css/phui/phui-object-item-list-view.css
···
374
374
attributes.
375
375
*/
376
376
377
-
.phui-workboard-view .phui-object-item {
377
+
.phui-workcard.phui-object-item {
378
378
border-left-width: 4px;
379
+
box-sizing: border-box;
379
380
}
380
381
381
382
.phui-object-item {
···
680
681
.phui-object-box .phui-object-item-list-view .phui-object-item-frame {
681
682
border: none;
682
683
border-bottom: 1px solid {$thinblueborder};
684
+
}
685
+
686
+
.drag-clone.phui-object-item-standard .phui-object-item-frame {
687
+
border: none;
688
+
opacity: 0.8;
689
+
background: {$sh-bluebackground};
683
690
}
684
691
685
692
.phui-object-box .phui-object-item-list-header {
+29
-29
webroot/rsrc/css/phui/workboards/phui-workcard.css
+29
-29
webroot/rsrc/css/phui/workboards/phui-workcard.css
···
2
2
* @provides phui-workcard-view-css
3
3
*/
4
4
5
-
.phui-workpanel-view .phui-object-item {
5
+
.phui-workcard.phui-object-item {
6
6
background-color: #fff;
7
7
border-radius: 3px;
8
8
margin-bottom: 8px;
9
9
}
10
10
11
-
.phui-workpanel-view .phui-object-item-name {
11
+
.phui-workcard .phui-object-item-name {
12
12
padding-bottom: 4px;
13
13
}
14
14
15
-
.phui-workpanel-view .phui-object-item-content {
15
+
.phui-workcard .phui-object-item-content {
16
16
margin-top: 0;
17
17
}
18
18
19
-
.phui-workpanel-view .phui-object-item-frame {
19
+
.phui-workcard .phui-object-item-frame {
20
20
border-top-right-radius: 3px;
21
21
border-bottom-right-radius: 3px;
22
22
border-color: {$thinblueborder};
23
23
border-bottom-color: {$lightblueborder};
24
24
}
25
25
26
-
.phui-workpanel-view .phui-object-item .phui-object-item-objname {
26
+
.phui-workcard.phui-object-item .phui-object-item-objname {
27
27
-webkit-touch-callout: text;
28
28
-webkit-user-select: text;
29
29
-khtml-user-select: text;
···
32
32
user-select: text;
33
33
}
34
34
35
-
.phui-workpanel-view .phui-object-item-link {
35
+
.phui-workcard .phui-object-item-link {
36
36
white-space: normal;
37
37
font-weight: normal;
38
38
color: #000;
39
39
margin-left: 2px;
40
40
}
41
41
42
-
.device-desktop .phui-workpanel-view .phui-object-item-with-1-actions
42
+
.device-desktop .phui-workcard .phui-object-item-with-1-actions
43
43
.phui-object-item-content-box {
44
-
margin-right: 0;
45
-
overflow: hidden;
44
+
margin-right: 0;
45
+
overflow: hidden;
46
46
}
47
47
48
-
.phui-workpanel-view .phui-object-item-objname {
48
+
.phui-workcard .phui-object-item-objname {
49
49
vertical-align: top;
50
50
}
51
51
52
-
.phui-workpanel-view .phui-object-item-grippable .phui-object-item-frame {
52
+
.phui-workcard.phui-object-item-grippable .phui-object-item-frame {
53
53
padding-left: 0;
54
54
}
55
55
56
-
.phui-workpanel-view .phui-object-item-grip {
56
+
.phui-workcard .phui-object-item-grip {
57
57
display: none;
58
58
}
59
59
60
-
.device-desktop .phui-workpanel-view .phui-list-item-icon {
60
+
.device-desktop .phui-workcard .phui-list-item-icon {
61
61
display: none;
62
62
}
63
63
64
-
.phui-workpanel-view .phui-object-item .phui-list-item-href {
64
+
.phui-workcard.phui-object-item .phui-list-item-href {
65
65
height: 24px;
66
66
width: 24px;
67
67
}
68
68
69
-
.device-desktop .phui-workpanel-view .phui-object-item:hover
69
+
.device-desktop .phui-workcard.phui-object-item:hover
70
70
.phui-list-item-href {
71
71
background: #fff;
72
72
opacity: .7;
73
73
}
74
74
75
-
.device-desktop .phui-workpanel-view .phui-object-item
75
+
.device-desktop .phui-workcard.phui-object-item
76
76
.phui-list-item-href:hover {
77
77
background: {$sh-bluebackground};
78
78
opacity: 1;
79
79
}
80
80
81
-
.phui-workpanel-view .phui-object-item:hover .phui-list-item-icon {
81
+
.phui-workcard.phui-object-item:hover .phui-list-item-icon {
82
82
display: block;
83
83
}
84
84
85
-
.phui-workpanel-view .phui-object-item-attributes {
85
+
.phui-workcard .phui-object-item-attributes {
86
86
margin-right: 12px;
87
87
}
88
88
···
90
90
91
91
/* - Draggable Colors --------------------------------------------------------*/
92
92
93
-
.phui-workpanel-view .phui-object-item.drag-dragging {
93
+
.phui-workcard.phui-object-item.drag-clone {
94
94
box-shadow: {$dropshadow};
95
95
background-color: {$sh-greybackground};
96
96
}
97
97
98
-
.phui-workpanel-view .phui-object-item.drag-dragging .phui-list-item-href {
98
+
.phui-workcard.phui-object-item.drag-clone .phui-list-item-href {
99
99
display: none;
100
100
}
101
101
102
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-red {
102
+
.phui-workcard.drag-clone.phui-object-item-bar-color-red {
103
103
background-color: {$sh-redbackground};
104
104
}
105
105
106
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-orange {
106
+
.phui-workcard.drag-clone.phui-object-item-bar-color-orange {
107
107
background-color: {$sh-orangebackground};
108
108
}
109
109
110
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-yellow {
110
+
.phui-workcard.drag-clone.phui-object-item-bar-color-yellow {
111
111
background-color: {$sh-yellowbackground};
112
112
}
113
113
114
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-green {
114
+
.phui-workcard.drag-clone.phui-object-item-bar-color-green {
115
115
background-color: {$sh-greenbackground};
116
116
}
117
117
118
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-blue {
118
+
.phui-workcard.drag-clone.phui-object-item-bar-color-blue {
119
119
background-color: {$sh-bluebackground};
120
120
}
121
121
122
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-indigo {
122
+
.phui-workcard.drag-clone.phui-object-item-bar-color-indigo {
123
123
background-color: {$sh-indigobackground};
124
124
}
125
125
126
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-violet {
126
+
.phui-workcard.drag-clone.phui-object-item-bar-color-violet {
127
127
background-color: {$sh-violetbackground};
128
128
}
129
129
130
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-pink {
130
+
.phui-workcard.drag-clone.phui-object-item-bar-color-pink {
131
131
background-color: {$sh-pinkbackground};
132
132
}
133
133
134
-
.phui-workpanel-view .drag-dragging.phui-object-item-bar-color-sky {
134
+
.phui-workcard.drag-clone.phui-object-item-bar-color-sky {
135
135
background-color: {$sh-bluebackground};
136
136
}