1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-11-15 19:32:40 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-header-view.css

399 lines
7.5 KiB
CSS
Raw Normal View History

/**
* @provides phui-header-view-css
*/
.phui-header-shell {
border-bottom: 1px solid {$thinblueborder};
overflow: hidden;
padding: 0 4px 12px;
}
.phui-header-view {
display: table;
width: 100%
}
.phui-header-row {
display: table-row;
}
.phui-header-col1 {
display: table-cell;
vertical-align: middle;
width: 62px;
}
.phui-header-col2 {
display: table-cell;
vertical-align: middle;
word-break: break-word;
}
.phui-header-col3 {
display: table-cell;
vertical-align: middle;
}
body .phui-header-shell.phui-header-no-background {
background-color: transparent;
border: none;
}
body .phui-header-shell.phui-bleed-header {
background-color: #fff;
border-bottom: 1px solid {$thinblueborder};
width: auto;
margin: 16px;
}
body .phui-header-shell.phui-bleed-header
.phui-header-view {
padding: 8px 24px 8px 0;
color: {$darkbluetext};
}
.phui-header-shell + .phabricator-form-view {
border-top-width: 0;
}
.phui-property-list-view + .diviner-document-section {
margin-top: -1px;
}
.phui-header-view {
position: relative;
font-size: {$normalfontsize};
}
.phui-header-header {
font-size: 16px;
line-height: 24px;
color: {$darkbluetext};
}
.phui-header-header .phui-header-icon {
margin-right: 8px;
color: {$lightbluetext};
/* This allows the header text to be triple-clicked to select it in Firefox,
see T10905 for discussion. */
display: inline;
}
.phui-object-box .phui-header-tall .phui-header-header,
.phui-document-view .phui-header-tall .phui-header-header {
font-size: 18px;
}
.phui-header-view .phui-header-header a {
color: {$darkbluetext};
}
.phui-box-blue-property .phui-header-view .phui-header-header a {
color: {$bluetext};
}
.device-desktop .phui-header-view .phui-header-header a:hover {
text-decoration: none;
color: {$blue};
}
.phui-header-view .phui-header-action-links {
float: right;
}
.phui-object-box .phui-header-view .phui-header-action-links {
margin-right: 4px;
font-size: {$normalfontsize};
}
.phui-header-action-link {
margin-bottom: 4px;
margin-top: 4px;
float: right;
}
.device-phone .phui-header-action-link .phui-button-text {
visibility: hidden;
width: 0;
margin-left: 8px;
}
.device-phone .phui-header-action-link.button .phui-icon-view {
width: 12px;
text-align: center;
}
.phui-header-divider {
margin: 0 4px;
font-weight: normal;
color: {$lightbluetext};
}
.phui-header-tags {
margin-left: 12px;
font-size: {$normalfontsize};
}
.phui-header-tags .phui-tag-view {
margin-left: 4px;
}
.phui-header-image {
display: inline-block;
background-repeat: no-repeat;
background-size: 100%;
width: 50px;
height: 50px;
border-radius: 3px;
}
.phui-header-image-href {
position: relative;
display: block;
}
.phui-header-image-edit {
display: none;
}
.device-desktop .phui-header-image-href:hover .phui-header-image-edit {
display: block;
position: absolute;
left: 0;
background: rgba({$alphablack},0.4);
color: #fff;
font-weight: normal;
bottom: 4px;
padding: 4px 8px;
font-size: 12px;
}
.device-desktop .phui-header-image-edit:hover {
text-decoration: underline;
}
.phui-header-subheader {
font-weight: normal;
font-size: {$biggerfontsize};
margin-top: 8px;
}
.phui-header-subheader .phui-icon-view {
margin-right: 4px;
}
.phui-header-subheader .phui-tag-view span.phui-icon-view,
.phui-header-subheader .policy-header-callout span.phui-icon-view {
display: inline-block;
margin: -2px 4px -2px 0;
font-size: 15px;
}
.phui-header-subheader,
.phui-header-subheader .policy-link {
color: {$darkbluetext};
}
.policy-header-callout,
.phui-header-subheader .phui-tag-core {
padding: 3px 9px;
border-radius: 3px;
background: rgba({$alphablue}, 0.1);
margin-right: 8px;
-webkit-font-smoothing: auto;
border-color: transparent;
}
.phui-header-subheader .phui-tag-view,
.phui-header-subheader .phui-tag-type-shade .phui-tag-core {
border: none;
font-weight: normal;
-webkit-font-smoothing: auto;
}
.policy-header-callout.policy-adjusted-weaker {
background: {$sh-greenbackground};
}
.policy-header-callout.policy-adjusted-weaker .policy-link,
.policy-header-callout.policy-adjusted-weaker .phui-icon-view {
color: {$sh-greentext};
}
.policy-header-callout.policy-adjusted-stronger {
background: {$sh-redbackground};
}
.policy-header-callout.policy-adjusted-stronger .policy-link,
.policy-header-callout.policy-adjusted-stronger .phui-icon-view {
color: {$sh-redtext};
}
.policy-header-callout.policy-adjusted-different {
background: {$sh-orangebackground};
}
.policy-header-callout.policy-adjusted-different .policy-link,
.policy-header-callout.policy-adjusted-different .phui-icon-view {
color: {$sh-orangetext};
}
Require several advanced postgraduate degrees to understand object policies Summary: Fixes T11836. See some prior discussion in T8376#120613. The policy hint in headers in the UI is not exhaustive, and can not reasonably be exhaustive. For example, on a revision, it may say "All Users", but really mean "All users who can see the space this object is in and the repository it belongs to, plus the revision author and reviewers". These rules are explained if you click (and, often, in the documentation), but "All Users" is still at least somewhat misleading. I don't think there's any perfect solution here that balances the needs of both new and experienced users perfectly, but this change tries to do a bit better about avoiding cases where we say something very open (like "All Users") when the real policy is not very open. Specifically, I've made these changes to the header: - Spaces are now listed in the tag, so it will say `(S3 > All Users)` instead of `(All Users)`. They're already listed in the header, this just makes it more explicit that Spaces are a policy container and part of the view policy. - Extended policy objects are now listed in the tag, so it will say `(S3 > rARC > All Users)` for a revision in the Arcanist repository which is also in Space 3. - Objects can now provide a "Policy Codex", which is an object that represents a rulebook of more sophisticated policy descriptions. This codex can replace the tag with something else. - Imported calendar events now say "Uses Import Policy" instead of, e.g., "All Users". I've made these changes to the policy dialog: - Split it into more visually separate sections. - Added an explicit section for extended policies ("You must also have access to these other objects: ..."). - Broken the object policy rules into a "Special Rules" section (for rules like "you can only see a revision if you can see the repository it is part of") and an "Object Policy" section (for the actual object policy). - Tried to make it a little more readable? - The new policy dialogs are great to curl up with in front of a fire with a nice cup of cocoa. I've made these changes to infrastructure: - Implementing `PhabricatorPolicyInterface` no longer requires you to implement `describeAutomaticCapability()`. - Instead, implement `PhabricatorPolicyCodexInterface` and return a `PhabricatorPolicyCodex` object. - This "codex" is a policy rulebook which can set all the policy icons, labels, colors, rules, etc., to properly explain complex policies. - Broadly, the old method was usually either not useful (most objects have no special rules) or not powerful enough (objects with special rules often need to do more in order to explain them). Test Plan: {F1912860} {F1912861} {F1912862} {F1912863} Reviewers: chad Reviewed By: chad Subscribers: avivey Maniphest Tasks: T11836 Differential Revision: https://secure.phabricator.com/D16830
2016-11-09 19:02:25 +01:00
.policy-header-callout.policy-adjusted-special {
background: {$sh-indigobackground};
}
.policy-header-callout.policy-adjusted-special .policy-link,
.policy-header-callout.policy-adjusted-special .phui-icon-view {
color: {$sh-indigotext};
}
Allow task statuses to specify that either "comments" or "edits" are "locked" Summary: Ref T13249. See PHI1059. This allows "locked" in `maniphest.statuses` to specify that either "comments" are locked (current behavior, advisory, overridable by users with edit permission, e.g. for calming discussion on a contentious issue or putting a guard rail on things); or "edits" are locked (hard lock, only task owner can edit things). Roughly, "comments" is a soft/advisory lock. "edits" is a hard/strict lock. (I think both types of locks have reasonable use cases, which is why I'm not just making locks stronger across the board.) When "edits" are locked: - The edit policy looks like "no one" to normal callers. - In one special case, we sneak the real value through a back channel using PolicyCodex in the specific narrow case that you're editing the object. Otherwise, the policy selector control incorrectly switches to "No One". - We also have to do a little more validation around applying a mixture of status + owner transactions that could leave the task uneditable. For now, I'm allowing you to reassign a hard-locked task to someone else. If you get this wrong, we can end up in a state where no one can edit the task. If this is an issue, we could respond in various ways: prevent these edits; prevent assigning to disabled users; provide a `bin/task reassign`; uh maybe have a quorum convene? Test Plan: - Defined "Soft Locked" and "Hard Locked" statues. - "Hard Locked" a task, hit errors (trying to unassign myself, trying to hard lock an unassigned task). - Saw nice new policy guidance icon in header. {F6210362} Reviewers: amckinley Reviewed By: amckinley Maniphest Tasks: T13249 Differential Revision: https://secure.phabricator.com/D20165
2019-02-08 15:07:24 +01:00
.policy-header-callout.policy-adjusted-locked {
background: {$sh-pinkbackground};
}
.policy-header-callout.policy-adjusted-locked .policy-link,
.policy-header-callout.policy-adjusted-locked .phui-icon-view {
color: {$sh-pinktext};
}
Require several advanced postgraduate degrees to understand object policies Summary: Fixes T11836. See some prior discussion in T8376#120613. The policy hint in headers in the UI is not exhaustive, and can not reasonably be exhaustive. For example, on a revision, it may say "All Users", but really mean "All users who can see the space this object is in and the repository it belongs to, plus the revision author and reviewers". These rules are explained if you click (and, often, in the documentation), but "All Users" is still at least somewhat misleading. I don't think there's any perfect solution here that balances the needs of both new and experienced users perfectly, but this change tries to do a bit better about avoiding cases where we say something very open (like "All Users") when the real policy is not very open. Specifically, I've made these changes to the header: - Spaces are now listed in the tag, so it will say `(S3 > All Users)` instead of `(All Users)`. They're already listed in the header, this just makes it more explicit that Spaces are a policy container and part of the view policy. - Extended policy objects are now listed in the tag, so it will say `(S3 > rARC > All Users)` for a revision in the Arcanist repository which is also in Space 3. - Objects can now provide a "Policy Codex", which is an object that represents a rulebook of more sophisticated policy descriptions. This codex can replace the tag with something else. - Imported calendar events now say "Uses Import Policy" instead of, e.g., "All Users". I've made these changes to the policy dialog: - Split it into more visually separate sections. - Added an explicit section for extended policies ("You must also have access to these other objects: ..."). - Broken the object policy rules into a "Special Rules" section (for rules like "you can only see a revision if you can see the repository it is part of") and an "Object Policy" section (for the actual object policy). - Tried to make it a little more readable? - The new policy dialogs are great to curl up with in front of a fire with a nice cup of cocoa. I've made these changes to infrastructure: - Implementing `PhabricatorPolicyInterface` no longer requires you to implement `describeAutomaticCapability()`. - Instead, implement `PhabricatorPolicyCodexInterface` and return a `PhabricatorPolicyCodex` object. - This "codex" is a policy rulebook which can set all the policy icons, labels, colors, rules, etc., to properly explain complex policies. - Broadly, the old method was usually either not useful (most objects have no special rules) or not powerful enough (objects with special rules often need to do more in order to explain them). Test Plan: {F1912860} {F1912861} {F1912862} {F1912863} Reviewers: chad Reviewed By: chad Subscribers: avivey Maniphest Tasks: T11836 Differential Revision: https://secure.phabricator.com/D16830
2016-11-09 19:02:25 +01:00
.policy-header-callout .policy-space-container {
font-weight: bold;
color: {$sh-redtext};
}
.policy-header-callout .policy-tier-separator {
padding: 0 0 0 4px;
color: {$lightgreytext};
}
.phui-header-action-links .phui-mobile-menu {
display: none;
}
.device .phui-header-action-links .phui-mobile-menu {
display: inline-block;
}
.phui-header-action-list {
float: right;
}
.phui-header-action-list li {
margin: 0 0 0 8px;
float: right;
}
.phui-header-action-list .phui-header-action-item .phui-icon-view {
height: 18px;
width: 16px;
font-size: 16px;
line-height: 20px;
display: block;
}
.spaces-name {
color: {$lightbluetext};
}
.phui-object-box .phui-header-tall .spaces-name {
font-size: 18px;
}
.spaces-name .phui-handle,
.spaces-name a.phui-handle,
.phui-profile-header.phui-header-shell .spaces-name .phui-handle {
color: {$sh-redtext};
}
.device-desktop .spaces-name a.phui-handle:hover {
color: {$sh-redtext};
text-decoration: underline;
}
/*** Profile Header ***********************************************************/
.phui-profile-header {
padding: 24px 20px 20px 24px;
}
.device-phone .phui-profile-header {
padding: 12px;
}
.phui-profile-header.phui-header-shell {
margin: 0;
border: none;
}
.phui-profile-header .phui-header-image {
height: 80px;
width: 80px;
}
.phui-profile-header .phui-header-col1 {
width: 96px;
}
.phui-profile-header .phui-header-subheader {
margin-top: 12px;
}
.phui-profile-header.phui-header-shell .phui-header-header {
font-size: 24px;
color: {$blacktext};
}
.phui-profile-header.phui-header-shell .phui-header-header a {
color: {$blacktext};
}
.phui-header-view .phui-tag-indigo a {
color: {$sh-indigotext};
}
Require several advanced postgraduate degrees to understand object policies Summary: Fixes T11836. See some prior discussion in T8376#120613. The policy hint in headers in the UI is not exhaustive, and can not reasonably be exhaustive. For example, on a revision, it may say "All Users", but really mean "All users who can see the space this object is in and the repository it belongs to, plus the revision author and reviewers". These rules are explained if you click (and, often, in the documentation), but "All Users" is still at least somewhat misleading. I don't think there's any perfect solution here that balances the needs of both new and experienced users perfectly, but this change tries to do a bit better about avoiding cases where we say something very open (like "All Users") when the real policy is not very open. Specifically, I've made these changes to the header: - Spaces are now listed in the tag, so it will say `(S3 > All Users)` instead of `(All Users)`. They're already listed in the header, this just makes it more explicit that Spaces are a policy container and part of the view policy. - Extended policy objects are now listed in the tag, so it will say `(S3 > rARC > All Users)` for a revision in the Arcanist repository which is also in Space 3. - Objects can now provide a "Policy Codex", which is an object that represents a rulebook of more sophisticated policy descriptions. This codex can replace the tag with something else. - Imported calendar events now say "Uses Import Policy" instead of, e.g., "All Users". I've made these changes to the policy dialog: - Split it into more visually separate sections. - Added an explicit section for extended policies ("You must also have access to these other objects: ..."). - Broken the object policy rules into a "Special Rules" section (for rules like "you can only see a revision if you can see the repository it is part of") and an "Object Policy" section (for the actual object policy). - Tried to make it a little more readable? - The new policy dialogs are great to curl up with in front of a fire with a nice cup of cocoa. I've made these changes to infrastructure: - Implementing `PhabricatorPolicyInterface` no longer requires you to implement `describeAutomaticCapability()`. - Instead, implement `PhabricatorPolicyCodexInterface` and return a `PhabricatorPolicyCodex` object. - This "codex" is a policy rulebook which can set all the policy icons, labels, colors, rules, etc., to properly explain complex policies. - Broadly, the old method was usually either not useful (most objects have no special rules) or not powerful enough (objects with special rules often need to do more in order to explain them). Test Plan: {F1912860} {F1912861} {F1912862} {F1912863} Reviewers: chad Reviewed By: chad Subscribers: avivey Maniphest Tasks: T11836 Differential Revision: https://secure.phabricator.com/D16830
2016-11-09 19:02:25 +01:00
.phui-policy-section-view {
margin-bottom: 24px;
}
.phui-policy-section-view-header {
background: {$bluebackground};
border-bottom: 1px solid {$lightblueborder};
padding: 4px 8px;
color: {$darkbluetext};
margin-bottom: 8px;
}
.phui-policy-section-view-header-text {
font-weight: bold;
}
.phui-policy-section-view-header .phui-icon-view {
margin-right: 8px;
}
.phui-policy-section-view-link {
float: right;
}
.phui-policy-section-view-link .phui-icon-view {
color: {$bluetext};
}
.phui-policy-section-view-hint {
color: {$greytext};
background: {$lightbluebackground};
padding: 8px;
}
.phui-policy-section-view-body {
padding: 0 12px;
}
.phui-policy-section-view-inactive-rule {
color: {$greytext};
}