mozilla
/
gecko-dev
зеркало из https://github.com/mozilla/gecko-dev.git
1
0
Форкнуть 0
Код Задачи Пакеты Проекты Релизы Вики Активность

Bug 1321675 - Move device adder below devices. r=gl 

This gets closer to Helen's mockup.  The spacing is a bit tight.  When adjusting
the modal size, I used the most popular DevTools screen resolution (1366 x 768)
as a reference.

MozReview-Commit-ID: 4EjJKKhuxpA

--HG--
extra : rebase_source : 01d293e177d38548df2997db6aed5d822c6e1101
This commit is contained in:
J. Ryan Stinnett 2017-02-07 16:57:03 -06:00
Родитель 400ec2efd0
Коммит 30c2539e76
3 изменённых файлов: 123 добавлений и 92 удалений
Показать статистику Скачать Patch файл Скачать Diff файл Показать все файлы Свернуть все файлы

177
devtools/client/responsive.html/components/device-adder.js
Просмотреть файл

@ -135,95 +135,110 @@ module.exports = createClass({
{
id: "device-adder"
},
dom.label(
dom.div(
{
id: "device-adder-name",
id: "device-adder-content",
},
dom.span(
dom.div(
{
className: "device-adder-label",
id: "device-adder-column-1",
},
getStr("responsive.deviceAdderName")
dom.label(
{
id: "device-adder-name",
},
dom.span(
{
className: "device-adder-label",
},
getStr("responsive.deviceAdderName")
),
dom.input({
defaultValue: deviceName,
ref: input => {
this.nameInput = input;
},
})
),
dom.label(
{
id: "device-adder-size",
},
dom.span(
{
className: "device-adder-label"
},
getStr("responsive.deviceAdderSize")
),
ViewportDimension({
viewport: {
width,
height,
},
onChangeSize: this.onChangeSize,
onRemoveDeviceAssociation: () => {},
})
),
dom.label(
{
id: "device-adder-pixel-ratio",
},
dom.span(
{
className: "device-adder-label"
},
getStr("responsive.deviceAdderPixelRatio")
),
dom.input({
type: "number",
step: "any",
defaultValue: normalizedViewport.pixelRatio,
ref: input => {
this.pixelRatioInput = input;
},
})
)
),
dom.input({
defaultValue: deviceName,
ref: input => {
this.nameInput = input;
},
})
),
dom.label(
{
id: "device-adder-size",
},
dom.span(
dom.div(
{
className: "device-adder-label"
id: "device-adder-column-2",
},
getStr("responsive.deviceAdderSize")
dom.label(
{
id: "device-adder-user-agent",
},
dom.span(
{
className: "device-adder-label"
},
getStr("responsive.deviceAdderUserAgent")
),
dom.input({
defaultValue: normalizedViewport.userAgent,
ref: input => {
this.userAgentInput = input;
},
})
),
dom.label(
{
id: "device-adder-touch",
},
dom.span(
{
className: "device-adder-label"
},
getStr("responsive.deviceAdderTouch")
),
dom.input({
defaultChecked: normalizedViewport.touch,
type: "checkbox",
ref: input => {
this.touchInput = input;
},
})
)
),
ViewportDimension({
viewport: {
width,
height,
},
onChangeSize: this.onChangeSize,
onRemoveDeviceAssociation: () => {},
})
),
dom.label(
{
id: "device-adder-pixel-ratio",
},
dom.span(
{
className: "device-adder-label"
},
getStr("responsive.deviceAdderPixelRatio")
),
dom.input({
type: "number",
step: "any",
defaultValue: normalizedViewport.pixelRatio,
ref: input => {
this.pixelRatioInput = input;
},
})
),
dom.label(
{
id: "device-adder-user-agent",
},
dom.span(
{
className: "device-adder-label"
},
getStr("responsive.deviceAdderUserAgent")
),
dom.input({
defaultValue: normalizedViewport.userAgent,
ref: input => {
this.userAgentInput = input;
},
})
),
dom.label(
{
id: "device-adder-touch",
},
dom.span(
{
className: "device-adder-label"
},
getStr("responsive.deviceAdderTouch")
),
dom.input({
defaultChecked: normalizedViewport.touch,
type: "checkbox",
ref: input => {
this.touchInput = input;
},
})
),
dom.button(
{

10
devtools/client/responsive.html/components/device-modal.js
Просмотреть файл

@ -191,13 +191,13 @@ module.exports = createClass({
);
})
);
}),
DeviceAdder({
devices,
viewportTemplate: deviceAdderViewportTemplate,
onAddCustomDevice,
})
),
DeviceAdder({
devices,
viewportTemplate: deviceAdderViewportTemplate,
onAddCustomDevice,
}),
dom.button(
{
id: "device-submit-button",

28
devtools/client/responsive.html/index.css
Просмотреть файл

@ -426,7 +426,7 @@ select > option.divider {
left: 0;
right: 0;
width: 642px;
height: 612px;
height: 650px;
z-index: 1;
}
@ -459,9 +459,9 @@ select > option.divider {
flex-direction: column;
flex-wrap: wrap;
overflow: auto;
height: 550px;
height: 515px;
width: 600px;
margin: 20px;
margin: 20px 20px 0;
}
#device-close-button,
@ -528,6 +528,8 @@ select > option.divider {
color: var(--theme-body-color);
width: 100%;
height: 20px;
position: absolute;
bottom: 0;
}
#device-submit-button:hover {
@ -546,6 +548,20 @@ select > option.divider {
#device-adder {
display: flex;
flex-direction: column;
margin: 0 20px;
}
#device-adder-content {
display: flex;
}
#device-adder-column-1 {
flex: 1;
margin-right: 10px;
}
#device-adder-column-2 {
flex: 2;
}
#device-adder button {
@ -564,13 +580,13 @@ select > option.divider {
#device-adder label > input,
#device-adder label > .viewport-dimension {
width: 130px;
flex: 1;
margin: 0;
}
#device-adder input {
background: transparent;
border: none;
border: 1px solid transparent;
text-align: center;
color: var(--theme-body-color-inactive);
transition: all 0.25s ease;
@ -589,7 +605,7 @@ select > option.divider {
.device-adder-label {
display: inline-block;
margin-right: 5px;
width: 35px;
min-width: 35px;
}
#device-adder #device-adder-save {