Project

General

Profile

Revision 59eb4451

ID59eb44519ad430c090af2c13e6cb4296e296cc0b
Parent 3f1ceae0
Child 1ca00ef0

Added by Andreas Kohlbecker over 2 years ago

ref #6169 initial concept fo a workflow view

View differences:

src/main/java/eu/etaxonomy/cdm/vaadin/design/phycobank/RegistrationWorkflowDesign.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.CssLayout;
6
import com.vaadin.ui.VerticalLayout;
7
import com.vaadin.ui.declarative.Design;
8

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

  
23
    public RegistrationWorkflowDesign() {
24
        Design.read(this);
25
    }
26
}
src/main/resources/eu/etaxonomy/cdm/vaadin/design/phycobank/RegistrationWorkflowDesign.html
6 6
  <meta name="vaadin-version" content="7.7.0">
7 7
 </head>
8 8
 <body>
9
  <vaadin-vertical-layout>
9
  <vaadin-vertical-layout spacing>
10 10
   <vaadin-label style-name="huge" size-auto plain-text :center>
11
     New Registration 
11
     Registration of ... 
12 12
   </vaadin-label>
13 13
   <vaadin-label size-auto plain-text :middle :center>
14
     What are you about to register, a scientific name or a typification for a name? 
14
     Advance step by step through the registration workflow for scientific names. 
15 15
   </vaadin-label>
16
   <vaadin-css-layout style-name="dashboard-actions" responsive _id="dashboard" :center>
17
    <vaadin-vertical-layout style-name="dashboard-action-2" spacing size-auto margin>
18
     <vaadin-button icon="fonticon://FontAwesome/f02b" style-name="borderless icon-align-top giant" plain-text _id="buttonNew" :middle :center>
19
       Name 
20
     </vaadin-button>
21
     <vaadin-label size-auto plain-text :center>
22
       Start a new registration of a name scientific name. 
23
     </vaadin-label>
24
    </vaadin-vertical-layout>
25
    <vaadin-vertical-layout style-name="dashboard-action-2" spacing size-auto margin>
26
     <vaadin-button icon="fonticon://FontAwesome/f02c" style-name="borderless icon-align-top giant" plain-text _id="buttonContinue" :middle :center>
27
       Typification 
28
     </vaadin-button>
29
     <vaadin-label size-auto plain-text :center>
30
       Start a new registration of a typification. 
31
     </vaadin-label>
32
    </vaadin-vertical-layout>
16
   <vaadin-css-layout style-name="workflow" responsive _id="workflow" :center>
17
    <vaadin-css-layout style-name="timeline" width-full height="10px">
18
     <vaadin-css-layout style-name="timeline-bar" width-full height="10px"></vaadin-css-layout>
19
    </vaadin-css-layout>
20
    <vaadin-css-layout style-name="steps">
21
     <vaadin-css-layout>
22
      <vaadin-button icon="fonticon://FontAwesome/f111" style-name="borderless" plain-text>
23
        1 
24
      </vaadin-button>
25
      <vaadin-label plain-text>
26
        Edit the scientific name and related names. 
27
      </vaadin-label>
28
     </vaadin-css-layout>
29
     <vaadin-css-layout>
30
      <vaadin-button icon="fonticon://FontAwesome/f111" style-name="borderless" plain-text>
31
        2 
32
      </vaadin-button>
33
      <vaadin-label plain-text>
34
        Label 
35
      </vaadin-label>
36
     </vaadin-css-layout>
37
     <vaadin-css-layout>
38
      <vaadin-button icon="fonticon://FontAwesome/f111" style-name="borderless" plain-text>
39
        3 
40
      </vaadin-button>
41
      <vaadin-label plain-text>
42
        Label 
43
      </vaadin-label>
44
     </vaadin-css-layout>
45
    </vaadin-css-layout>
33 46
   </vaadin-css-layout>
34 47
  </vaadin-vertical-layout>
35 48
 </body>
src/main/webapp/VAADIN/themes/edit-valo/edit-valo.scss
89 89
          }
90 90
      }
91 91
    }
92
    
93
    .workflow {
94
    
95
        $workflow-icon-size: 110px;
96
        // can not be set per css as this need to set as property to the component in vaadin
97
        $workflow-timeline-bar-height: 10px; 
98
        // the fator by which the caption should be smaller than the circe
99
        $workflow-caption-shrink: 0.64; 
100

  
101
        $workflow-icon-margin-h: $workflow-icon-size / 5;
102
        $workflow-icon-left: $workflow-icon-margin-h / 2;
103
        $workflow-caption-font-size: $workflow-icon-size * $workflow-caption-shrink;
104
        
105
        .steps {
106
            z-index: 10;
107
            
108
            .v-button {
109
                margin: 0 $workflow-icon-margin-h;
110
                font-size: $workflow-icon-size;
111
                height: $workflow-icon-size;
112
                width: $workflow-icon-size;
113
                line-height: $workflow-icon-size;
114
            
115
                .v-icon, .v-button-caption {
116
                    position: absolute;
117
                    left: $workflow-icon-left;
118
                    top: 0px;
119
                }
120
                .v-button-caption {
121
                    font-family: monospace;
122
                    left: (($workflow-icon-size - $workflow-caption-font-size) / 2) + $workflow-icon-left; // 30px;
123
                    top: -2px;
124
                    color: $v-background-color;
125
                    font-size: $workflow-caption-font-size; // 70px;
126
                }
127
            }
128
            
129
            .v-csslayout {
130
                width: $workflow-icon-size + 2 * $workflow-icon-margin-h;
131
                .v-label {
132
                    display: block;
133
                    text-align: center;
134
                }
135
            }
136
         }
137
         
138
         .timeline {
139
            display: block;
140
            position: relative;
141
            top: ($workflow-icon-size / 2) + $workflow-timeline-bar-height / 2;
142
            padding: 0 $workflow-icon-size / 2;
143
            .timeline-bar {
144
                z-index: 0;
145
                background-color: $v-font-color;
146
            }
147
        }
148
    }
92 149

  
93 150
}

Also available in: Unified diff

Add picture from clipboard (Maximum size: 40 MB)