Skip to content
This repository was archived by the owner on Aug 14, 2018. It is now read-only.

Commit 5468331

Browse files
justinribeirojustinribeiro
authored
Merge pull request #163 from GoogleDeveloperExperts/dialog-upds
Break dup css into shared; add hard save to edit; add optype for deta…
2 parents 179290f + b266959 commit 5468331

5 files changed

Lines changed: 544 additions & 895 deletions

File tree

‎src/experts-activities/experts-activity-create.html‎

Lines changed: 11 additions & 253 deletions
Original file line numberDiff line numberDiff line change
@@ -37,86 +37,14 @@
3737
<link rel="import" href="../../bower_components/paper-styles/color.html">
3838
<link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">
3939

40+
<link rel="import" href="./shared-styles-dialog.html">
4041
<link rel="import" href="./experts-activity-link-behavior.html">
4142

42-
<!--
43-
====================================
44-
Shady DOM
45-
====================================
46-
-->
47-
48-
<dom-module
49-
id="experts-activity-create">
43+
<dom-module id="experts-activity-create">
5044
<template>
51-
52-
<!--
53-
====================================
54-
CSS
55-
====================================
56-
-->
57-
<style>
58-
:host {
59-
width : 65vw;
60-
height : 80vh;
61-
border-radius : 2px;
62-
background : white;
63-
transition : box-shadow 0.5s cubic-bezier(.25,.8,.25,1);
64-
box-shadow : 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
65-
font-family : Roboto;
66-
@apply(--layout-vertical);
67-
}
68-
69-
:host:hover {
70-
box-shadow : 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
71-
}
72-
73-
.content {
74-
padding: 15px;
75-
@apply(--layout-flex);
76-
}
77-
#closeCreateActivity {
78-
position : absolute;
79-
justify-content : flex-end;
80-
right : 16px;
81-
top : 16px;
82-
margin : 0;
83-
transition : color 0.5s cubic-bezier(.25,.8,.25,1);
84-
color : #e5e5e5;
85-
}
86-
#closeCreateActivity:hover {
87-
color : #aaa;
88-
}
89-
#continue {
90-
margin : 20px auto 0;
91-
}
92-
h2 {
93-
display : flex;
94-
align-items : center;
95-
color : #4285f4;
96-
font-size : 18px;
97-
font-weight : 500;
98-
margin : 0.5em 0 2em 0;
99-
}
100-
h2 paper-button {
101-
margin: 0;
102-
padding: 0;
103-
}
104-
h2 iron-icon {
105-
margin-right : 10px;
106-
color : #999;
107-
cursor : pointer;
108-
transition : color 0.5s cubic-bezier(.25,.8,.25,1);
109-
--iron-icon-height: 32px;
110-
--iron-icon-width: 32px;
111-
}
112-
h2 paper-button iron-icon {
113-
margin: 0;
114-
}
115-
116-
.iron-selected section {
117-
margin: 0 2em;
118-
}
45+
<style include="shared-styles-dialog">
11946

47+
/* Specific only to this dialog */
12048
#details {
12149
@apply(--layout-vertical);
12250
}
@@ -127,189 +55,21 @@
12755
max-width: 200px;
12856
}
12957
paper-input {
130-
width : 100%;
131-
}
132-
133-
/* the 2px border is for keyboard focus so we don't jump */
134-
paper-button {
135-
font-size : 12px;
136-
margin : 5px;
137-
font-weight : normal !important;
138-
cursor : pointer;
139-
border : 2px solid transparent;
140-
}
141-
.product_groups paper-button[active] {
142-
background-color : #ff9e07;
143-
color : #fff;
144-
margin : 5px;
145-
}
146-
147-
.groups paper-button[active] {
148-
background-color: #34a853 !important;
149-
color: #fff;
150-
margin: 5px;
151-
}
152-
.types paper-button.selected {
153-
background-color: #ff9e07 !important;
154-
color: #fff;
155-
margin: 5px;
156-
}
157-
.item {
158-
margin-top : 15px;
159-
margin-bottom : 15px;
160-
}
161-
162-
.item_name {
163-
color : var(--paper-grey-600);
164-
font-family : 'Roboto', 'Noto', sans-serif;
165-
white-space : nowrap;
166-
overflow : hidden;
167-
text-overflow : ellipsis;
168-
font-size : 12px;
169-
font-weight : 400;
170-
letter-spacing : 0.011em;
171-
line-height : 20px;
172-
}
173-
174-
.item_filter paper-input {
175-
max-width: 50%;
176-
margin-bottom: 1em;
177-
}
178-
179-
.item_value {
180-
@apply(--layout-horizontal);
181-
@apply(--layout-center);
182-
@apply(--layout-wrap);
183-
}
184-
185-
.item_value paper-button {
186-
min-width: 145px;
187-
}
188-
189-
.activityLinkPanel {
190-
min-height : 400px;
191-
}
192-
paper-listbox {
193-
max-height: 300px;
194-
min-width: 180px;
195-
overflow-x: hidden;
196-
}
197-
paper-dropdown-menu {
198-
--paper-dropdown-menu: {
199-
min-width: 200px;
200-
}
201-
--paper-listbox: {
202-
max-height: 300px;
203-
min-width: 180px;
204-
overflow-x: hidden;
205-
};
206-
}
207-
208-
header {
209-
padding: 24px 20px;
210-
}
211-
header h2 {
212-
margin: 0;
213-
width: 90%;
214-
}
215-
216-
footer {
217-
display : flex;
218-
flex-direction : column;
219-
align-items : center;
220-
justify-content : center;
221-
height : 100px;
222-
}
223-
footer paper-button {
224-
color : #fff;
225-
background-color : #4285f4;
226-
border-radius : 2px;
227-
padding : 14px 30px;
228-
font-size : 14px;
229-
230-
}
231-
footer .progress {
232-
display : flex;
233-
flex-direction : row;
234-
justify-content : center;
235-
align-items : center;
236-
height : 48px;
237-
}
238-
footer .progress .indicator {
239-
border-radius : 50%;
240-
width : 8px;
241-
height : 8px;
242-
margin : 0 3px 0;
243-
background-color : #d8d8d8;
244-
}
245-
footer .progress .indicator#first[active] {
246-
background-color : #4285f4;
247-
}
248-
footer .progress .indicator#second[active] {
249-
background-color : #ea4335;
250-
}
251-
footer .progress .indicator#third[active] {
252-
background-color : #fbbc05;
253-
}
254-
footer .progress .indicator#fourth[active] {
255-
background-color : #34a853;
256-
}
257-
258-
.hidden {
259-
display: none;
260-
}
261-
262-
paper-spinner {
263-
margin-right: 1em;
264-
}
265-
266-
.step0-icon {
267-
--iron-icon-fill-color: #4285f4;
268-
}
269-
270-
.keyboard-focus {
271-
border: 2px solid orange;
272-
}
273-
274-
blockquote {
275-
padding: 1em;
276-
border-radius: 5px;
277-
}
278-
279-
blockquote.help {
280-
background-color: #4285f4;
281-
color: #fff;
282-
}
283-
284-
/* On mobile, don't crunch the window */
285-
@media (max-width: 767px) {
286-
:host {
287-
width : 100vw;
288-
height : 100vh;
289-
}
290-
.iron-selected section {
291-
margin: 0 1em;
292-
}
293-
}
294-
58+
width: 100%;
59+
}
29560
</style>
296-
<!--
297-
====================================
298-
HTML
299-
====================================
300-
-->
61+
30162
<header>
30263
<h2>
303-
<iron-icon id="headerIcon" class="step0-icon" icon="add-circle"
304-
on-tap="back"></iron-icon>
64+
<iron-icon id="headerIcon" icon="add-circle" on-tap="back"></iron-icon>
30565
Add an activity
30666
</h2>
307-
<paper-button id="closeCreateActivity" on-tap="cancel">
67+
<paper-button on-tap="cancel">
30868
<iron-icon icon ="close"></iron-icon>
30969
</paper-button>
31070
</header>
31171

312-
<paper-dialog-scrollable class='content'>
72+
<paper-dialog-scrollable>
31373
<iron-pages
31474
id = "ironpages"
31575
selected = "{{_currentStep}}">
@@ -541,13 +301,11 @@ <h2>
541301
</paper-dialog-scrollable>
542302
<footer>
543303
<paper-button
544-
id = "continue"
545304
on-tap = "next"
546305
hidden$ = "{{_lastStep}}">
547306
Continue
548307
</paper-button>
549308
<paper-button
550-
id = "continue"
551309
on-tap = "finish"
552310
hidden$ = "{{!_lastStep}}"
553311
disabled = "{{!_stepDisabled}}">
@@ -563,7 +321,7 @@ <h2>
563321
<div
564322
id = "second"
565323
class = "indicator"
566-
active$ = "{{_isCurrentStep(1,_currentStep)}}">
324+
active$ = "{{_isCurrentStep(1, _currentStep)}}">
567325
</div>
568326
<div
569327
id = "third"

0 commit comments

Comments
 (0)