Project

General

Profile

« Previous | Next » 

Revision af8569f7

Added by Andreas Kohlbecker about 7 years ago

ref #6169 list view layout improvements and coloring statuses

View differences:

src/main/java/eu/etaxonomy/cdm/vaadin/presenter/phycobank/ListPresenter.java
10 10 

  		




  11
  11
  
    
import java.util.ArrayList;


  		




  12
  12
  
    
import java.util.Collection;


  		




  
  13
  
    
import java.util.List;


  		




  13
  14
  
    
import java.util.UUID;


  		




  14
  15
  
    

  		




  15
  16
  
    
import org.joda.time.DateTime;


  		




  ......




  17
  18
  
    
import com.vaadin.spring.annotation.SpringComponent;


  		




  18
  19
  
    
import com.vaadin.spring.annotation.ViewScope;


  		




  19
  20
  
    

  		




  20
  
  
    
import eu.etaxonomy.cdm.api.service.pager.Pager;


  		




  21
  21
  
    
import eu.etaxonomy.cdm.model.name.TaxonNameBase;


  		




  22
  22
  
    
import eu.etaxonomy.cdm.vaadin.view.phycobank.ListView;


  		




  23
  23
  
    
import eu.etaxonomy.vaadin.mvp.AbstractPresenter;


  		




  ......




  31
  31
  
    
@ViewScope


  		




  32
  32
  
    
public class ListPresenter extends AbstractPresenter<ListView> {


  		




  33
  33
  
    

  		




  34
  
  
    
    private static final int PAGESIZE =20;


  		




  35
  
  
    

  		




  36
  34
  
    
    @Override


  		




  37
  35
  
    
    public void onViewEnter() {


  		




  38
  36
  
    
        super.onViewEnter();


  		




  ......




  43
  41
  
    
     * @return


  		




  44
  42
  
    
     */


  		




  45
  43
  
    
    private Collection<RegistrationDTO> listRegistrations() {


  		




  46
  
  
    
        Pager<TaxonNameBase> pager = getRepo().getNameService().page(TaxonNameBase.class, PAGESIZE, 0, null, null);


  		




  47
  
  
    
        Collection<RegistrationDTO> dtos = new ArrayList<>(pager.getRecords().size());


  		




  48
  
  
    
        pager.getRecords().forEach(i -> { dtos.add(new RegistrationDTO(i)); });


  		




  
  44
  
    
        List<TaxonNameBase> names = getRepo().getNameService().list(TaxonNameBase.class, 500, 0, null, null);


  		




  
  45
  
    
        Collection<RegistrationDTO> dtos = new ArrayList<>(names.size());


  		




  
  46
  
    
        names.forEach(name -> { dtos.add(new RegistrationDTO(name)); });


  		




  49
  47
  
    
        return dtos;


  		




  50
  48
  
    
    }


  		




  51
  49
  
    

  		




  ......




  73
  71
  
    
            registeredEntityUuid = name.getUuid();


  		




  74
  72
  
    

  		




  75
  73
  
    
            registrationType = RegistrationType.name;


  		




  76
  
  
    
            status = RegistrationStatus.preparation;


  		




  
  74
  
    
            status = RegistrationStatus.values()[(int) (Math.random() * RegistrationStatus.values().length)];


  		




  77
  75
  
    
            internalRegId = Integer.toString(ListPresenter.idAutoincrement++);


  		




  78
  76
  
    
            registrationId = "http://pyhcobank.org/" + internalRegId;


  		




  79
  77
  
    
            created = DateTime.now();


  		












  

    
      src/main/java/eu/etaxonomy/cdm/vaadin/view/phycobank/ListViewBean.java
    
  





  21
  21
  
    
import com.vaadin.navigator.View;


  		




  22
  22
  
    
import com.vaadin.navigator.ViewChangeListener.ViewChangeEvent;


  		




  23
  23
  
    
import com.vaadin.server.FontAwesome;


  		




  
  24
  
    
import com.vaadin.shared.ui.grid.HeightMode;


  		




  24
  25
  
    
import com.vaadin.spring.annotation.SpringView;


  		




  25
  26
  
    
import com.vaadin.ui.Alignment;


  		




  26
  27
  
    
import com.vaadin.ui.Grid;


  		




  ......




  95
  96
  
    
    public ListViewBean() {


  		




  96
  97
  
    
        layout = new VerticalLayout();


  		




  97
  98
  
    
        layout.setSpacing(true);


  		




  
  99
  
    
        layout.setSizeFull();


  		




  98
  100
  
    

  		




  99
  101
  
    
        Label title = new Label("Registrations");


  		




  100
  102
  
    
        title.setStyleName(ValoTheme.LABEL_HUGE);


  		




  
  103
  
    
        title.setWidthUndefined();


  		




  101
  104
  
    
        layout.addComponent(title);


  		




  102
  105
  
    
        layout.setComponentAlignment(title, Alignment.TOP_CENTER);


  		




  103
  106
  
    

  		




  104
  107
  
    
        Label hint = new Label("This is the list of all your registrations in progress.");


  		




  
  108
  
    
        hint.setWidthUndefined();


  		




  105
  109
  
    
        layout.addComponent(hint);


  		




  106
  110
  
    
        layout.setComponentAlignment(hint, Alignment.MIDDLE_CENTER);


  		




  107
  111
  
    

  		




  108
  112
  
    
        grid = buildGrid();


  		




  109
  113
  
    
        layout.addComponent(grid);


  		




  
  114
  
    
        layout.setExpandRatio(grid, 1);


  		




  110
  115
  
    

  		




  111
  116
  
    
        setCompositionRoot(layout);


  		




  
  117
  
    
        this.setSizeFull();


  		




  112
  118
  
    
    }


  		




  113
  119
  
    

  		




  114
  120
  
    
    private Grid buildGrid() {


  		




  ......




  118
  124
  
    
        grid.setId("registration-list");


  		




  119
  125
  
    
        grid.setCellStyleGenerator(cellRef -> cellRef.getPropertyId().toString());


  		




  120
  126
  
    
        grid.setSelectionMode(SelectionMode.NONE);


  		




  
  127
  
    
        grid.setHeightMode(HeightMode.CSS);


  		




  121
  128
  
    
        // add status as class  attribute to the rows to allow styling with css


  		




  122
  129
  
    
        grid.setRowStyleGenerator(rowRef -> {return "status-" + rowRef.getItem().getItemProperty("status").getValue().toString();});


  		




  123
  130
  
    
        return grid;


  		












  

    
      src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
    
  





  51
  51
  
    

  		




  52
  52
  
    
@import "../valo/valo.scss";


  		




  53
  53
  
    

  		




  
  54
  
    
// ========================================== //


  		




  
  55
  
    
// Status colors for the redistration


  		




  
  56
  
    
// 


  		




  
  57
  
    
// change-color cant be used since this is not fully supported by the vaadin sass-compiler


  		




  
  58
  
    
// see https://github.com/vaadin/sass-compiler/issues/147


  		




  
  59
  
    
$hue-offset: hue($v-focus-color);


  		




  
  60
  
    
$plain-red: adjust-color($v-focus-color, $hue: -1 * $hue-offset);  // red as 0 degree hue


  		




  
  61
  
    
$status-rejected-color: adjust-color($plain-red, $hue: 0deg);


  		




  
  62
  
    
$status-curation-color: adjust-color($plain-red, $hue: 30deg); 


  		




  
  63
  
    
$status-preparation-color: adjust-color($plain-red, $hue: 60deg); 


  		




  
  64
  
    
$status-published-color: adjust-color($plain-red, $hue: 105deg); 


  		




  
  65
  
    
$status-ready-color: adjust-color($plain-red, $hue: 180deg);


  		




  
  66
  
    
// ========================================== //


  		




  
  67
  
    

  		




  
  68
  
    

  		




  54
  69
  
    
@mixin edit-valo {


  		




  55
  70
  
    
  @include valo;


  		




  56
  71
  
    

  		




  ......




  60
  75
  
    
    font-size: 400%;


  		




  61
  76
  
    
   }


  		




  62
  77
  
    
   


  		




  63
  
  
    
   .v-button-giant { /* using v-slot-* to select the wrapper for the label */


  		




  
  78
  
    
   .v-button-giant {


  		




  64
  79
  
    
     font-size: 32px;


  		




  65
  80
  
    
     .v-icon {


  		




  66
  81
  
    
       font-size: 64px;


  		




  ......




  147
  162
  
    
        }


  		




  148
  163
  
    
    }


  		




  149
  164
  
    
    


  		




  
  165
  
    
    


  		




  
  166
  
    
    


  		




  150
  167
  
    
    #registration-list {


  		




  151
  
  
    
        .status-preparation td.status {


  		




  152
  
  
    
            color: green;


  		




  
  168
  
    
        .status-rejected {


  		




  
  169
  
    
            td.registrationType, td.status {


  		




  
  170
  
    
                color: $status-rejected-color;


  		




  
  171
  
    
            }


  		




  
  172
  
    
        }


  		




  
  173
  
    
        .status-curation {


  		




  
  174
  
    
            td.registrationType, td.status {


  		




  
  175
  
    
                color: $status-curation-color;


  		




  
  176
  
    
            }


  		




  
  177
  
    
        }


  		




  
  178
  
    
        .status-preparation {


  		




  
  179
  
    
            td.registrationType, td.status {


  		




  
  180
  
    
                color: $status-preparation-color;


  		




  
  181
  
    
            }


  		




  
  182
  
    
        }


  		




  
  183
  
    
        .status-published {


  		




  
  184
  
    
            td.registrationType, td.status {


  		




  
  185
  
    
                color: $status-published-color;


  		




  
  186
  
    
            }


  		




  
  187
  
    
        }


  		




  
  188
  
    
        .status-ready {


  		




  
  189
  
    
            td.registrationType, td.status {


  		




  
  190
  
    
                color: $status-ready-color;


  		




  
  191
  
    
            }


  		




  153
  192
  
    
        }


  		




  154
  193
  
    
    }


  		




  155
  194
  
    

  		












Also available in:  Unified diff