zuora_connect_ui 0.1.2 → 0.1.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- 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
|