zuora_connect_ui 0.1.2 → 0.1.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +202 -15
- data/app/assets/stylesheets/zuora_connect_ui/buttons.scss +21 -16
- data/lib/zuora_connect_ui/version.rb +1 -1
- metadata +2 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 988b46a34d2fb1c3d0b17609dc48b6292c68ea57
|
|
4
|
+
data.tar.gz: f26cddc4157a631b57b326eb506edc5ac1c98da2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: b97425b74767b75af6da944bdca2699baa7b1a660a8b04f3d934a02e39b598add2743cd10230d8be43633989b5aaaf6d82e1b8979d92f3fc642488a235865f81
|
|
7
|
+
data.tar.gz: ae311d0c8b65a88c31e6c47ceac464a6d93cf340a2912ea5194cc3a8d3eed8922b2ef06f8f57eca28a11a2389af23c90f622e34655996d03a19d6c596574f32b
|
data/README.md
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
#
|
|
2
|
-
|
|
3
|
-
Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/zuora_connect_ui`. To experiment with that code, run `bin/console` for an interactive prompt.
|
|
4
|
-
|
|
5
|
-
TODO: Delete this and the text above, and describe your gem
|
|
1
|
+
# Zuora Connect UI
|
|
6
2
|
|
|
7
3
|
## Installation
|
|
8
4
|
|
|
@@ -13,26 +9,217 @@ gem 'zuora_connect_ui'
|
|
|
13
9
|
```
|
|
14
10
|
|
|
15
11
|
And then execute:
|
|
16
|
-
|
|
17
|
-
|
|
12
|
+
```shell
|
|
13
|
+
$ bundle
|
|
14
|
+
```
|
|
18
15
|
|
|
19
16
|
Or install it yourself as:
|
|
20
|
-
|
|
21
|
-
|
|
17
|
+
```shell
|
|
18
|
+
$ gem install zuora_connect_ui
|
|
19
|
+
```
|
|
22
20
|
|
|
23
21
|
## Usage
|
|
24
22
|
|
|
25
|
-
|
|
23
|
+
### HTML Imports
|
|
24
|
+
|
|
25
|
+
Add to the end of `<head>` in `app/views/layouts/application.html.erb` (or the root layout of your app)
|
|
26
|
+
```html
|
|
27
|
+
<head>
|
|
28
|
+
...
|
|
29
|
+
<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">
|
|
30
|
+
<link href="https://d3ntcvh9ql14ma.cloudfront.net/zui/1.4.0/css/zui.icons.css" rel="stylesheet">
|
|
31
|
+
</head>
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
### SCSS Imports
|
|
35
|
+
|
|
36
|
+
Add to `app/assets/stylesheets/application.scss`
|
|
37
|
+
```scss
|
|
38
|
+
//************ Peek ************
|
|
39
|
+
@import "peek";
|
|
40
|
+
@import "peek/views/performance_bar";
|
|
41
|
+
@import "peek/vendor/tipsy";
|
|
42
|
+
|
|
43
|
+
@import "zuora_connect_ui";
|
|
44
|
+
```
|
|
45
|
+
|
|
46
|
+
Any style you create for your app should be imported below this
|
|
47
|
+
|
|
48
|
+
### Javascript Imports
|
|
49
|
+
|
|
50
|
+
Add to `app/assets/javascripts/application.js`
|
|
51
|
+
```javascript
|
|
52
|
+
//************** Peek ****************
|
|
53
|
+
//= require peek
|
|
54
|
+
//= require peek/views/performance_bar
|
|
55
|
+
//
|
|
56
|
+
//= require zuora_connect_ui
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
Any scripts you create for your app should be imported below this
|
|
60
|
+
|
|
61
|
+
## Layout
|
|
62
|
+
|
|
63
|
+
### Admin Button
|
|
64
|
+
|
|
65
|
+
Partial: `partials/admin_menu`
|
|
66
|
+
|
|
67
|
+
```erb
|
|
68
|
+
<div id="breadcrumb-bar">
|
|
69
|
+
<div id='breadcrumbs'>
|
|
70
|
+
<%= yield :breadcrumbs %>
|
|
71
|
+
</div>
|
|
72
|
+
<%= render 'partials/admin_menu', peek_bar: true do %>
|
|
73
|
+
<li><a href="/admin/resque_web">Resque Web</a></li>
|
|
74
|
+
<li><a href="/admin/redis-browser" target="_blank">Redis Web</a></li>
|
|
75
|
+
<li><%= link_to 'App Instances', admin_app_instances_path %></li>
|
|
76
|
+
<% end %>
|
|
77
|
+
</div>
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Additional links can be added by putting `<li>` tags in the block
|
|
81
|
+
|
|
82
|
+
If you added Peek, you can enable it by passing `peek_bar: true` to the partial
|
|
83
|
+
|
|
84
|
+
### Row Actions Dropdown Menu
|
|
85
|
+
|
|
86
|
+
Partial: `partials/row_actions'
|
|
87
|
+
|
|
88
|
+
```erb
|
|
89
|
+
<%= render 'shared/row_actions' do %>
|
|
90
|
+
<li>
|
|
91
|
+
<%= link_to 'Show', page, remote: true, data: { toggle: 'modal', target: '#z_hub_modal' } %>
|
|
92
|
+
</li>
|
|
93
|
+
<li>
|
|
94
|
+
<%= link_to 'Edit', edit_page_path(page), remote: true, data: { toggle: 'modal', target: '#z_hub_modal' } %>
|
|
95
|
+
</li>
|
|
96
|
+
<li class='divider'></li>
|
|
97
|
+
<li>
|
|
98
|
+
<%= link_to 'Delete', page, :remote => true, method: :delete, data: { confirm: 'Are you sure?' } %>
|
|
99
|
+
</li>
|
|
100
|
+
<% end %>
|
|
101
|
+
```
|
|
102
|
+
|
|
103
|
+
## Components
|
|
104
|
+
|
|
105
|
+
Component's labels must come directly after their input, and have `for` html attribute corresponding to their input.
|
|
106
|
+
|
|
107
|
+
### Textbox and Text Area
|
|
108
|
+
|
|
109
|
+
Textbox
|
|
110
|
+
```erb
|
|
111
|
+
<%= f.text_field :name, class: 'zuo-textbox' %>
|
|
112
|
+
<%= f.label :name, class: zuo_floating_label_class(@page.name) %>
|
|
113
|
+
```
|
|
114
|
+
|
|
115
|
+
Text Area
|
|
116
|
+
|
|
117
|
+
```erb
|
|
118
|
+
<%= f.text_area :description, class: 'zuo-textbox' %>
|
|
119
|
+
<%= f.label :description, class: zuo_floating_label_class(@page.description) %>
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
Label must come directly after input, and have `for` html attribute corresponding to input.
|
|
123
|
+
|
|
124
|
+
`zuo_floating_label_class` sets the initial floating state of the label. If the value passed in is not empty, then the label will start with the `floating` class.
|
|
125
|
+
|
|
126
|
+
### Buttons
|
|
127
|
+
|
|
128
|
+
```erb
|
|
129
|
+
<%= link_to "Cancel", "#", class: "zuo-btn secondary", data: {dismiss: "modal"} %>
|
|
130
|
+
<%= f.submit f.object.new_record? ? "Create" : "Update", class: "zuo-btn primary" %>
|
|
131
|
+
```
|
|
132
|
+
|
|
133
|
+
`<div>`, `<button>`, and `<a>` tags can all be buttons.
|
|
134
|
+
|
|
135
|
+
The style of the buttons can be changed with an additional class
|
|
136
|
+
|
|
137
|
+
| Class | Style
|
|
138
|
+
|--- |---
|
|
139
|
+
| `primary` | Solid blue, white text. Use for the primary action.
|
|
140
|
+
| `secondary` | Solid white, blue outline and text. Use for a secondary action.
|
|
141
|
+
| `danger` | Solid white, red outlne and text. Use for destructive actions.
|
|
142
|
+
| `disabled` | Greyed out. Use when button is disabled (usually done programmatically)
|
|
143
|
+
|
|
144
|
+
### Select
|
|
145
|
+
|
|
146
|
+
Single Select
|
|
147
|
+
```erb
|
|
148
|
+
<%= f.select(:type, [['Plaintext'], ['HTML', 'Html'], ['CSS','Css'], ['Javascript'], ['Image'], ['Video']], prompt: '') %>
|
|
149
|
+
<%= f.label :type, class: zuo_floating_label_class(@page.type) %>
|
|
150
|
+
|
|
151
|
+
...
|
|
152
|
+
|
|
153
|
+
<% content_for :scripts do %>
|
|
154
|
+
$('#page_type').select2({
|
|
155
|
+
theme: 'bootstrap',
|
|
156
|
+
minimumResultsForSearch: Infinity,
|
|
157
|
+
dropdownAutoWidth: true,
|
|
158
|
+
width: '100%',
|
|
159
|
+
placeholder: '',
|
|
160
|
+
});
|
|
161
|
+
<% end %>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
Multiple Select
|
|
165
|
+
|
|
166
|
+
```erb
|
|
167
|
+
<%= f.collection_select(:page_ids, Page.all, :id, :name, { prompt: false }, { multiple: true }) %>
|
|
168
|
+
<%= f.label :page_ids, class: zuo_floating_label_class(@chapter.page_ids)%>
|
|
169
|
+
|
|
170
|
+
...
|
|
171
|
+
|
|
172
|
+
<% content_for :scripts do %>
|
|
173
|
+
$('#chapter_page_ids').select2({
|
|
174
|
+
theme: 'bootstrap',
|
|
175
|
+
minimumResultsForSearch: Infinity,
|
|
176
|
+
dropdownAutoWidth: true,
|
|
177
|
+
width: '100%',
|
|
178
|
+
placeholder: '',
|
|
179
|
+
});
|
|
180
|
+
<% end %>
|
|
181
|
+
```
|
|
182
|
+
|
|
183
|
+
#### Select2 Options
|
|
184
|
+
|
|
185
|
+
| Option | Values
|
|
186
|
+
|--- |---
|
|
187
|
+
| minimumResultsForSearch | Integer (`-1` or `Infinity` to disable search)
|
|
188
|
+
| theme | must be `'bootstrap'`
|
|
189
|
+
| dropdownAutoWidth | must be `true`
|
|
190
|
+
| width | must be `'100%'`
|
|
191
|
+
| placeholder | must be `''` (the label is the placeholder)
|
|
26
192
|
|
|
27
|
-
|
|
193
|
+
### Checkbox
|
|
28
194
|
|
|
29
|
-
|
|
195
|
+
Label does not need the `for` html attribute, however the `div.checkbox` is required
|
|
196
|
+
|
|
197
|
+
```erb
|
|
198
|
+
<div class='checkbox'>
|
|
199
|
+
<%= f.check_box :enabled, { checked: @currently_enabled[chapter.id]}, chapter.id, false %>
|
|
200
|
+
<label><%= chapter.name %></label>
|
|
201
|
+
</div>
|
|
202
|
+
```
|
|
203
|
+
|
|
204
|
+
### Radio Button
|
|
205
|
+
|
|
206
|
+
Label does not need the `for` html attribute, however the `div.radio` is required
|
|
207
|
+
|
|
208
|
+
```erb
|
|
209
|
+
<div class='radio'>
|
|
210
|
+
<%= f.radio_button :toggle %>
|
|
211
|
+
<label>Radio Button</label>
|
|
212
|
+
</div>
|
|
213
|
+
```
|
|
30
214
|
|
|
31
|
-
To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
|
|
32
215
|
|
|
33
|
-
|
|
216
|
+
### File Upload
|
|
217
|
+
|
|
218
|
+
```erb
|
|
219
|
+
<%= f.file_field :file %>
|
|
220
|
+
<%= f.label :file, 'Upload File', class: 'zuo-btn secondary' %>
|
|
221
|
+
```
|
|
34
222
|
|
|
35
|
-
Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/zuora_connect_ui.
|
|
36
223
|
|
|
37
224
|
## License
|
|
38
225
|
|
|
@@ -18,17 +18,13 @@
|
|
|
18
18
|
color: $neutral-4;
|
|
19
19
|
background-color: $support-1;
|
|
20
20
|
border: 1px solid $support-1;
|
|
21
|
-
transition: color
|
|
22
|
-
.15s ease-in-out,background-color
|
|
23
|
-
.15s ease-in-out,border-color
|
|
24
|
-
.15s ease-in-out,box-shadow
|
|
21
|
+
transition: color
|
|
22
|
+
.15s ease-in-out,background-color
|
|
23
|
+
.15s ease-in-out,border-color
|
|
24
|
+
.15s ease-in-out,box-shadow
|
|
25
25
|
.15s ease-in-out;
|
|
26
|
-
&:hover
|
|
27
|
-
|
|
28
|
-
background-color: $primary-hover;
|
|
29
|
-
border: 1px solid $primary-hover;
|
|
30
|
-
}
|
|
31
|
-
&:focus {
|
|
26
|
+
&:hover:not(.disabled):not(:disabled),
|
|
27
|
+
&:focus:not(.disabled):not(:disabled) {
|
|
32
28
|
color: $neutral-4;
|
|
33
29
|
background-color: $primary-hover;
|
|
34
30
|
border: 1px solid $primary-hover;
|
|
@@ -41,18 +37,18 @@
|
|
|
41
37
|
border: 1px solid $support-1;
|
|
42
38
|
color: $support-1;
|
|
43
39
|
}
|
|
44
|
-
/*disabled btn*/
|
|
45
|
-
&.disabled {
|
|
46
|
-
cursor: not-allowed;
|
|
47
|
-
background-color: $disabled-btn-bg;
|
|
48
|
-
color: $neutral-shadow;
|
|
49
|
-
}
|
|
50
40
|
/*danger button*/
|
|
51
41
|
&.danger {
|
|
52
42
|
border: 1px solid $support-4;
|
|
53
43
|
background-color: $neutral-4;
|
|
54
44
|
color: $support-4;
|
|
55
45
|
}
|
|
46
|
+
/*disabled btn*/
|
|
47
|
+
&.disabled,
|
|
48
|
+
&:disabled {
|
|
49
|
+
opacity: .65;
|
|
50
|
+
cursor: not-allowed;
|
|
51
|
+
}
|
|
56
52
|
}
|
|
57
53
|
|
|
58
54
|
.table-btn {
|
|
@@ -129,6 +125,15 @@ a.btn-clear {
|
|
|
129
125
|
.btn-clear + .tooltip > .tooltip-inner {background-color: white; border:1px solid; ;border-color:white; color:#394B5D;}
|
|
130
126
|
.btn-clear + .tooltip > .tooltip-arrow {border-bottom-color: white;}
|
|
131
127
|
|
|
128
|
+
a.back_buttons{
|
|
129
|
+
float:right;
|
|
130
|
+
i {
|
|
131
|
+
padding-right:2px;
|
|
132
|
+
}
|
|
133
|
+
&:hover, &:focus {
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
|
|
132
137
|
.btn-arrow-right, .btn-arrow-left {
|
|
133
138
|
position: relative;
|
|
134
139
|
padding-left: 18px;
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: zuora_connect_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.1.
|
|
4
|
+
version: 0.1.3
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Connect Team
|
|
8
8
|
autorequire:
|
|
9
9
|
bindir: bin
|
|
10
10
|
cert_chain: []
|
|
11
|
-
date: 2018-08-
|
|
11
|
+
date: 2018-08-03 00:00:00.000000000 Z
|
|
12
12
|
dependencies:
|
|
13
13
|
- !ruby/object:Gem::Dependency
|
|
14
14
|
name: bootstrap-sass
|