Skip to content

Commit e64608b

Browse files
diosmosisdiosmosis
authored
redesign marketplace overview (#1402)
* styling more of updated welcome page * start adding most popular features content to welcome page * fill out welcome page and make buttons functional * show notice on plugin upload page if query param is present * complete functionality of new welcome page * use css animation instead of svg animation * add plugin prices * add images to popular feature sections * make welcome page responsive * more responsiveness tweaks * move marketplace welcome page styling to separate file and allow popular features content to be reused * required changes for redesigned license setup page * update some screenshots and fix some tests * try to fix e2e tests * update expected screenshots and increase timeout * another test fixing attempt * debug test failure * another test fix attempt * update screenshots * update expected screenshots * remove ui debugging code * make sure setActiveClass is set to false in activate button event handler * update expected screenshots (new matomo-org plugin released)
1 parent 5d6a39d commit e64608b

134 files changed

Lines changed: 963 additions & 647 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎assets/css/admin-style.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -317,6 +317,10 @@ table.matomo-tracking-form th {
317317
color: #2271b1;
318318
}
319319

320+
.matomo-primary-color-fill {
321+
fill: #2271b1;
322+
}
323+
320324
.matomo-secondary-color-fg {
321325
color: #f6f7f7;
322326
}
@@ -333,6 +337,10 @@ table.matomo-tracking-form th {
333337
color: var(--wp-admin-theme-color, #3858e9);
334338
}
335339

340+
.mtm-wp-gte-7 .matomo-primary-color-fill {
341+
fill: var(--wp-admin-theme-color, #3858e9);
342+
}
343+
336344
.mtm-wp-gte-7 .matomo-secondary-color-fg {
337345
color: white;
338346
}

‎assets/css/marketplace-style.css‎

Lines changed: 251 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,251 @@
1+
#matomo-for-marketplace-welcome {
2+
font-size: 16px;
3+
margin-left: 8px;
4+
}
5+
6+
#matomo-for-marketplace-welcome > h1:first-child {
7+
margin-top: 20px;
8+
}
9+
10+
#matomo-welcome-marketplace-setup {
11+
display: flex;
12+
flex-direction: row;
13+
justify-content: space-between;
14+
align-items: stretch;
15+
padding: 2em 1.5em;
16+
border-radius: 6px;
17+
background-color: white;
18+
margin-top: 2em;
19+
position: relative;
20+
}
21+
22+
.matomo-steps {
23+
display: flex;
24+
flex-direction: row;
25+
justify-content: space-around;
26+
flex: 5;
27+
align-items: stretch;
28+
}
29+
30+
#matomo-setup-preface {
31+
padding-right: 32px;
32+
border-right: solid 2px #eee;
33+
flex: 5;
34+
}
35+
36+
#matomo-setup-preface-title {
37+
margin-top: 0;
38+
display: flex;
39+
flex-direction: row;
40+
align-items: center;
41+
}
42+
43+
#matomo-setup-preface-title h2 {
44+
flex: 1;
45+
margin: 0 0 0 4px;
46+
font-weight: 500;
47+
}
48+
49+
#matomo-setup-preface-title img {
50+
height: 42px;
51+
width: 42px;
52+
margin-left: -6px;
53+
margin-top: -16px;
54+
margin-bottom: -16px;
55+
}
56+
57+
#matomo-for-marketplace-welcome p {
58+
color: #6a6a6a;
59+
font-size: 15px;
60+
}
61+
62+
.matomo-step {
63+
width: 40%;
64+
margin-left: 32px;
65+
display: flex;
66+
flex-direction: column;
67+
}
68+
69+
.matomo-step p {
70+
flex: 1;
71+
}
72+
73+
.matomo-setup-divider {
74+
height: 1px;
75+
width: 100%;
76+
background-color: #eee;
77+
}
78+
79+
#matomo-for-marketplace-welcome p.matomo-smaller-text {
80+
font-size: 13px;
81+
line-height: 1.4em;
82+
}
83+
84+
#matomo-for-marketplace-welcome > p {
85+
margin-top: .25em;
86+
margin-bottom: .5em;
87+
max-width: 700px;
88+
}
89+
90+
.step-number {
91+
margin-right: 8px;
92+
font-size: 14px;
93+
border-radius: 50%;
94+
width: 28px;
95+
height: 28px;
96+
display: inline-flex;
97+
align-items: center;
98+
justify-content: center;
99+
color: white;
100+
}
101+
102+
.step-number:not(.current) {
103+
background-color: #777;
104+
}
105+
106+
.wizard-waiting-for {
107+
display: inline-flex;
108+
flex-direction: row;
109+
align-items: center;
110+
border-radius: 16px;
111+
border: solid 1px #deecfe;
112+
padding: 6px 15px;
113+
font-size: 14px;
114+
visibility: hidden;
115+
}
116+
117+
.wizard-waiting-for.active {
118+
visibility: visible;
119+
}
120+
121+
@keyframes rotate {
122+
from {
123+
transform: rotate(0deg);
124+
}
125+
to {
126+
transform: rotate(360deg);
127+
}
128+
}
129+
130+
.wizard-waiting-for svg {
131+
width: 16px;
132+
height: 16px;
133+
margin-right: 4px;
134+
animation: rotate .75s linear infinite;
135+
}
136+
137+
.matomo-popular-feature {
138+
background-color: white;
139+
border-radius: 6px;
140+
display: flex;
141+
flex-direction: row;
142+
justify-content: space-between;
143+
align-items: stretch;
144+
padding: 1.6em 1.5em;
145+
margin-bottom: 20px;
146+
}
147+
148+
.matomo-popular-feature h3 {
149+
margin: 0;
150+
font-weight: 500;
151+
font-size: 17px;
152+
}
153+
154+
.matomo-popular-feature .description {
155+
flex: 6;
156+
}
157+
158+
.matomo-popular-feature p {
159+
margin-bottom: 0;
160+
max-width: 700px;
161+
}
162+
163+
.matomo-popular-feature > .learn-more {
164+
flex: 1;
165+
display: flex;
166+
align-items: center;
167+
justify-content: center;
168+
}
169+
170+
.matomo-popular-feature .cover-image {
171+
background-repeat: no-repeat;
172+
background-size: contain;
173+
background-position: center;
174+
flex: 3;
175+
}
176+
177+
.matomo-price {
178+
color: indianred;
179+
font-size: 13px;
180+
border-radius: 12px;
181+
background-color: rgba(255, 0, 0, .05);
182+
padding: 4px 8px 3px;
183+
font-weight: bold;
184+
margin-left: 8px;
185+
vertical-align: bottom;
186+
}
187+
188+
@media (max-width: 1278px) {
189+
#matomo-welcome-marketplace-setup {
190+
flex-direction: column;
191+
justify-content: flex-start;
192+
}
193+
194+
#matomo-setup-preface {
195+
border-right: 0px;
196+
}
197+
198+
.matomo-step:first-child {
199+
margin-left: 0;
200+
}
201+
202+
.matomo-step {
203+
width: auto;
204+
}
205+
206+
.matomo-steps {
207+
justify-content: space-between;
208+
}
209+
210+
.matomo-steps {
211+
padding-top: 1em;
212+
padding-bottom: 2em;
213+
border-top: 1px solid #eee;
214+
}
215+
216+
.wizard-waiting-for {
217+
position: absolute;
218+
bottom: 16px;
219+
}
220+
}
221+
222+
@media (max-width: 768px) {
223+
.matomo-popular-feature .cover-image {
224+
display: none;
225+
}
226+
227+
.matomo-steps {
228+
flex-direction: column;
229+
}
230+
231+
.matomo-step:not(:first-child) {
232+
margin-top: 2em;
233+
margin-left: 0;
234+
}
235+
236+
.matomo-price {
237+
display: inline-block;
238+
margin-left: 0;
239+
margin-top: 8px;
240+
}
241+
242+
.matomo-feature-header {
243+
display: flex;
244+
flex-direction: column;
245+
align-items: flex-start;
246+
}
247+
248+
.matomo-popular-feature .description > p {
249+
margin-right: 8px;
250+
}
251+
}

‎assets/img/suggestions/custom-alerts.png‎

Lines changed: 3 additions & 0 deletions
Loading

‎assets/img/suggestions/custom-reports.png‎

Lines changed: 3 additions & 0 deletions
Loading

‎assets/img/suggestions/marketing-campaign-analytics.png‎

Lines changed: 3 additions & 0 deletions
Loading

‎assets/img/suggestions/media-analytics.jpg‎

25.2 KB
Loading

‎assets/js/asset_manager_core_js.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎assets/js/marketplace_setup_wizard.js‎

Lines changed: 30 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,20 +7,36 @@
77
*/
88

99
window.jQuery(document).ready(function ($) {
10-
function pollForPluginActivation() {
11-
$('.wizard-waiting-for').show();
10+
function pollForPluginActivation(setActiveClass) {
11+
if (setActiveClass) {
12+
$('.wizard-waiting-for').addClass('active').find('.waiting-for-install').show();
13+
} else {
14+
$('.wizard-waiting-for').show();
15+
}
1216

1317
var interval = setInterval(function () {
1418
$.post(mtmMarketplaceWizardAjax.ajax_url, {
1519
_ajax_nonce: mtmMarketplaceWizardAjax.is_active_nonce,
1620
action: 'matomo_is_marketplace_active',
1721
}, function (data) {
1822
if (data.active) {
19-
$('.wizard-waiting-for').hide();
23+
if (!setActiveClass) {
24+
$('.wizard-waiting-for').hide();
25+
} else {
26+
$('.wizard-waiting-for .waiting-for-activation').hide();
27+
}
28+
2029
$('.wizard-reloading').show();
2130

22-
window.location.reload();
31+
// reload after the dom has had a chance to update
32+
setTimeout(function () {
33+
window.location.reload();
34+
});
35+
2336
clearInterval(interval);
37+
} else if (data.installed && setActiveClass) {
38+
$('.wizard-waiting-for .waiting-for-install').hide();
39+
$('.wizard-waiting-for .waiting-for-activation').show();
2440
}
2541
});
2642
}, 2000);
@@ -35,11 +51,18 @@ window.jQuery(document).ready(function ($) {
3551
$.post(mtmMarketplaceWizardAjax.ajax_url, {
3652
_ajax_nonce: mtmMarketplaceWizardAjax.activate_nonce,
3753
action: 'matomo_activate_marketplace',
38-
}, pollForPluginActivation);
54+
}, pollForPluginActivation.bind(null, false));
3955
}
4056

4157
if (typeof mtmMarketplaceWizardAjax !== 'undefined' && mtmMarketplaceWizardAjax.ajax_url) {
42-
$('.matomo-marketplace-wizard-body .open-plugin-upload').on('click', pollForPluginActivation);
43-
$('.matomo-marketplace-wizard-body .activate-plugin').on('click', activateMarketplace);
58+
var pollFn = pollForPluginActivation;
59+
var activateFn = activateMarketplace;
60+
if (mtmMarketplaceWizardAjax.is_welcome_page) {
61+
pollFn = pollForPluginActivation.bind(null, true);
62+
activateFn = activateMarketplace.bind(null, true);
63+
}
64+
65+
$('.matomo-marketplace-wizard-body .open-plugin-upload').on('click', pollFn);
66+
$('.matomo-marketplace-wizard-body .activate-plugin').on('click', activateFn);
4467
}
4568
});

‎classes/WpMatomo.php‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -193,7 +193,7 @@ private function get_all_features() {
193193
if ( self::is_safe_mode() ) {
194194
if ( is_admin() ) {
195195
return [
196-
new Admin( self::$settings, false ),
196+
new Admin( self::$settings ),
197197
new \WpMatomo\Admin\SafeModeMenu( self::$settings ),
198198
];
199199
}
@@ -213,6 +213,7 @@ private function get_all_features() {
213213
new Renderer(),
214214
new API(),
215215
new Admin( self::$settings ),
216+
new Menu( self::$settings ),
216217
new Dashboard(),
217218
new SiteSync( self::$settings ),
218219
new UserSync(),

‎classes/WpMatomo/Admin/Admin.php‎

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,25 +23,18 @@ class Admin extends Feature {
2323
*/
2424
private $settings;
2525

26-
private $init_menu;
27-
2826
/**
2927
* @param Settings $settings
3028
*/
31-
public function __construct( $settings, $init_menu = true ) {
32-
$this->settings = $settings;
33-
$this->init_menu = $init_menu;
29+
public function __construct( $settings ) {
30+
$this->settings = $settings;
3431
}
3532

3633
public function is_active() {
3734
return is_admin();
3835
}
3936

4037
public function register_hooks() {
41-
if ( $this->init_menu ) {
42-
new Menu( $this->settings );
43-
}
44-
4538
add_action( 'admin_enqueue_scripts', [ $this, 'load_scripts' ] );
4639
add_filter( 'admin_body_class', [ $this, 'on_admin_body_class' ], 9999 );
4740
}

0 commit comments

Comments
 (0)