chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.html - Issue 2625663003: Layout nits for the signin email confirmation dialog.

Side by Side Diff: chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.html

Issue 2625663003: Layout nits for the signin email confirmation dialog. (Closed)

Patch Set: Remove unnecessary margin Created 3 years, 11 months ago

Use n/p to move between diff chunks; N/P to move between comments. Draft comments are only viewable by you.

Jump to:

« no previous file with comments | « no previous file | chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.js » ('j') | chrome/browser/resources/signin/signin_email_confirmation/signin_email_confirmation.js » ('J')
Toggle Intra-line Diffs ('i') | Expand Comments ('e') | Collapse Comments ('c') | Hide Comments ('s')

OLD	NEW
1 <!doctype html>	1 <!doctype html>

2 <html i18n-values="dir:textdirection;lang:language">	2 <html i18n-values="dir:textdirection;lang:language">

3 <head>	3 <head>

4 <meta charset="utf-8">	4 <meta charset="utf-8">

5 <link rel="import" href="chrome://resources/html/polymer.html">	5 <link rel="import" href="chrome://resources/html/polymer.html">

6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper- button.html">	6 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper- button.html">

7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/ paper-radio-button.html">	7 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-button/ paper-radio-button.html">

8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/p aper-radio-group.html">	8 <link rel="import" href="chrome://resources/polymer/v1_0/paper-radio-group/p aper-radio-group.html">

9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color. html">	9 <link rel="import" href="chrome://resources/polymer/v1_0/paper-styles/color. html">

10 <link rel="import" href="signin_shared_css.html">	10 <link rel="import" href="signin_shared_css.html">

11 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">	11 <link rel="stylesheet" href="chrome://resources/css/text_defaults_md.css">

12 <link rel="import" href="chrome://resources/html/cr.html">	12 <link rel="import" href="chrome://resources/html/cr.html">

13 <link rel="import" href="chrome://resources/html/load_time_data.html">	13 <link rel="import" href="chrome://resources/html/load_time_data.html">

14 <link rel="import" href="chrome://resources/html/util.html">	14 <link rel="import" href="chrome://resources/html/util.html">

15 <style is="custom-style" include="signin-dialog-shared">	15 <style is="custom-style" include="signin-dialog-shared">

16 .details {	16 .details {

17 line-height: 20px;	17 line-height: 20px;

18 margin-bottom: 8px;

19 margin-left: -8px;	18 margin-left: -8px;
	Dan Beam 2017/01/11 18:56:02 should this be -webkit-margin-start: -8px; so it f should this be -webkit-margin-start: -8px; so it flips to the right side in RTL? or also include margin-right: -8px as well? msarda 2017/01/12 16:11:07 Done. Show quoted text On 2017/01/11 18:56:02, Dan Beam wrote: > should this be -webkit-margin-start: -8px; so it flips to the right side in RTL? > or also include margin-right: -8px as well? Done.
20 padding: 0 24px;	19 padding: 8px 24px 0 24px;

	20 }
	Dan Beam 2017/01/11 18:56:02 this could be expressed more shortly as padding: this could be expressed more shortly as padding: 8px 24px 0; as a reviewer this is nice because this is: top left-and-right bottom which I know is always going to work well in RTL msarda 2017/01/12 16:11:07 Done. Show quoted text On 2017/01/11 18:56:02, Dan Beam wrote: > this could be expressed more shortly as > > padding: 8px 24px 0; > > as a reviewer this is nice because this is: > > top left-and-right bottom > > which I know is always going to work well in RTL Done.
	21

	22 .container {

	23 /* The sign-in confirmation dialog uses a width that is larger than

	24 the other sign-in dialogs to fit cases when the user has an email name

	25 that is very large*/
	Dan Beam 2017/01/11 18:56:02 /* CSS comments * are typically formatted * like /* CSS comments * are typically formatted * like this. / msarda* 2017/01/12 16:11:07 Done. Show quoted text On 2017/01/11 18:56:02, Dan Beam wrote: > /* CSS comments > * are typically formatted > * like this. */ Done.
	26 width: 512px;

	27 }

	28

	29 .radio-button-title-container {

	30 line-height: 20px;

	31 }

	32

	33 .top-title-bar {

	34 color: #333;

	35

	36 /* The signin email confirmation dialog needs to support cases when the

	37 title extends multiple lines. In that case, the height of the title

	38 bar is equal to padding + height of the text (which is equal to

	39 216px + nb_lines 22px).

	40 */

	41 line-height: 22px;

	42 padding: 16px 24px;

	43 height: auto;

21 }	44 }

22	45

23 #closeButton {	46 #closeButton {

24 -webkit-margin-start: 8px;	47 -webkit-margin-start: 8px;

25 }	48 }

26	49

27 <if expr="is_macosx or is_linux">	50 <if expr="is_macosx or is_linux">

28 #closeButton {	51 #closeButton {

29 -webkit-margin-end: 8px;	52 -webkit-margin-end: 8px;

30 -webkit-margin-start: 0;	53 -webkit-margin-start: 0;

31 }	54 }

32 </if>	55 </if>

33 </style>	56 </style>

34 </head>	57 </head>

35 <body>	58 <body>

36 <div class="container">	59 <div class="container">

37 <div class="top-title-bar" id='dialogTitle'>	60 <div class="top-title-bar" id='dialogTitle'>

38 $i18n{signinEmailConfirmationTitle}	61 $i18n{signinEmailConfirmationTitle}

39 </div>	62 </div>

40 <div class="details">	63 <div class="details">

41 <paper-radio-group selected="createNewUser">	64 <paper-radio-group selected="createNewUser">

42 <paper-radio-button id="createNewUserRadioButton"	65 <paper-radio-button id="createNewUserRadioButton"

43 name="createNewUser">	66 name="createNewUser">

44 $i18n{signinEmailConfirmationCreateProfileButtonTitle}	67 <div class="radio-button-title-container"

	68 id="createNewUserRadioButtonTitle">

	69 $i18n{signinEmailConfirmationCreateProfileButtonTitle}

	70 </div>

45 </paper-radio-button>	71 </paper-radio-button>

46 <paper-radio-button id="startSyncRadioButton" name="startSync">	72 <paper-radio-button id="startSyncRadioButton" name="startSync">

47 $i18n{signinEmailConfirmationStartSyncButtonTitle}	73 <div class="radio-button-title-container"

	74 id="startSyncRadioButtonTitle">

	75 $i18n{signinEmailConfirmationStartSyncButtonTitle}

	76 </div>

48 </paper-radio-button>	77 </paper-radio-button>

49 </paper-radio-group>	78 </paper-radio-group>

50 </div>	79 </div>

51 <div class="action-container">	80 <div class="action-container">

52 <paper-button class="primary-action" id="confirmButton">	81 <paper-button class="primary-action" id="confirmButton">

53 $i18n{signinEmailConfirmationConfirmLabel}	82 $i18n{signinEmailConfirmationConfirmLabel}

54 </paper-button>	83 </paper-button>

55 <paper-button class="secondary-action" id="closeButton">	84 <paper-button class="secondary-action" id="closeButton">

56 $i18n{signinEmailConfirmationCloseLabel}	85 $i18n{signinEmailConfirmationCloseLabel}

57 </paper-button>	86 </paper-button>

58 </div>	87 </div>

59 </div>	88 </div>

60 </body>	89 </body>

61 <script src="signin_email_confirmation.js"></script>	90 <script src="signin_email_confirmation.js"></script>

62 <script src="chrome://signin-email-confirmation/strings.js"></script>	91 <script src="chrome://signin-email-confirmation/strings.js"></script>

63 </html>	92 </html>

OLD	NEW