Magic-Mirror/gecko-dev
1
0
Fork 0
mirror of https://github.com/mozilla/gecko-dev.git synced 2024-10-18 15:55:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Bug 1575910 - Implement button positioning in login-item per design spec. r=MattN,jaws

Browse Source 
Differential Revision: https://phabricator.services.mozilla.com/D43102

--HG--
extra : moz-landing-system : lando
This commit is contained in:
Tim Nguyen 2019-08-22 22:12:26 +00:00
parent 92b69fc0cb
commit cb20985c65
3 changed files with 37 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
browser/components/aboutlogins/content/aboutLogins.css
View File

@ -48,7 +48,7 @@ login-item {
}
login-item {
max-width: 800px;
max-width: 700px;
}
login-footer {

46
browser/components/aboutlogins/content/aboutLogins.html
View File

@ -159,29 +159,33 @@
</label>
</div>
<div class="detail-row">
<label class="detail-cell">
<span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
<input type="text" name="username" data-l10n-id="login-item-username"/>
</label>
<button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
</button>
<div class="detail-row-contents">
<label class="detail-cell">
<span class="username-label field-label" data-l10n-id="login-item-username-label"></span>
<input type="text" name="username" data-l10n-id="login-item-username"/>
</label>
<button class="copy-button copy-username-button" data-copy-login-property="username" data-telemetry-object="username" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-username-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-username-button-text"></span>
</button>
</div>
</div>
<div class="detail-row">
<label class="detail-cell">
<span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
<div class="reveal-password-wrapper">
<input type="password" name="password" required/>
<input type="checkbox"
class="reveal-password-checkbox"
data-l10n-id="login-item-password-reveal-checkbox"/>
</div>
</label>
<button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
</button>
<div class="detail-row-contents">
<label class="detail-cell">
<span class="password-label field-label" data-l10n-id="login-item-password-label"></span>
<div class="reveal-password-wrapper">
<input type="password" name="password" required/>
<input type="checkbox"
class="reveal-password-checkbox"
data-l10n-id="login-item-password-reveal-checkbox"/>
</div>
</label>
<button class="copy-button copy-password-button" data-copy-login-property="password" data-telemetry-object="password" type="button">
<span class="copied-button-text" data-l10n-id="login-item-copied-password-button-text"></span>
<span class="copy-button-text" data-l10n-id="login-item-copy-password-button-text"></span>
</button>
</div>
</div>
<div class="form-actions-row">
<button class="save-changes-button" type="submit"></button>

12
browser/components/aboutlogins/content/components/login-item.css
View File

@ -99,7 +99,13 @@ input[type="url"][readOnly]:hover:active {
.detail-row {
display: flex;
}
.detail-row-contents {
display: flex;
align-items: end;
flex-basis: calc(100% - 360px); /* Adds a 360px flexible spacer to the right */
max-width: 100%;
}
.detail-row,
@ -119,10 +125,14 @@ input[type="url"][readOnly]:hover:active {
margin-bottom: 5px;
}
:host([data-editing]) .detail-cell input:not([type="checkbox"]) {
:host([data-editing]) .detail-cell input:not([readOnly]):not([type="checkbox"]) {
width: 280px;
}
.copy-button {
margin-bottom: 0; /* Align button at the bottom of the row */
}
.copy-button:not([data-copied]) .copied-button-text,
.copy-button[data-copied] .copy-button-text {
display: none;