1
0
Fork 0
mirror of https://we.phorge.it/source/phorge.git synced 2024-12-05 21:26:14 +01:00
phorge-phorge/webroot/rsrc/css/phui/phui-form-view.css

530 lines
10 KiB
CSS
Raw Normal View History

2011-01-25 20:31:40 +01:00
/**
* @provides phui-form-view-css
2011-01-25 20:31:40 +01:00
*/
.phui-form-view {
padding: 16px;
}
.device-phone .phui-object-box .phui-form-view {
padding: 0;
}
.phui-form-view.phui-form-full-width {
padding: 0;
}
/* only used in transaction comments */
.phui-form-shaded .phui-form-view {
border-bottom: 1px solid #D4DAE0;
background: #F4F5F8;
2011-01-25 20:31:40 +01:00
}
.phui-form-view label.aphront-form-label {
padding-top: 5px;
2011-01-25 22:26:09 +01:00
width: 19%;
2011-01-25 20:31:40 +01:00
float: left;
text-align: right;
font-weight: bold;
font-size: {$normalfontsize};
color: {$bluetext};
-webkit-font-smoothing: antialiased;
2011-01-25 20:31:40 +01:00
}
.device-phone .phui-form-view label.aphront-form-label,
.phui-form-full-width.phui-form-view label.aphront-form-label {
display: block;
float: none;
text-align: left;
width: 100%;
margin-bottom: 3px;
}
2011-01-25 20:31:40 +01:00
.aphront-form-input {
2011-01-25 22:26:09 +01:00
margin-left: 20%;
margin-right: 20%;
width: 60%;
2011-01-25 20:31:40 +01:00
}
.device-phone .aphront-form-input,
.device .aphront-form-input select,
.device .aphront-form-input pre,
.phui-form-full-width .aphront-form-input {
margin-left: 0%;
margin-right: 0%;
width: 100%;
}
.aphront-form-input *::-webkit-input-placeholder {
color:{$greytext} !important;
}
.aphront-form-input *::-moz-placeholder {
color:{$greytext} !important;
opacity: 1; /* Firefox nudges the opacity to 0.4 */
}
.aphront-form-input *:-ms-input-placeholder {
color:{$greytext} !important;
}
2011-01-25 20:31:40 +01:00
.aphront-form-error {
width: 18%;
2011-01-25 20:31:40 +01:00
float: right;
color: {$red};
2011-01-25 20:31:40 +01:00
font-weight: bold;
padding-top: 5px;
2011-01-25 20:31:40 +01:00
}
.aphront-form-label .aphront-form-error {
display: none;
}
.aphront-dialog-body .phui-form-view {
padding: 0;
}
.device-phone .aphront-form-error,
.phui-form-full-width .aphront-form-error {
display: none;
}
.device-phone .aphront-form-label .aphront-form-error,
.phui-form-full-width .aphront-form-label .aphront-form-error {
display: block;
float: right;
padding: 0;
width: auto;
}
.device-phone .aphront-form-drag-and-drop-upload {
display: none;
}
.aphront-form-required {
font-weight: normal;
color: {$lightgreytext};
font-size: {$smallestfontsize};
-webkit-font-smoothing: antialiased;
}
.aphront-form-input input {
2011-01-25 20:31:40 +01:00
width: 100%;
}
.aphront-form-cvc-input input {
width: 64px;
}
2011-01-25 20:31:40 +01:00
.aphront-form-input textarea {
display: block;
width: 100%;
box-sizing: border-box;
2011-01-25 20:31:40 +01:00
height: 12em;
}
.aphront-form-control {
padding: 4px;
}
.phui-form-full-width .aphront-form-control {
padding: 4px 0;
}
2011-01-25 20:31:40 +01:00
.aphront-form-control-submit button,
.aphront-form-control-submit a.button {
float: right;
margin: 4px 0 0 8px;
2011-01-26 00:19:06 +01:00
}
.phui-form-control-multi-submit input,
.phui-form-control-multi-submit button,
.phui-form-control-multi-submit a {
Add a basic multipage form Summary: Ref T2232. Very busy day on IRC so I feel like I've made 20 minutes of progress in 1-minute spurts here, but this adds the basics for a form that can have multiple pages and automatically handle pagination and reading to/from the request, objects and responses. The UIExample is reasonably instructive. Basically, you make a form, add pages to the form, and add controls to the pages. The core flow control looks like this: if ($request->isFormPost()) { $form->readFromRequest($request); // (1) if ($form->isComplete()) { // (2) $response = $form->writeToResponse($response); // (3) // Process result here. // (4) } } else { $form->readFromObject($object); // (5) } The key parts are: # This reads the form state from the request, including reading all the inactive pages. # This tests if all pages are valid and the user just clicked "Done" on the last page. # This produces a "response", which might be writing to an object (for simpler forms) or creating a transaction record (for more complex forms). # Here, we would save the object or apply the transactions. # When the user views the form for the first time, we preload all the values from some object (which might just be empty). Ultimate goal here is to fix repository creation to not be a terrible pit of awfulness. There are probably a lot of rough edges and missing features still, but this seems to not be totally crazy. I'm using two submit buttons with different names which doesn't work on IE7 or something, but we can JS our way out of that if we need to. Test Plan: Paged forward and backward through the form. Reviewers: btrahan, chad Reviewed By: btrahan CC: aran Maniphest Tasks: T2232 Differential Revision: https://secure.phabricator.com/D6003
2013-05-23 23:39:01 +02:00
float: right;
margin: 4px 0 0 8px;
Add a basic multipage form Summary: Ref T2232. Very busy day on IRC so I feel like I've made 20 minutes of progress in 1-minute spurts here, but this adds the basics for a form that can have multiple pages and automatically handle pagination and reading to/from the request, objects and responses. The UIExample is reasonably instructive. Basically, you make a form, add pages to the form, and add controls to the pages. The core flow control looks like this: if ($request->isFormPost()) { $form->readFromRequest($request); // (1) if ($form->isComplete()) { // (2) $response = $form->writeToResponse($response); // (3) // Process result here. // (4) } } else { $form->readFromObject($object); // (5) } The key parts are: # This reads the form state from the request, including reading all the inactive pages. # This tests if all pages are valid and the user just clicked "Done" on the last page. # This produces a "response", which might be writing to an object (for simpler forms) or creating a transaction record (for more complex forms). # Here, we would save the object or apply the transactions. # When the user views the form for the first time, we preload all the values from some object (which might just be empty). Ultimate goal here is to fix repository creation to not be a terrible pit of awfulness. There are probably a lot of rough edges and missing features still, but this seems to not be totally crazy. I'm using two submit buttons with different names which doesn't work on IE7 or something, but we can JS our way out of that if we need to. Test Plan: Paged forward and backward through the form. Reviewers: btrahan, chad Reviewed By: btrahan CC: aran Maniphest Tasks: T2232 Differential Revision: https://secure.phabricator.com/D6003
2013-05-23 23:39:01 +02:00
width: auto;
}
2011-01-26 02:17:19 +01:00
.aphront-form-control-textarea textarea.aphront-textarea-very-short {
height: 44px;
2011-01-26 02:17:19 +01:00
}
.aphront-form-control-textarea textarea.aphront-textarea-very-tall {
height: 24em;
}
2011-01-26 00:19:06 +01:00
.aphront-form-control-select .aphront-form-input {
padding-top: 2px;
2011-01-25 20:31:40 +01:00
}
.phui-form-view .aphront-form-caption {
font-size: {$smallerfontsize};
color: {$bluetext};
padding: 8px 0;
margin-right: 20%;
2011-01-26 02:40:21 +01:00
margin-left: 20%;
-webkit-font-smoothing: antialiased;
line-height: 16px;
2011-01-25 20:31:40 +01:00
}
.device-phone .phui-form-view .aphront-form-caption,
.phui-form-full-width .phui-form-view .aphront-form-caption {
margin: 0;
}
2011-01-25 20:31:40 +01:00
.aphront-form-instructions {
width: 60%;
margin-left: 20%;
padding: 10px 4px;
}
.device .aphront-form-instructions,
.phui-form-full-width .aphront-form-instructions {
width: 100%;
margin: 0;
2011-01-25 20:31:40 +01:00
}
.aphront-form-important {
margin: .5em 0;
background: #ffffdd;
padding: .5em 1em;
}
.aphront-form-important code {
display: block;
padding: .25em;
margin: .5em 2em;
}
.aphront-form-control-static .aphront-form-input,
.aphront-form-control-markup .aphront-form-input {
padding-top: 6px;
font-size: {$normalfontsize};
2011-01-25 20:31:40 +01:00
}
2011-01-26 02:40:21 +01:00
.aphront-form-control-togglebuttons .aphront-form-input {
padding: 2px 0 0 0;
}
table.aphront-form-control-radio-layout,
2011-01-26 02:40:21 +01:00
table.aphront-form-control-checkbox-layout {
margin-top: 3px;
font-size: {$normalfontsize};
2011-01-26 02:40:21 +01:00
}
table.aphront-form-control-radio-layout th {
padding-top: 3px;
padding-left: 8px;
padding-bottom: 4px;
font-weight: bold;
color: {$darkgreytext};
2011-01-26 02:40:21 +01:00
}
table.aphront-form-control-checkbox-layout th {
padding-top: 2px;
padding-left: 8px;
padding-bottom: 4px;
color: {$darkgreytext};
}
.aphront-form-control-radio-layout td input,
2011-01-26 02:40:21 +01:00
.aphront-form-control-checkbox-layout td input {
margin-top: 4px;
2011-01-26 02:40:21 +01:00
width: auto;
}
2011-02-06 08:56:06 +01:00
.aphront-form-control-radio-layout label.disabled,
.aphront-form-control-checkbox-layout label.disabled {
color: {$greytext};
}
.aphront-form-radio-caption {
margin-top: 4px;
font-size: {$smallerfontsize};
font-weight: normal;
color: {$bluetext};
}
.aphront-form-control-image span {
margin: 0 4px 0 2px;
}
.aphront-form-control-image .default-image {
display: inline;
width: 12px;
}
2011-02-06 08:56:06 +01:00
.aphront-form-input hr {
border: none;
background: #bbbbbb;
height: 1px;
position: relative;
2011-03-24 19:07:36 +01:00
}
.phui-form-inset {
margin: 4px 0 8px;
padding: 8px;
background: #f7f9fd;
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$blueborder};
border-radius: 3px;
}
.phui-form-inset h1 {
color: {$bluetext};
padding-bottom: 8px;
margin-bottom: 8px;
font-size: {$biggerfontsize};
border-bottom: 1px solid {$thinblueborder};
2011-03-24 19:07:36 +01:00
}
.aphront-form-drag-and-drop-file-list {
width: 400px;
}
.drag-and-drop-instructions {
color: {$darkgreytext};
font-size: {$smallestfontsize};
padding: 6px 8px;
}
.drag-and-drop-file-target {
border: 1px dashed #bfbfbf;
padding-top: 12px;
padding-bottom: 12px;
}
.aphront-textarea-drag-and-drop {
background: {$lightgreen};
border-color: {$green};
}
.aphront-form-crop .crop-box {
cursor: move;
overflow: hidden;
}
.aphront-form-crop .crop-box .crop-image {
position: relative;
top: 0px;
left: 0px;
}
.calendar-button {
display: inline;
padding: 8px 4px;
margin: 2px 8px 2px 2px;
position: relative;
}
.aphront-form-date-container {
position: relative;
display: inline;
}
.aphront-form-date-container select {
margin: 2px;
display: inline;
}
.aphront-form-date-container input.aphront-form-date-enabled-input {
width: auto;
display: inline;
margin-right: 8px;
font-size: 16px;
}
.aphront-form-date-container .aphront-form-time-input-container,
.aphront-form-date-container .aphront-form-date-input-container {
position: relative;
display: inline-block;
width: 7em;
}
.aphront-form-date-container input.aphront-form-time-input,
.aphront-form-date-container input.aphront-form-date-input {
width: 7em;
}
.aphront-form-time-input-container div.jx-typeahead-results a.jx-result {
border: none;
}
.phui-time-typeahead-value {
padding: 4px;
}
.fancy-datepicker {
position: absolute;
width: 240px;
}
.fancy-datepicker-core {
padding: 1px;
font-size: {$smallerfontsize};
text-align: center;
}
.fancy-datepicker-core .month-table,
.fancy-datepicker-core .day-table {
margin: 0 auto;
border-collapse: separate;
border-spacing: 1px;
width: 100%;
}
.fancy-datepicker-core .month-table {
margin-bottom: 6px;
font-size: {$normalfontsize};
background-color: {$hoverblue};
border-radius: 2px;
}
.fancy-datepicker-core .month-table td.lrbutton {
width: 18%;
color: {$lightbluetext};
}
.fancy-datepicker-core .month-table td {
padding: 4px;
font-weight: bold;
color: {$bluetext};
}
.fancy-datepicker-core .month-table td.lrbutton:hover {
border-radius: 2px;
background: {$hoverselectedblue};
color: {$darkbluetext};
}
.fancy-datepicker-core .day-table td {
overflow: hidden;
vertical-align: center;
text-align: center;
border: 1px solid {$thinblueborder};
padding: 4px 0;
}
.fancy-datepicker .fancy-datepicker-core .day-table td.day:hover {
background-color: {$hoverblue};
border-color: {$lightblueborder};
}
.fancy-datepicker-core .day-table td.day-placeholder {
border-color: transparent;
background: transparent;
}
.fancy-datepicker-core .day-table td.weekend {
color: {$lightgreytext};
border-color: {$lightgreyborder};
background: {$lightgreybackground};
}
.fancy-datepicker-core .day-table td.day-name {
background: transparent;
border: 1px transparent;
vertical-align: bottom;
color: {$lightgreytext};
}
.fancy-datepicker-core .day-table td.today {
background: {$greybackground};
border-color: {$greyborder};
color: {$darkgreytext};
font-weight: bold;
}
.fancy-datepicker-core .day-table td.datepicker-selected {
background: {$lightgreen};
border-color: {$green};
color: {$green};
}
.fancy-datepicker-core td {
cursor: pointer;
}
.fancy-datepicker-core td.novalue {
cursor: inherit;
}
.picker-open .calendar-button .phui-icon-view {
color: {$sky};
}
.fancy-datepicker-core {
background-color: white;
border: 1px solid {$lightblueborder};
border-bottom: 1px solid {$blueborder};
box-shadow: {$dropshadow};
border-radius: 3px;
}
/* When the activation checkbox for the control is toggled off, visually
disable the individual controls. We don't actually use the "disabled" property
because we still want the values to submit. This is just a visual hint that
the controls won't be used. The controls themselves are still live, work
properly, and submit values. */
.datepicker-disabled select,
.datepicker-disabled .calendar-button,
.datepicker-disabled input[type="text"] {
opacity: 0.5;
}
.aphront-form-date-container.no-time .aphront-form-time-input{
display: none;
}
.login-to-comment {
margin: 12px;
}
.phui-form-divider hr {
height: 1px;
border: 0;
background: {$thinblueborder};
width: 85%;
margin: 15px auto;
}
Add password authentication and registration to new registration Summary: Ref T1536. Ref T1930. Code is not reachable. This provides password authentication and registration on the new provider/adapter framework. I sort of cheated a little bit and don't really route any password logic through the adapter (instead, this provider uses an empty adapter and just sets the type/domain on it). I think the right way to do this //conceptually// is to treat username/passwords as an external black box which the adapter communicates with. However, this creates a lot of practical implementation and UX problems: - There would basically be two steps -- in the first one, you interact with the "password black box", which behaves like an OAuth provider. This produces some ExternalAccount associated with the username/password pair, then we go into normal registration. - In normal registration, we'd proceed normally. This means: - The registration flow would be split into two parts, one where you select a username/password (interacting with the black box) and one where you actually register (interacting with the generic flow). This is unusual and probably confusing for users. - We would need to do a lot of re-hashing of passwords, since passwords currently depend on the username and user PHID, which won't exist yet during registration or the "black box" phase. This is a big mess I don't want to deal with. - We hit a weird condition where two users complete step 1 with the same username but don't complete step 2 yet. The box knows about two different copies of the username, with two different passwords. When we arrive at step 2 the second time we have a lot of bad choices about how to reoslve it, most of which create security problems. The most stragihtforward and "pure" way to resolve the issues is to put password-auth usernames in a separate space, but this would be incredibly confusuing to users (your login name might not be the same as your username, which is bizarre). - If we change this, we need to update all the other password-related code, which I don't want to bother with (at least for now). Instead, let registration know about a "default" registration controller (which is always password, if enabled), and let it require a password. This gives us a much simpler (albeit slightly less pure) implementation: - All the fields are on one form. - Password adapter is just a shell. - Password provider does the heavy lifting. We might make this more pure at some point, but I'm generally pretty satisfied with this. This doesn't implement the brute-force CAPTCHA protection, that will be coming soon. Test Plan: Registered with password only and logged in with a password. Hit various error conditions. Reviewers: btrahan Reviewed By: btrahan CC: aran, chad Maniphest Tasks: T1536, T1930 Differential Revision: https://secure.phabricator.com/D6164
2013-06-16 19:15:49 +02:00
.recaptcha_only_if_privacy {
display: none;
}
.phabricator-standard-custom-field-header {
font-size: 16px;
color: {$bluetext};
border-bottom: 1px solid {$lightbluetext};
padding: 16px 0 4px;
margin-bottom: 4px;
}
.device-desktop .text-with-submit-control-outer-bounds {
position: relative;
}
.device-desktop .text-with-submit-control-text-bounds {
position: absolute;
left: 0;
right: 184px;
}
.device-desktop .text-with-submit-control-submit-bounds {
text-align: right;
}
.device-desktop .text-with-submit-control-submit {
width: 180px;
}
.aphront-form-choose-table td {
vertical-align: middle;
padding: 4px 0;
}
.aphront-form-choose-table .aphront-form-choose-button-cell {
padding: 4px 8px;
}