Skip to content

Commit 94e1375

Browse files
jpevarnekjpevarnek
committed
Add some global css rules
This works towards the goal of getting rid of some of our absolutely dreadful CSS duplication. Styles that we find ourselves repeatedly applying everywhere we use some elements should be contained in the same place, and we should also be trying to do things with as few rules as possible (e.g. let's pick a default font size and change it, at the highest level possible, only where it needs to be changed). This obviously does not address most of our problems, however, it does create a single file at the global scope that handles colouring paper-buttons teal (or grey) as well as well as changing the colouring for the progress bars we use. Works towards the conveniently opened #1542
1 parent 96e1e8e commit 94e1375

17 files changed

+42
-68
lines changed

‎Gruntfile.coffee‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -360,6 +360,8 @@ module.exports = (grunt) ->
360360
'scripts/background.static.js'
361361
'!**/*spec*'
362362

363+
'generic_ui/style/*.css'
364+
363365
# extra components we use
364366
'generic_ui/fonts/*'
365367
'generic_ui/icons/*'
@@ -443,6 +445,8 @@ module.exports = (grunt) ->
443445
'!data/generic_ui/polymer/vulcanized*inline.html'
444446
'!data/generic_ui/polymer/vulcanized.js' # vulcanized.html uses vulcanized.static.js
445447

448+
'data/generic_ui/style/*.css'
449+
446450
'data/fonts/*'
447451
'data/icons/*'
448452
'data/generic_ui/fonts/*'

‎src/generic_ui/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@
1010

1111
<link rel='import' href='polymer/vulcanized.html'>
1212
<link href='fonts/Roboto.css' rel='stylesheet' type='text/css'>
13+
<link href='style/global.css' rel='stylesheet' shim-shadowdom>
1314

1415
<style>
1516
@font-face {

‎src/generic_ui/polymer/app-bar.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<link rel='import' href='../../bower/polymer/polymer.html'>
2-
<link rel='import' href='../../bower/paper-button/paper-button.html'>
32

43
<polymer-element name='uproxy-app-bar' attributes='disableback' center horizontal layout>
54
<template>

‎src/generic_ui/polymer/bubble.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -62,7 +62,7 @@
6262
#actions {
6363
text-align: right;
6464
}
65-
#done {
65+
paper-button#done {
6666
background-color: #222;
6767
}
6868

‎src/generic_ui/polymer/contact.html‎

Lines changed: 11 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -79,8 +79,6 @@
7979
opacity: 0.5;
8080
}
8181
paper-button {
82-
background: rgb(221, 221, 221);
83-
color: rgb(112, 112, 112);
8482
font-size: 1em;
8583
margin: 14px 5px 5px 2px;
8684
padding-left: 1em;
@@ -98,10 +96,6 @@
9896
core-icon[icon=check] {
9997
color: #009688;
10098
}
101-
.highlightedButton {
102-
background: #009688; /* dark green */
103-
color: white;
104-
}
10599
p.preButtonDetailedText {
106100
margin: 18px 0px 0px 0px;
107101
font-size: 12px;
@@ -175,22 +169,22 @@
175169
</p>
176170
</div>
177171
<p class='preButtonDetailedText'>You will be able to get access when {{ contact.name }} accepts.</p>
178-
<paper-button raised on-tap='{{ cancelRequest }}'>Cancel Request</paper-button>
172+
<paper-button class='grey' raised on-tap='{{ cancelRequest }}'>Cancel Request</paper-button>
179173
</div>
180174

181175
<div hidden?='{{ contact.gettingConsentState != GettingConsentState.REMOTE_OFFERED_LOCAL_NO_ACTION }}'>
182176
<p class='preButtonText'>They've offered you access.</p>
183-
<paper-button class='highlightedButton' raised on-tap='{{ request }}'>Accept Offer</paper-button>
184-
<paper-button class='highlightedButton' raised on-tap='{{ ignoreOffer }}'>Ignore</paper-button>
177+
<paper-button raised on-tap='{{ request }}'>Accept Offer</paper-button>
178+
<paper-button raised on-tap='{{ ignoreOffer }}'>Ignore</paper-button>
185179
</div>
186180

187181
<div hidden?='{{ contact.gettingConsentState != GettingConsentState.REMOTE_OFFERED_LOCAL_IGNORED }}'>
188182
<p class='preButtonText'>They've offered you access.</p>
189-
<paper-button raised on-tap='{{ unignoreOffer }}'>Stop ignoring offers</paper-button>
183+
<paper-button class='grey' raised on-tap='{{ unignoreOffer }}'>Stop ignoring offers</paper-button>
190184
</div>
191185

192186
<div hidden?='{{ contact.gettingConsentState != GettingConsentState.NO_OFFER_OR_REQUEST }}'>
193-
<paper-button raised class='highlightedButton' on-tap='{{ request }}'>
187+
<paper-button raised on-tap='{{ request }}'>
194188
Ask for access
195189
</paper-button>
196190
</div>
@@ -203,11 +197,11 @@
203197

204198
<div hidden?='{{ contact.sharingConsentState != SharingConsentState.LOCAL_OFFERED_REMOTE_ACCEPTED }}'>
205199
<p class='preButtonText'>You've given them access.</p>
206-
<paper-button raised on-tap='{{ cancelOffer }}'>Revoke Access</paper-button>
200+
<paper-button class='grey' raised on-tap='{{ cancelOffer }}'>Revoke Access</paper-button>
207201
</div>
208202

209203
<div hidden?='{{ contact.sharingConsentState != SharingConsentState.LOCAL_OFFERED_REMOTE_NO_ACTION }}'>
210-
<paper-button raised on-tap='{{ cancelOffer }}'>Cancel Offer</paper-button>
204+
<paper-button class='grey' raised on-tap='{{ cancelOffer }}'>Cancel Offer</paper-button>
211205
</div>
212206

213207
<div hidden?='{{ contact.sharingConsentState != SharingConsentState.REMOTE_REQUESTED_LOCAL_NO_ACTION }}'>
@@ -217,18 +211,18 @@
217211
{{ contact.name }} requests access from you.
218212
</p>
219213
</div>
220-
<paper-button raised class='highlightedButton' on-tap='{{ offer }}'>Grant</paper-button>
221-
<paper-button raised class='highlightedButton' on-tap='{{ ignoreRequest }}'>Ignore</paper-button>
214+
<paper-button raised on-tap='{{ offer }}'>Grant</paper-button>
215+
<paper-button raised on-tap='{{ ignoreRequest }}'>Ignore</paper-button>
222216
</div>
223217

224218
<div hidden?='{{ contact.sharingConsentState != SharingConsentState.REMOTE_REQUESTED_LOCAL_IGNORED }}'>
225219
<p class='preButtonText'>They requested access through you.</p>
226-
<paper-button raised on-tap='{{ unignoreRequest }}'>Stop ignoring requests</paper-button>
220+
<paper-button class='grey' raised on-tap='{{ unignoreRequest }}'>Stop ignoring requests</paper-button>
227221
</div>
228222

229223
<div hidden?='{{ contact.sharingConsentState != SharingConsentState.NO_OFFER_OR_REQUEST }}'>
230224
<p class='preButtonText'>You have not granted them access.</p>
231-
<paper-button raised class='highlightedButton' on-tap='{{ offer }}'>Offer Access</paper-button>
225+
<paper-button raised on-tap='{{ offer }}'>Offer Access</paper-button>
232226
</div>
233227
</core-collapse> <!-- end of shareControls -->
234228

‎src/generic_ui/polymer/copypaste.html‎

Lines changed: 2 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -20,14 +20,8 @@
2020
height: 10em;
2121
}
2222
paper-button {
23-
background: #009688; /* dark green */
24-
color: white;
2523
margin-bottom: 24px;
2624
}
27-
paper-button.stop {
28-
background: rgb(221, 221, 221);
29-
color: rgb(112, 112, 112);
30-
}
3125
#getting, #sharing, #nothing {
3226
margin: 24px;
3327
}
@@ -107,7 +101,7 @@
107101
Start getting access
108102
</paper-button>
109103

110-
<paper-button raised class='stop' on-tap='{{ stopGetting }}'
104+
<paper-button raised class='grey' on-tap='{{ stopGetting }}'
111105
hidden?='{{ ui.copyPastePendingEndpoint !== null }}'>
112106
Stop getting access
113107
</paper-button>
@@ -158,7 +152,7 @@
158152
<div class='connected' hidden?='{{ ui.copyPasteSharingState !== SharingState.SHARING_ACCESS }}'>
159153
<p>Success! A one-time connection has been established.</p>
160154

161-
<paper-button raised class='stop' on-tap='{{ stopSharing }}'>Stop sharing access</paper-button>
155+
<paper-button raised class='grey' on-tap='{{ stopSharing }}'>Stop sharing access</paper-button>
162156

163157
<uproxy-bubble active='{{ ui.copyPasteError === ui_constants.CopyPasteError.UNEXPECTED }}' on-closed='{{ dismissError }}' class='error'>
164158
<p>You are currently sharing access.</p>

‎src/generic_ui/polymer/description.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,6 @@
1818
color: rgb(112, 112, 112);
1919
}
2020
paper-button {
21-
background: #009688; /* dark green */
22-
color: white;
2321
width: 70px;
2422
margin-left: 0px;
2523
margin-right: 5px;

‎src/generic_ui/polymer/feedback.html‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
<link rel='import' href='../../bower/polymer/polymer.html'>
2-
<link rel='import' href='../../bower/paper-button/paper-button.html'>
32
<link rel='import' href='../../bower/paper-checkbox/paper-checkbox.html'>
43
<link rel='import' href='../../bower/paper-input/paper-input-decorator.html'>
54
<link rel='import' href='../../bower/paper-input/paper-autogrow-textarea.html'>
@@ -85,11 +84,6 @@
8584
tooltip, it appears off center. */
8685
left: -64px !important;
8786
}
88-
paper-button {
89-
background-color: #009688; /* teal */
90-
color: white;
91-
margin-bottom: 3px;
92-
}
9387
paper-input-decorator[id=emailDecorator] /deep/ .unfocused-underline,
9488
paper-input-decorator[id=emailDecorator] /deep/ .focused-underline,
9589
paper-input-decorator /deep/ .cursor {
@@ -121,9 +115,6 @@
121115
text-align: center;
122116
font-size: 16px;
123117
}
124-
paper-progress::shadow #activeProgress {
125-
background-color: #009688;
126-
}
127118
#feedbackDecorator {
128119
height: 190px;
129120
}

‎src/generic_ui/polymer/instance.html‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,11 @@
99
opacity: 0.5;
1010
}
1111
paper-button {
12-
background: rgb(221, 221, 221);
13-
color: rgb(112, 112, 112);
1412
font-size: 1em;
1513
margin: 14px 5px 5px 2px;
1614
padding-left: 1em;
1715
padding-right: 1em;
1816
}
19-
.highlightedButton {
20-
background: #009688; /* dark green */
21-
color: white;
22-
}
2317
.preButtonText {
2418
margin: 0;
2519
font-size: 14px;
@@ -50,21 +44,21 @@
5044

5145
<!-- not getting or trying to get access -->
5246
<div hidden?='{{ instance.localGettingFromRemote != GettingState.NONE }}'>
53-
<paper-button class='highlightedButton' raised on-tap='{{ start }}'>
47+
<paper-button raised on-tap='{{ start }}'>
5448
Start getting access
5549
</paper-button>
5650
</div>
5751

5852
<!-- trying to get access -->
5953
<div hidden?='{{ instance.localGettingFromRemote != GettingState.TRYING_TO_GET_ACCESS }}'>
60-
<paper-button raised on-tap='{{ stop }}'>
54+
<paper-button class='grey' raised on-tap='{{ stop }}'>
6155
Cancel
6256
</paper-button>
6357
</div>
6458

6559
<!-- currently getting access -->
6660
<div hidden?='{{ instance.localGettingFromRemote != GettingState.GETTING_ACCESS }}'>
67-
<paper-button raised on-tap='{{ stop }}'>
61+
<paper-button class='grey' raised on-tap='{{ stop }}'>
6862
Stop getting access
6963
</paper-button>
7064
</div>

‎src/generic_ui/polymer/network.html‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@
99
box-sizing: border-box;
1010
}
1111
paper-button {
12-
color: white;
1312
width: 150px;
14-
background: #009688; /* default to dark green */
1513
}
1614
paper-button.Google {
1715
background: #dd4b39;

0 commit comments

Comments
 (0)