Project

General

Profile

« Previous | Next » 

Revision 6469b938

Added by Andreas Kohlbecker about 7 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