Project

General

Profile

Revision 6469b938

ID6469b938f726d3df92b658bbb4676930f251de35
Parent 8d1195dc
Child 3f1ceae0

Added by Andreas Kohlbecker over 2 years ago

ref #6169 responsive dashboard

View differences:

src/main/java/eu/etaxonomy/cdm/vaadin/design/phycobank/DashBoardDesign.java
1
package eu.etaxonomy.cdm.vaadin.design.phycobank;
2

  
3
import com.vaadin.annotations.AutoGenerated;
4
import com.vaadin.annotations.DesignRoot;
5
import com.vaadin.ui.Button;
6
import com.vaadin.ui.CssLayout;
7
import com.vaadin.ui.VerticalLayout;
8
import com.vaadin.ui.declarative.Design;
9

  
10
/**
11
 * !! DO NOT EDIT THIS FILE !!
12
 *
13
 * This class is generated by Vaadin Designer and will be overwritten.
14
 *
15
 * Please make a subclass with logic and additional interfaces as needed,
16
 * e.g class LoginView extends LoginDesign implements View { }
17
 */
18
@DesignRoot
19
@AutoGenerated
20
@SuppressWarnings("serial")
21
public class DashBoardDesign extends VerticalLayout {
22
    protected CssLayout dashboard;
23
    protected Button buttonNew;
24
    protected Button buttonConinue;
25
    protected Button buttonList;
26

  
27
    public DashBoardDesign() {
28
        Design.read(this);
29
    }
30
}
src/main/java/eu/etaxonomy/cdm/vaadin/ui/RegistrationUI.java
24 24
import com.vaadin.ui.UI;
25 25
import com.vaadin.ui.themes.ValoTheme;
26 26

  
27
import eu.etaxonomy.cdm.vaadin.view.phycobank.DashBoardView;
27 28
import eu.etaxonomy.cdm.vaadin.view.phycobank.TestView1;
28 29
import eu.etaxonomy.cdm.vaadin.view.phycobank.TestView2;
29 30
import eu.etaxonomy.vaadin.ui.MainMenu;
......
78 79
        eventBus.publishEvent(new UIInitializedEvent());
79 80

  
80 81
        //navigate to initial view
81
        eventBus.publishEvent(new NavigationEvent(TestView1.NAME));
82
        eventBus.publishEvent(new NavigationEvent(DashBoardView.NAME));
82 83
    }
83 84
}
src/main/java/eu/etaxonomy/cdm/vaadin/view/phycobank/DashBoardView.java
1
/**
2
* Copyright (C) 2017 EDIT
3
* European Distributed Institute of Taxonomy
4
* http://www.e-taxonomy.eu
5
*
6
* The contents of this file are subject to the Mozilla Public License Version 1.1
7
* See LICENSE.TXT at the top of this package for the full license terms.
8
*/
9
package eu.etaxonomy.cdm.vaadin.view.phycobank;
10

  
11
import com.vaadin.navigator.View;
12
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;
13
import com.vaadin.server.Responsive;
14
import com.vaadin.spring.annotation.SpringView;
15

  
16
import eu.etaxonomy.cdm.vaadin.design.phycobank.DashBoardDesign;
17

  
18
/**
19
 * @author a.kohlbecker
20
 * @since Mar 2, 2017
21
 *
22
 */
23
@SpringView(name=DashBoardView.NAME)
24
public class DashBoardView extends DashBoardDesign implements View {
25

  
26
    public static final String NAME = "dashboard";
27

  
28
    private static final long serialVersionUID = -6172448806905158782L;
29

  
30
    public DashBoardView() {
31
        Responsive.makeResponsive(dashboard);
32
    }
33

  
34
    /**
35
     * {@inheritDoc}
36
     */
37
    @Override
38
    public void enter(ViewChangeEvent event) {
39
        // TODO Auto-generated method stub
40

  
41
    }
42

  
43
}
src/main/resources/eu/etaxonomy/cdm/vaadin/design/phycobank/DashBoardDesign.html
1
<!doctype html>
2
<html>
3
 <head>
4
  <meta charset="UTF-8">
5
  <meta name="design-properties" content="{&quot;RULERS_VISIBLE&quot;:true,&quot;GUIDELINES_VISIBLE&quot;:false,&quot;SNAP_TO_OBJECTS&quot;:true,&quot;SNAP_TO_GRID&quot;:true,&quot;SNAPPING_DISTANCE&quot;:10,&quot;JAVA_SOURCES_ROOT&quot;:&quot;src/main/java&quot;,&quot;THEME&quot;:&quot;edit-valo&quot;}">
6
  <meta name="vaadin-version" content="7.7.0">
7
 </head>
8
 <body>
9
  <vaadin-vertical-layout>
10
   <vaadin-label style-name="logo_giant" size-auto plain-text :center>
11
     PhycoBank 
12
   </vaadin-label>
13
   <vaadin-label size-auto plain-text :center>
14
     Algal names and typification registry 
15
   </vaadin-label>
16
   <vaadin-css-layout style-name="dashboard-actions" responsive _id="dashboard" :middle :center>
17
    <vaadin-vertical-layout style-name="dashboard-action-3" spacing size-auto margin>
18
     <vaadin-button icon="fonticon://FontAwesome/f044" style-name="borderless icon-align-top giant" plain-text _id="buttonNew" :middle :center>
19
       New 
20
     </vaadin-button>
21
     <vaadin-label size-auto plain-text :center>
22
       Start a new registration process either for a name or typification. 
23
     </vaadin-label>
24
    </vaadin-vertical-layout>
25
    <vaadin-vertical-layout style-name="dashboard-action-3" spacing size-auto margin>
26
     <vaadin-button icon="fonticon://FontAwesome/f061" style-name="borderless icon-align-top giant" plain-text _id="buttonConinue" :middle :center>
27
       Continue 
28
     </vaadin-button>
29
     <vaadin-label size-auto plain-text :center>
30
       Continue or review registrations in process. 
31
     </vaadin-label>
32
    </vaadin-vertical-layout>
33
    <vaadin-vertical-layout style-name="dashboard-action-3" spacing size-auto margin>
34
     <vaadin-button icon="fonticon://FontAwesome/f0ae" style-name="borderless icon-align-top giant" plain-text _id="buttonList" :middle :center>
35
       List 
36
     </vaadin-button>
37
     <vaadin-label size-auto plain-text :center>
38
       List all your registrations either completed or in progress. 
39
     </vaadin-label>
40
    </vaadin-vertical-layout>
41
   </vaadin-css-layout>
42
  </vaadin-vertical-layout>
43
 </body>
44
</html>
src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
56 56

  
57 57
  // Insert your own theme rules here
58 58
  
59
  // ----- Banner and Logo  ------
60
  $banner-height:  60px;
61
  
62
  .logo {
63
    font-weight: bold;
64
    font-size: 1.5em;
65
    color: #0E9B06;
66
    height: $banner-height;
67
  }
68
  
69
  .banner {
70
    height: $banner-height;
71
  }
72
  
59
  .logo_giant {
60
    font-size: 400%;
61
   }
62
   
63
   .v-button-giant { /* using v-slot-* to select the wrapper for the label */
64
     font-size: 32px;
65
     .v-icon {
66
       font-size: 64px;
67
       line-height: 50px;
68
     }
69
   }
70
   
71
   .dashboard-actions {
72
      margin: 0 10%;
73
    
74
      .dashboard-action-3 {
75
        width: 33%;
76
        .v-label {
77
            white-space: normal;
78
        }
79
      }
80
      &[width-range~="-650px"] {
81
          .dashboard-action-3 {
82
              width: 100%;
83
          }
84
      }
85
    }
73 86

  
74 87
}

Also available in: Unified diff

Add picture from clipboard (Maximum size: 40 MB)