未验证 提交 297f4b2e 编写于 作者: T Tim Jacomb 提交者: GitHub

Merge pull request #4658 from fqueiruga/jenkins-61840_restyle-buttons

[JENKINS-61840] Restyle buttons
......@@ -26,7 +26,7 @@ THE SOFTWARE.
${%lastUpdated(app.updateCenter.lastUpdatedString)}
<f:link href="checkUpdatesServer" post="true" clazz="yui-button yui-submit-button submit-button primary">
<button>${%Check now}</button>
${%Check now}
</f:link>
<j:if test="${app.pluginManager.lastErrorCheckUpdateCenters != null}">
<div class="error">
......
......@@ -65,8 +65,8 @@ THE SOFTWARE.
<j:if test="${h.hasPermission(it,it.CONFIGURE)}">
<f:bottomButtonBar>
<!--<input type="button" name="StructureTest" value="Test" onclick="buildFormTree(this.form)" />-->
<f:submit value="${%Save}"/>
<f:apply value="${%Apply}"/>
<f:submit value="${%Save}" large="true"/>
<f:apply value="${%Apply}" large="true" />
</f:bottomButtonBar>
</j:if>
</f:form>
......
......@@ -24,6 +24,8 @@ THE SOFTWARE.
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
<span class="yui-button primary large-button">
<button type="submit" id="ok-button">OK</button>
</span>
<f:checkbox title="${%Add to current view}" field="addToCurrentView" checked="${it.addToCurrentView}"/>
</j:jelly>
......@@ -24,5 +24,7 @@ THE SOFTWARE.
<?jelly escape-by-default='true'?>
<j:jelly xmlns:j="jelly:core" xmlns:st="jelly:stapler" xmlns:d="jelly:define" xmlns:l="/lib/layout" xmlns:t="/lib/hudson" xmlns:f="/lib/form" xmlns:i="jelly:fmt">
<span class="yui-button primary large-button">
<button type="submit" id="ok-button">${%OK}</button>
</span>
</j:jelly>
......@@ -47,7 +47,7 @@ THE SOFTWARE.
<div class="advancedLink" style="${attrs.align!=null?('text-align:'+attrs.align):''}">
<j:set var="id" value="${h.generateId()}"/>
<span style="display: none" id="${id}">
<l:icon class="icon-notepad icon-md" style="vertical-align: baseline" tooltip="${%customizedFields}"/>
<l:icon class="icon-notepad icon-md" tooltip="${%customizedFields}"/>
</span>
<st:nbsp />
<input type="button" value="${attrs.title?:'%Advanced'}..." class="advanced-button advancedButton" /><!-- advancedButton is legacy -->
......
......@@ -35,8 +35,15 @@ THE SOFTWARE.
<s:attribute name="value">
The text of the apply button.
</s:attribute>
<s:attribute name="large">
Set to "true" to enable the large variant of the button
</s:attribute>
</s:documentation>
<st:adjunct includes="lib.form.apply.apply"/>
<input type="hidden" name="core:apply" value="" />
<input type="button" value="${attrs.value ?: '%Apply'}" class="apply-button applyButton" name="Apply"/><!-- applyButton is legacy -->
<input type="button"
value="${attrs.value ?: '%Apply'}"
class="apply-button applyButton ${attrs.large ? 'large-button' : ''}"
name="Apply"/><!-- applyButton is legacy -->
</j:jelly>
......@@ -36,6 +36,14 @@ THE SOFTWARE.
<s:attribute name="value" use="required">
The text of the submit button. Something like "submit", "OK", etc.
</s:attribute>
<s:attribute name="large">
Set to "true" to enable the large variant of the button
</s:attribute>
</s:documentation>
<input type="submit" name="${attrs.name ?: 'Submit'}" value="${attrs.value ?: '%Submit'}" class="submit-button primary" />
<input type="submit"
name="${attrs.name ?: 'Submit'}"
value="${attrs.value ?: '%Submit'}"
class="submit-button primary ${attrs.large ? 'large-button' : ''}" />
</j:jelly>
......@@ -9,6 +9,8 @@
background-repeat: no-repeat;
width: 20px;
height: 20px;
min-height: 0;
min-width: 0;
padding: 0;
border: none;
}
......
......@@ -153,9 +153,7 @@ THE SOFTWARE.
</j:if>
<link rel="stylesheet" href="${resURL}/scripts/yui/container/assets/container.css" type="text/css"/>
<link rel="stylesheet" href="${resURL}/scripts/yui/assets/skins/sam/skin.css" type="text/css" />
<link rel="stylesheet" href="${resURL}/scripts/yui/container/assets/skins/sam/container.css" type="text/css"/>
<link rel="stylesheet" href="${resURL}/scripts/yui/button/assets/skins/sam/button.css" type="text/css" />
<link rel="stylesheet" href="${resURL}/scripts/yui/menu/assets/skins/sam/menu.css" type="text/css" />
<!--link rel="stylesheet" href="${resURL}/scripts/yui/editor/assets/skins/sam/editor.css" type="text/css" /-->
......
package hudson;
import com.gargoylesoftware.htmlunit.Page;
import com.gargoylesoftware.htmlunit.html.DomNodeList;
import com.gargoylesoftware.htmlunit.html.HtmlButton;
import com.gargoylesoftware.htmlunit.html.HtmlAnchor;
import com.gargoylesoftware.htmlunit.html.HtmlElement;
import com.gargoylesoftware.htmlunit.html.HtmlElementUtil;
import com.gargoylesoftware.htmlunit.html.HtmlPage;
......@@ -26,8 +25,10 @@ import org.xml.sax.SAXException;
import javax.servlet.ServletException;
import java.io.IOException;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import java.util.stream.Collectors;
import static org.hamcrest.CoreMatchers.is;
import static org.junit.Assert.assertEquals;
......@@ -108,10 +109,14 @@ public class PluginManagerCheckUpdateCenterTest {
}
}
private HtmlButton getCheckNow(HtmlPage page){
DomNodeList<HtmlElement> elements = page.getElementById("bottom-sticker").getElementsByTagName("button");
private HtmlAnchor getCheckNow(HtmlPage page){
List<HtmlElement> elements = page.getElementById("bottom-sticker")
.getElementsByTagName("a")
.stream()
.filter(link -> link.getAttribute("href").equals("checkUpdatesServer"))
.collect(Collectors.toList());
assertEquals(1, elements.size());
return (HtmlButton) elements.get(0);
return (HtmlAnchor) elements.get(0);
}
/**
......
......@@ -39,38 +39,6 @@
min-width: auto;
margin-right: 0px;
}
button[type=submit] {
padding: 5px 20px;
background-color: rgb(204, 221, 238);
border-color: rgb(102, 153, 204);
border-radius: 3px;
border-width: 1px;
border-style: solid;
color: rgb(80, 80, 80);
font-weight: bold;
font-size: @font-size-sm;
line-height: 27px;
}
button[type=submit]:hover:not(.disabled), button[type=submit]:focus:not(.disabled) {
background-color: rgb(68, 119, 136);
border-color: rgb(51, 85, 102);
color: rgb(238, 238, 238);
cursor: pointer;
}
button[type=submit]:active:not(.disabled){
box-shadow: inset 0px 1px 6px 2px #1b2b33;
}
button[type=submit].disabled {
background-color: #ccc;
border-color: #aaa;
color: rgb(140, 140, 140);
cursor: auto;
opacity: 0.75;
}
}
}
......
......@@ -148,29 +148,6 @@
right:0;
z-index:2;
}
.yui-button.primary{
button{
background:@middle-blue;
border-color:@dark-blue;
}
}
.yui-button.yui-button-disabled{
button{
background:@light-background;
border-color:@solid-border;
color:@solid-border;
}
}
.yui-button{
margin-right:10px;
button{
padding:5px 20px;
background:@pale-blue;
border-color:@line-blue;
}
}
}
.section-header{
......@@ -208,7 +185,6 @@
display:block;
}
.yui-button button,
input[type='email'].setting-input,
input[type='password'].setting-input,
input[type='text'].setting-input{
......@@ -217,14 +193,6 @@
padding:0 5px;
.border-radius(@radius);
}
.yui-button button{
padding:0 10px;
box-sizing:content-box;
}
.yui-button button.hetero-list-add{
padding-right:25px;
}
select:not([multiple]){
height:@input-line-height;
......@@ -320,6 +288,8 @@
line-height: 12px !important;
display: inline-block;
font-size: 8px;
min-width: 0;
min-height: 0;
}
button:focus,
......
@white: #fff;
@black: #333;
@primary: #0587d4;
@secondary: #4D545D;
@success: #138347;
@danger: #CC0003;
@warning: #EA6B19;
@focus: #3FB3F7;
// State colors
@primary-hover: #0B6AA2;
@primary-active: #095683;
@danger-hover: #EB383B;
@danger-active: #B50003;
// Page header colors
@logo-bg: @white;
@brand-link-color: #4d545d;
@brand-link-color: @secondary;
@header-link-color: @white;
@header-link-color-active: #f5f5f5;
@header-link-outline: #3FB3F7;
@header-link-outline: @focus;
@search-input-color: @brand-link-color;
@search-background: @white;
@search-box-completion-bg: #0587d4;
@search-box-completion-bg: @primary;
@search-box-shadow: 0 1px 7px 0 rgba(0,0,0,0.3);
// Header classic colors
......@@ -17,11 +31,11 @@
@header-link-bg-classic-active: lighten(@header-bg-classic, 20%);
// Header new UI colors
@header-bg-v2: #0587d4;
@brand-link-color-hover-v2: #0B6AA2;
@brand-link-color-active-v2: #095683;
@header-link-bg-hover-v2: #0B6AA2;
@header-link-bg-active-v2: #095683;
@header-bg-v2: @primary;
@brand-link-color-hover-v2: @primary-hover;
@brand-link-color-active-v2: @primary-active;
@header-link-bg-hover-v2: @primary-hover;
@header-link-bg-active-v2: @primary-active;
// Header dimensions
@header-item-border-radius: 4px;
......@@ -43,7 +57,7 @@
@alert-success-icon-color: #4caf50;
@alert-success-bg-color: #d4edda;
@alert-success-border-color: #c3e6cb;
@alert-success-color: #155724;
@alert-success-color: @success;
@alert-warn-icon-color: #ff9800;
@alert-warn-bg-color: #fff3cd;
......@@ -56,6 +70,15 @@
@alert-err-color: #721c24;
// Typography
@text-color: #333;
@text-color-primary: #0B6AA2;
@text-color-primary-accent: #095683;
@text-color: @black;
@text-color-primary: @primary;
@text-color-primary-accent: @primary-active;
@text-color-grey-light: #747C82;
@text-inactive: @text-color-grey-light;
// Buttons
@btn-primary-bg: @primary-hover;
@btn-primary-bg-hover: @primary;
@btn-primary-bg-active: @primary-active;
@btn-secondary-color: @secondary;
@btn-secondary-border: #9BA7AF;
......@@ -21,9 +21,7 @@ html {
@import './base/layout-commons.less';
@import './base/style.less';
// Keep page header code in this bundle to avoid loading multiple files
// that are always needed
@import './modules/buttons.less';
@import './modules/page-header.less';
@import './modules/page-footer.less';
@import './modules/manage-jenkins.less';
......@@ -1294,16 +1294,6 @@ TABLE.fingerprint-in-build TD {
background-color: #e8eeee;
}
#plugins input.uninstall {
font-size: @font-size-xs;
padding: 3px 5px;
border-radius: 1px;
font-weight: bold;
background-color: #4b758b;
color: #eee;
border: 1px solid #5788a1;
}
#plugins tr.has-dependents input.uninstall {
background-color: #e0e0e0;
border: 1px solid #cccccc;
......@@ -1792,129 +1782,6 @@ select.select-ajax-pending {
margin-top: 6px;
}
#bottom-sticker .yui-button {
margin-right: 20px;
}
/* This level of nesting is technically unnecessary, but to override the
* default Yahoo styles. */
#jenkins .yui-button {
border-width: 0;
border-style: none;
border-color: transparent;
background: none;
text-decoration: none;
}
#jenkins .yui-button .first-child {
border-width: 0;
border-style: none;
border-color: transparent;
}
#jenkins .yui-button .btn,
#jenkins .yui-button button {
font-size: @font-size-xs;
padding: 3px 20px;
*border: 0;
border-radius: 1px;
border: 1px solid #cccccc;
background-color: #e0e0e0;
color: #505050;
font-weight: bold;
}
#jenkins .yui-button .hetero-list-add {
padding-right: 35px;
}
#jenkins .yui-button .btn:hover,
#jenkins .yui-button button:hover,
#jenkins .yui-button .hover
{
background-color: #d0d0d0;
border: 1px solid #c0c0c0;
}
#jenkins .yui-button .btn:active,
#jenkins .yui-button button:active,
#jenkins .yui-button .active {
background-color: #bbb;
box-shadow: inset 0px 1px 6px 2px #929292;
border: 1px solid #bbb;
}
#jenkins .yui-button .btn.disabled,
#jenkins .yui-button button[disabled],
#jenkins .yui-button button[disabled]:hover,
#jenkins .yui-button button[disabled]:active,
#jenkins .yui-button .disabled {
background-color: #e5e5e5;
color: #999;
border: 1px solid #d2d2d2;
}
/* Color overrides */
#jenkins .yui-button.primary .btn,
#jenkins .yui-button.primary button {
background-color: #4b758b;
color: #eee;
border: 1px solid #5788a1;
}
#jenkins .yui-button.primary .btn:hover,
#jenkins .yui-button.primary button:hover,
#jenkins .yui-button.primary .hover
{
background-color: #3f6275;
border: 1px solid #5788a1;
}
#jenkins .yui-button.primary .btn:active,
#jenkins .yui-button.primary button:active,
#jenkins .yui-button.primary .active
{
background-color: #33505f;
border: 1px solid #3f6275;
box-shadow: inset 0px 1px 6px 2px #1b2b33;
}
#jenkins .yui-button.primary button:disabled,
#jenkins .yui-button.primary .disabled
{
background-color: #adc6d3;
color: #fff;
border: 1px solid #a2becd;
}
#jenkins .yui-button.danger button {
background-color: #d24939;
color: #eee;
border: 1px solid #be3a2b;
}
#jenkins .yui-button.danger button:hover,
#jenkins .yui-button.danger .hover
{
background-color: #a23225;
border: 1px solid #942e22;
}
#jenkins .yui-button.danger button:active,
#jenkins .yui-button.danger .active
{
background-color: #942e22;
border: 1px solid #6b2118;
box-shadow: inset 0px 1px 6px 2px #79251b;
}
#jenkins .yui-button.danger button:disabled,
#jenkins .yui-button.danger .disabled
{
background-color: #e5958c;
color: #f8f8f8;
border: 1px solid #e39280;
}
.i18n {
display: none;
}
......
@import '../abstracts/colors.less';
@import '../abstracts/font.less';
// Button variant mixins
.button-danger() {
color: @white;
background-color: @danger;
border-color: @danger;
&:hover,
&:focus {
color: @white;
background-color: @danger-hover;
border-color: @danger-hover;
}
&:active {
color: @white;
background-color: @danger-active;
border-color: @danger-active;
}
}
.button-primary() {
color: @white;
background-color: @btn-primary-bg;
border-color: @btn-primary-bg;
&:hover,
&:focus {
color: @white;
background-color: @btn-primary-bg-hover;
border-color: @btn-primary-bg-hover;
}
&:active {
color: @white;
background-color: @btn-primary-bg-active;
border-color: @btn-primary-bg-active;
}
}
.button-secondary() {
color: @btn-secondary-color;
border-color: @btn-secondary-border;
background-color: @white;
&:hover,
&:focus {
color: @primary-hover;
border-color: @primary-hover;
}
&:active {
color: @primary-active;
border-color: @primary-active;
}
}
.button-link {
color: @primary;
background-color: transparent;
border-color: transparent;
&:hover,
&:focus {
color: @primary-hover;
background-color: #f8f8f8;
border-color: #f8f8f8;
}
&:active {
color: @primary-active;
background-color: #EAEFF2;
border-color: #EAEFF2;
}
}
.button-disabled {
opacity: 0.5;
pointer-events: none;
}
// Button styles
.yui-button {
display: inline-block;
}
.yui-button .first-child {
display: block;
}
.yui-button button,
input[type="button"],
input[type="reset"],
input[type="submit"],
a.yui-button:link,
a.yui-button:visited {
box-sizing: border-box;
display: inline-block;
// vertical padding:
// 0.375rem == 6px == 32px (target height) - 4px (borders) - 16 (line) / 2
padding: 0.375rem 1rem;
margin-right: 0.25rem;
margin-left: 0.25rem;
min-width: 4.5rem;
min-height: 2rem;
cursor: pointer;
user-select: none;
font-size: @font-size-xs;
line-height: 1rem;
font-weight: bold;
text-align: center;
vertical-align: middle;
text-decoration: none;
border: 2px solid;
border-radius: 4px;
transition: all 0.15s ease-in-out;
.button-secondary();
&:focus {
outline: none;
box-shadow: 0 0 0 0.2rem rgba(@focus, 0.5);
}
display: inline-flex;
align-items: center;
justify-content: center;
& > span {
display: inline-block;
}
.svg-icon,
i {
width: 1rem;
height: 1rem;
font-size: 1rem;
vertical-align: top;
flex-shrink: 1;
}
.leading-icon {
margin-right: 0.25rem;
}
.trailing-icon {
margin-left: 0.25rem;
}
}
.yui-button.danger button,
input[type="button"].danger,
input[type="reset"].danger,
input[type="submit"].danger {
.button-danger();
}
.yui-button.primary button,
input[type="button"].primary,
input[type="reset"].primary,
input[type="submit"].primary {
.button-primary();
}
.yui-button.link-button button,
input[type="button"].link-button,
input[type="reset"].link-button,
input[type="submit"].link-button {
.button-link();
}
.yui-button.large-button button,
input[type="button"].large-button,
input[type="reset"].large-button,
input[type="submit"].large-button,
a.yui-button.large-button {
// vertical padding
// 0.5rem == 8px == 40px (target height) - 4px (borders) - 20 (line) / 2
padding: 0.5rem 1rem;
min-width: 6.5rem;
min-height: 2.5rem;
font-size: @font-size-sm;
line-height: 1.25rem;
.svg-icon,
i {
vertical-align: top;
height: 1.25rem;
width: 1.25rem;
font-size: 1.25rem;
}
}
.yui-button-disabled button,
.yui-button button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled,
.yui-button-disabled input[type="button"],
.yui-button-disabled input[type="reset"],
.yui-button-disabled input[type="submit"] {
.button-disabled();
}
a.yui-button {
&.primary {
.button-primary();
}
&.danger {
.button-danger();
}
&.link-button {
.button-link();
}
&.disabled {
.button-disabled();
}
}
// Dropdown buttons
.yui-button.yui-menu-button button,
.yui-button.yui-split-button button {
// These buttons have a caret as the :after element
&::after {
display: inline-block;
margin-left: 0.4em;
vertical-align: 0.1875em;
content: "";
border-top: 0.35em solid;
border-right: 0.35em solid transparent;
border-bottom: 0;
border-left: 0.35em solid transparent;
}
}
.yui-button.yui-menu-button.yui-menu-button-active button,
.yui-button.yui-split-button.yui-split-button-active button {
&::after {
border-bottom: 0.35em solid;
border-top: 0;
}
}
// Icon buttons
.yui-button.icon-button button,
a.yui-button.icon-button:link,
a.yui-button.icon-button:visited {
padding: 0.25rem;
min-width: 2rem;
height: 2rem;
.svg-icon,
i {
width: 1rem;
height: 1rem;
font-size: 1rem;
}
.button-link();
}
.yui-button.icon-button.large-button button,
a.yui-button.icon-button.large-button {
padding: 0.5rem;
min-width: 2.5rem;
height: 2.5rem;
padding: 0.625rem;
.svg-icon,
i {
width: 1.25rem;
height: 1.25rem;
font-size: 1.25rem;
}
}
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册