2011-01-25 20:31:40 +01:00
|
|
|
/**
|
2013-06-13 03:23:35 +02:00
|
|
|
* @provides phui-button-css
|
2011-01-25 20:31:40 +01:00
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
2013-08-28 16:36:22 +02:00
|
|
|
button,
|
|
|
|
|
a.button {
|
2015-02-26 18:26:36 +01:00
|
|
|
font: {$basefont};
|
2014-11-21 02:05:32 +01:00
|
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
|
-webkit-user-select: none;
|
|
|
|
|
-moz-user-select: none;
|
|
|
|
|
-ms-user-select: none;
|
|
|
|
|
user-select: none;
|
2013-08-28 16:36:22 +02:00
|
|
|
}
|
|
|
|
|
|
2015-02-16 03:13:54 +01:00
|
|
|
button.phabricator-action-view-item {
|
|
|
|
|
-webkit-font-smoothing: auto;
|
|
|
|
|
}
|
|
|
|
|
|
2014-11-26 03:09:24 +01:00
|
|
|
button::-moz-focus-inner {
|
|
|
|
|
padding: 0;
|
|
|
|
|
border: 0;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-25 20:31:40 +01:00
|
|
|
button,
|
|
|
|
|
a.button,
|
|
|
|
|
a.button:visited,
|
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
|
|
|
input[type="submit"] {
|
2013-04-09 00:00:55 +02:00
|
|
|
background-color: #3477ad;
|
2012-11-09 00:47:11 +01:00
|
|
|
color: white;
|
|
|
|
|
border: 1px solid #19558D;
|
2011-01-25 20:31:40 +01:00
|
|
|
cursor: pointer;
|
|
|
|
|
font-weight: bold;
|
2012-11-16 20:19:12 +01:00
|
|
|
font-size: 13px;
|
2012-11-09 00:47:11 +01:00
|
|
|
display: inline-block;
|
2014-11-21 02:05:32 +01:00
|
|
|
padding: 3px 12px 4px;
|
2011-01-25 20:31:40 +01:00
|
|
|
text-align: center;
|
|
|
|
|
white-space: nowrap;
|
2012-11-09 00:47:11 +01:00
|
|
|
border-radius: 3px;
|
2013-04-09 00:00:55 +02:00
|
|
|
background-image: linear-gradient(to bottom, #3b86c4, #2b628f);
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #3b86c4, #2b628f);
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Buttons with images (full size only) */
|
|
|
|
|
button.icon,
|
|
|
|
|
a.icon,
|
|
|
|
|
a.icon:visited {
|
|
|
|
|
padding-left: 0;
|
|
|
|
|
position: relative;
|
|
|
|
|
text-indent: 29px;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-09 00:47:11 +01:00
|
|
|
button.black,
|
|
|
|
|
a.black,
|
|
|
|
|
a.black:visited {
|
|
|
|
|
background-color: #383838;
|
2013-04-09 00:00:55 +02:00
|
|
|
background-image: linear-gradient(to bottom, #505d65, #2d373c);
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #505d65, #2d373c);
|
2013-09-07 18:13:55 +02:00
|
|
|
border: 1px solid {$darkgreytext};
|
2012-11-09 00:47:11 +01:00
|
|
|
border-bottom-color: #000;
|
|
|
|
|
}
|
|
|
|
|
|
2011-01-25 20:31:40 +01:00
|
|
|
button.green,
|
|
|
|
|
a.green,
|
|
|
|
|
a.green:visited {
|
2013-04-09 00:00:55 +02:00
|
|
|
background-color: #348e20;
|
|
|
|
|
background-image: linear-gradient(to bottom, #4e9b33, #158009);
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #4e9b33, #158009);
|
2011-01-25 20:31:40 +01:00
|
|
|
border: 1px solid #3b6e22;
|
|
|
|
|
border-bottom-color: #2c5a15;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.grey,
|
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
|
|
|
input[type="submit"].grey,
|
2011-01-25 20:31:40 +01:00
|
|
|
a.grey,
|
2013-04-09 00:00:55 +02:00
|
|
|
a.grey:visited {
|
2013-09-07 18:13:55 +02:00
|
|
|
background-color: {$lightgreybackground};
|
2013-04-09 00:00:55 +02:00
|
|
|
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
|
|
|
|
|
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
|
2013-09-02 17:10:47 +02:00
|
|
|
border-color: {$lightgreyborder};
|
2013-09-07 18:13:55 +02:00
|
|
|
color: {$darkgreytext};
|
2013-09-02 17:10:47 +02:00
|
|
|
border-bottom-color: {$greyborder};
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
2013-12-03 17:34:04 +01:00
|
|
|
button.simple,
|
|
|
|
|
input[type="submit"].simple,
|
|
|
|
|
a.simple,
|
|
|
|
|
a.simple:visited {
|
|
|
|
|
background-color: transparent;
|
|
|
|
|
background-image: none;
|
|
|
|
|
border: 1px solid transparent;
|
|
|
|
|
color: {$bluetext};
|
2014-06-03 06:01:05 +02:00
|
|
|
border: 1px solid {$lightblueborder};
|
2013-12-03 17:34:04 +01:00
|
|
|
}
|
|
|
|
|
|
2011-01-25 20:31:40 +01:00
|
|
|
a.disabled,
|
2013-04-09 00:00:55 +02:00
|
|
|
button.disabled,
|
|
|
|
|
button[disabled] {
|
2011-01-25 20:31:40 +01:00
|
|
|
filter:alpha(opacity=50);
|
2013-04-09 00:00:55 +02:00
|
|
|
-moz-opacity: 0.5;
|
2011-01-25 20:31:40 +01:00
|
|
|
-khtml-opacity: 0.5;
|
2013-07-17 21:12:25 +02:00
|
|
|
opacity: 0.5;
|
2013-04-09 00:00:55 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body button:active,
|
|
|
|
|
body a.button:active {
|
|
|
|
|
box-shadow: inset 0 0 8px rgba(0,0,0,.6);
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.grey:active,
|
|
|
|
|
a.grey:active,
|
2012-01-05 01:52:13 +01:00
|
|
|
button.grey_active,
|
2014-05-05 19:57:23 +02:00
|
|
|
a.button.phuix-dropdown-open {
|
2012-11-09 00:47:11 +01:00
|
|
|
background-color: #7d7d7d;
|
2013-04-09 00:00:55 +02:00
|
|
|
box-shadow: inset 0 0 4px rgba(0,0,0,.2);
|
2013-05-27 18:56:45 +02:00
|
|
|
}
|
|
|
|
|
|
2014-05-05 19:57:23 +02:00
|
|
|
a.phuix-dropdown-open {
|
2013-09-02 17:10:47 +02:00
|
|
|
color: {$greytext};
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
2013-04-09 00:00:55 +02:00
|
|
|
a.button:hover,
|
|
|
|
|
button:hover {
|
2011-01-25 20:31:40 +01:00
|
|
|
text-decoration: none;
|
2013-04-09 00:00:55 +02:00
|
|
|
box-shadow: inset 0 0 5px rgba(0,0,0,.4);
|
|
|
|
|
}
|
|
|
|
|
|
2013-12-03 17:34:04 +01:00
|
|
|
a.button.simple:hover,
|
|
|
|
|
button.simple:hover {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
border: 1px solid {$lightgreyborder};
|
|
|
|
|
background-image: none;
|
|
|
|
|
border-bottom: 1px solid {$greyborder};
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
2014-06-13 03:15:11 +02:00
|
|
|
a.button.simple.phuix-dropdown-open {
|
|
|
|
|
background-color: #fff;
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-04-09 00:00:55 +02:00
|
|
|
a.button.grey:hover,
|
|
|
|
|
button.grey:hover {
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
box-shadow: inset 0 0 4px rgba(0,0,0,.2);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
body a.button.disabled:hover,
|
|
|
|
|
body button.disabled:hover,
|
|
|
|
|
body a.button.disabled:active,
|
|
|
|
|
body button.disabled:active {
|
|
|
|
|
box-shadow: none;
|
2011-01-25 20:31:40 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
button.small,
|
|
|
|
|
a.small,
|
|
|
|
|
a.small:visited {
|
2014-11-21 02:05:32 +01:00
|
|
|
padding: 2px 8px;
|
2011-01-25 20:31:40 +01:00
|
|
|
height: auto;
|
|
|
|
|
font-size: 11px;
|
|
|
|
|
line-height: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
2011-02-05 03:24:03 +01:00
|
|
|
button.link {
|
|
|
|
|
display: inline;
|
|
|
|
|
border: none;
|
|
|
|
|
background: transparent;
|
|
|
|
|
font-weight: normal;
|
|
|
|
|
padding: 0;
|
|
|
|
|
margin: 0;
|
|
|
|
|
font-size: inherit;
|
2011-02-19 23:36:13 +01:00
|
|
|
border-bottom: none;
|
|
|
|
|
text-decoration: none;
|
2013-10-23 19:16:09 +02:00
|
|
|
color: #19558D;
|
2011-02-19 23:36:13 +01:00
|
|
|
-webkit-box-shadow: none;
|
|
|
|
|
-moz-box-shadow: none;
|
|
|
|
|
box-shadow: none;
|
2011-02-05 03:24:03 +01:00
|
|
|
}
|
2011-01-25 20:31:40 +01:00
|
|
|
|
2011-02-05 03:24:03 +01:00
|
|
|
button.link:hover {
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
}
|
2011-02-11 19:28:37 +01:00
|
|
|
|
2014-05-05 19:56:14 +02:00
|
|
|
.phuix-dropdown-menu {
|
2012-01-05 01:52:13 +01:00
|
|
|
position: absolute;
|
|
|
|
|
width: 240px;
|
2013-05-27 18:56:45 +02:00
|
|
|
background: #fff;
|
2012-01-05 01:52:13 +01:00
|
|
|
margin-top: -1px;
|
2013-05-27 18:56:45 +02:00
|
|
|
padding: 5px 0;
|
2014-05-29 05:56:20 +02:00
|
|
|
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
|
2013-09-13 19:48:02 +02:00
|
|
|
border: 1px solid {$lightgreyborder};
|
2014-05-29 05:56:20 +02:00
|
|
|
border-bottom: 1px solid {$greyborder};
|
|
|
|
|
border-radius: 3px;
|
|
|
|
|
margin-bottom: 16px;
|
2012-01-05 01:52:13 +01:00
|
|
|
}
|
|
|
|
|
|
2014-05-05 19:57:23 +02:00
|
|
|
.phuix-dropdown-menu a:focus {
|
|
|
|
|
/* We automatically focus links in dropdown menus for assistive devices, but
|
|
|
|
|
this is distracting for visual user agents. */
|
|
|
|
|
outline: none;
|
|
|
|
|
}
|
|
|
|
|
|
2013-10-13 02:08:11 +02:00
|
|
|
a.policy-control {
|
|
|
|
|
width: 240px;
|
|
|
|
|
text-align: left;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.policy-control .caret {
|
|
|
|
|
float: right;
|
|
|
|
|
}
|
|
|
|
|
|
2012-11-09 18:59:34 +01:00
|
|
|
a.toggle {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
padding: 4px 8px;
|
2013-03-13 07:30:03 +01:00
|
|
|
font-size: 12px;
|
2012-11-09 18:59:34 +01:00
|
|
|
font-weight: bold;
|
2013-03-13 07:30:03 +01:00
|
|
|
color: #555;
|
2012-11-09 18:59:34 +01:00
|
|
|
text-decoration: none;
|
|
|
|
|
white-space: nowrap;
|
|
|
|
|
vertical-align: baseline;
|
2013-09-07 18:13:55 +02:00
|
|
|
background-color: {$lightgreybackground};
|
2013-03-13 07:30:03 +01:00
|
|
|
margin: 0 6px 0 0;
|
2012-11-09 18:59:34 +01:00
|
|
|
border-radius: 3px;
|
2013-03-13 07:30:03 +01:00
|
|
|
box-shadow: inset 0 0 3px rgba(0,0,0,.4);
|
2012-11-09 18:59:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.toggle:hover {
|
2013-03-13 07:30:03 +01:00
|
|
|
background-color: #14568e;
|
|
|
|
|
color: #fff
|
2012-11-09 18:59:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.toggle-selected {
|
2013-03-13 07:30:03 +01:00
|
|
|
background-color: #14568e;
|
|
|
|
|
color: #fff
|
2012-11-09 18:59:34 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
a.toggle-fixed {
|
|
|
|
|
cursor: default;
|
|
|
|
|
}
|
2013-05-24 16:40:51 +02:00
|
|
|
|
|
|
|
|
.caret {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
vertical-align: top;
|
|
|
|
|
border-top: 5px solid #fff;
|
|
|
|
|
border-right: 5px solid transparent;
|
|
|
|
|
border-left: 5px solid transparent;
|
|
|
|
|
content: "";
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-13 01:08:47 +02:00
|
|
|
.caret-right {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
vertical-align: middle;
|
2013-09-13 19:48:02 +02:00
|
|
|
border-left: 7px solid {$greytext};
|
2013-09-13 01:08:47 +02:00
|
|
|
border-top: 5px solid transparent;
|
|
|
|
|
border-bottom: 5px solid transparent;
|
|
|
|
|
content: "";
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.caret-left {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 0;
|
|
|
|
|
height: 0;
|
|
|
|
|
vertical-align: middle;
|
|
|
|
|
border-right: 7px solid {$greytext};
|
|
|
|
|
border-bottom: 5px solid transparent;
|
|
|
|
|
border-top: 5px solid transparent;
|
|
|
|
|
content: "";
|
|
|
|
|
margin-bottom: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-24 16:40:51 +02:00
|
|
|
.dropdown .caret {
|
|
|
|
|
margin-top: 7px;
|
|
|
|
|
margin-left: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-09-13 19:48:02 +02:00
|
|
|
.small.dropdown .caret {
|
|
|
|
|
margin-top: 6px;
|
|
|
|
|
}
|
|
|
|
|
|
2013-05-24 16:40:51 +02:00
|
|
|
.grey.dropdown .caret {
|
|
|
|
|
border-top-color: #000;
|
|
|
|
|
}
|
2013-06-13 03:23:35 +02:00
|
|
|
|
|
|
|
|
/* Icons */
|
|
|
|
|
.button.has-icon {
|
|
|
|
|
position: relative;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button .phui-icon-view {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
position: absolute;
|
|
|
|
|
top: 5px;
|
2014-11-21 02:05:32 +01:00
|
|
|
left: 10px;
|
2013-06-13 03:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
2014-06-04 21:53:32 +02:00
|
|
|
.phui-button-bar .button .phui-icon-view {
|
2014-11-21 02:05:32 +01:00
|
|
|
left: 12px;
|
2014-06-04 21:53:32 +02:00
|
|
|
}
|
|
|
|
|
|
2013-09-13 00:19:52 +02:00
|
|
|
.button.has-icon .phui-button-text {
|
2013-06-13 03:23:35 +02:00
|
|
|
margin-left: 16px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* Login Buttons */
|
|
|
|
|
|
|
|
|
|
.button.big.has-icon {
|
|
|
|
|
padding: 6px 20px 6px 12px;
|
|
|
|
|
border-radius: 4px;
|
2013-06-17 01:31:57 +02:00
|
|
|
text-align: left;
|
2013-06-13 03:23:35 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button.big.has-icon .phui-button-text {
|
2014-11-21 02:05:32 +01:00
|
|
|
margin-left: 40px;
|
2013-06-13 03:23:35 +02:00
|
|
|
font-size: 14px;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button.big.has-icon .phui-button-subtext {
|
2013-09-02 17:12:18 +02:00
|
|
|
color: {$lightgreytext};
|
2013-06-13 03:23:35 +02:00
|
|
|
font-size: 12px;
|
2013-06-18 07:02:16 +02:00
|
|
|
line-height: 15px;
|
2013-06-13 03:23:35 +02:00
|
|
|
font-weight: normal;
|
|
|
|
|
}
|
2014-02-10 20:11:36 +01:00
|
|
|
|
|
|
|
|
/* PHUI Button Bar */
|
|
|
|
|
|
|
|
|
|
.phui-button-bar a.button {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
height: 16px;
|
|
|
|
|
width: 12px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-button-bar .phui-button-bar-first {
|
|
|
|
|
border-top-right-radius: 0px;
|
|
|
|
|
border-bottom-right-radius: 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-button-bar .phui-button-bar-middle {
|
|
|
|
|
border-radius: 0;
|
|
|
|
|
border-left: none;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.phui-button-bar .phui-button-bar-last {
|
|
|
|
|
border-left: none;
|
|
|
|
|
border-top-left-radius: 0px;
|
|
|
|
|
border-bottom-left-radius: 0px;
|
|
|
|
|
}
|
