Changeset 153

Show
Ignore:
Timestamp:
20-09-11 15:38:40 (3 years ago)
Author:
kostas.karasavvas@…
Message:

Improved the UI (added logos, tooltips, changed colours).

Location:
t2-web/trunk
Files:
6 added
9 modified

Legend:

Unmodified
Added
Removed
  • t2-web/trunk/bin/t2_webapp.rb

    r149 r153  
    44require 'sinatra' 
    55require 'haml' 
    6 require 'rest-open-uri' 
     6#require 'rest-open-uri'   this seems redundant after adding require 'open-uri' to myexperiment-rest!!! 
    77require 'rest-client' 
    88require 't2-server' 
     
    6060    # Generates the contents of the header frame 
    6161    def generate_header_frame(my_exp_wkf) 
    62       "<html>" << 
    63          "<head><link href='/css/results_header.css' rel='stylesheet'/></head>" << 
    64          "<body><table class='header'>" << 
    65            "<tr><td class='header'>Workflow: #{my_exp_wkf.title}</td></tr>" << 
    66          "</table></body>" << 
    67       "</html>" 
     62      <<END 
     63<html> 
     64  <head><link href='/css/form.css' rel='stylesheet'/></head> 
     65  <body> 
     66    #{generate_header_table(my_exp_wkf)} 
     67  </body> 
     68</html> 
     69END 
     70    end 
     71 
     72     
     73    # Generates the contents of the header frame 
     74    def generate_header_table(my_exp_wkf) 
     75      <<END 
     76    <div id='header'> 
     77      <table class='header'> 
     78        <tr> 
     79          <td> 
     80            <img alt='NBIC logo' src='/images/nbic_logo.gif' /> 
     81          </td> 
     82          <td> 
     83            <table class='header-title'> 
     84              <tr> 
     85                <td class='header-title'>Workflow: #{@my_exp_wkf.title}</td> 
     86              </tr> 
     87              <tr> 
     88                <td class='right'>workflow by #{@my_exp_wkf.user.name}</td> 
     89 
     90              </tr> 
     91            </table> 
     92          </td> 
     93          <td> 
     94            <img alt='LUMC logo' class='right' src='/images/lumc_logo2.png' /> 
     95          </td> 
     96        </tr> 
     97      </table> 
     98    </div> 
     99END 
     100    end 
     101 
     102 
     103    # Generates tooltip html text for descriptions 
     104    def generate_label_tooltip(input) 
     105      "Description: " << CGI::unescapeHTML(input.descriptions[0]) 
     106    end 
     107 
     108    # Generates tooltip html text for textarea example 
     109    def generate_textarea_tooltip(input) 
     110      "Example: " << CGI::unescapeHTML(input.examples[0]) 
    68111    end 
    69112 
  • t2-web/trunk/CHANGES

    r146 r153  
    11= Changes log for the Taverna via the Web Gem 
    22 
     3== Version 0.0.4 
     4* Improved the UI (added logos, tooltips, changed colours). 
     5* Made some code abstractions 
     6 
    37== Version 0.0.3 
    4 * Improved the UI. 
    5 * Changed divs with frames. 
     8* Improved the UI (changed divs with frames). 
    69 
    710== Version 0.0.2 
  • t2-web/trunk/public/css/form.css

    r143 r153  
    11body{ 
    2     background-color: mintcream; 
     2    background-color: #fdfdfd; 
    33} 
    44 
    55table.header { 
     6  width: 100%; 
     7} 
     8 
     9table.header-title { 
    610  border-collapse: collapse; 
    711  /* With equal left-right margins table will be aligned in the centre */ 
     
    1014} 
    1115 
    12 td.header { 
     16td.header-title { 
    1317  font-size: 200%; 
    14   background-color: #e8edff; 
     18  background-color: #f0f0f0; 
    1519  padding: 12px; 
    16   border-bottom: 4px solid #aabcfe; 
    17   border-top: 4px solid #aabcfe; 
     20  border-bottom: 4px solid #909090; 
     21  border-top: 4px solid #909090; 
    1822} 
    1923 
     
    2428  width: 800px; 
    2529  border-collapse: collapse; 
     30  /* With equal left-right margins table will be aligned in the centre */ 
    2631  margin-left: auto; 
    2732  margin-right: auto; 
     
    3035th.inputs { 
    3136  font-size: 120%; 
    32   background-color: #e8edff; 
     37  background-color: #f0f0f0; 
    3338  padding: 10px; 
    34   border-bottom: 1px solid #fff; 
    35   border-top: 4px solid #aabcfe; 
     39  border-bottom: 1px solid #909090; 
     40  border-top: 4px solid #909090; 
    3641} 
    3742 
    3843td.inputs { 
    3944  padding: 5px; 
     45  vertical-align: top; 
     46} 
     47 
     48td.right { 
     49  text-align: right; 
     50} 
     51 
     52img.right { 
     53  float: right; 
    4054} 
    4155 
     
    5266} 
    5367 
     68label { 
     69  text-decoration: underline; 
     70} 
  • t2-web/trunk/public/css/results_header.css

    r143 r153  
     1/* This is actually not used since the header formatting of form.css is used! 
     2   That could also happen for results_navigation.css but for now we leave it 
     3   since the UI may change.. 
     4*/ 
     5 
    16body { 
    2   background-color: mintcream; 
     7  background-color: #fdfdfd; 
    38} 
    49 
     
    1217td.header { 
    1318  font-size: 200%; 
    14   background-color: #e8edff; 
     19  background-color: #f0f0f0; 
    1520  padding: 12px; 
    16   border-bottom: 4px solid #aabcfe; 
    17   border-top: 4px solid #aabcfe; 
     21  border-bottom: 4px solid #909090; 
     22  border-top: 4px solid #909090; 
    1823} 
  • t2-web/trunk/public/css/results_navigation.css

    r143 r153  
    11body{ 
    2   background-color: mintcream; 
     2  background-color: #fdfdfd; 
    33} 
    44 
     
    1313  background-color: #e8edff; 
    1414  padding: 12px; 
    15   border-bottom: 1px solid #fff; 
    16   border-top: 4px solid #aabcfe; 
     15  border-bottom: 1px solid #909090; 
     16  border-top: 4px solid #909090; 
    1717} 
  • t2-web/trunk/public/scripts/form.js

    r115 r153  
    55  $('div[id$="-manual-group"]').hide(); 
    66  initialisePlaceholder(); 
     7  // initialise tooltips using tipsy 
     8  initialiseTipsys(); 
    79}); 
    810 
     11// place proper div in input placeholder 
    912function initialisePlaceholder() { 
    1013  //var inputArray = new Array(); 
     
    2427    $('#' + input + '-placeholder').html($('#' + input + '-manual-group').html()); 
    2528  } 
     29  // need to re-initialise tooltips when we replace divs 
     30  initialiseTipsys(); 
    2631 
    2732} 
    2833 
     34// files are appended as hidden inputs so that we know them after form submission 
    2935function uploadFile(input) { 
    3036  // get the filename from this input's upload-form 
     
    4046 
    4147} 
     48 
     49// initilises certain html elements to employ tipsy for their tooltips 
     50function initialiseTipsys() { 
     51  $('[name$="-input"]').tipsy({gravity: 'e', fade: true, html: true, fallback: "No available example"}); 
     52  $('[for$="-label"]').tipsy({gravity: 'e', fade: true, html: true, fallback: "No available description"}); 
     53  //$('[name$="-input"]').tooltip(); 
     54 
     55} 
     56 
  • t2-web/trunk/Rakefile

    r147 r153  
    1313spec = Gem::Specification.new do |s| 
    1414  s.name = 't2-web' 
    15   s.version = '0.0.3' 
     15  s.version = '0.0.4' 
    1616  s.extra_rdoc_files = ['README', 'LICENSE', 'CHANGES'] 
    1717  s.summary = 'WS (with libs) that generates a Web UI form for a Taverna2 workflow and then enacts it to a T2 server.' 
     
    2323  s.require_path = "lib" 
    2424  s.bindir = "bin" 
     25  s.add_dependency 'sinatra', '~> 1.2.6' 
     26  s.add_dependency 'haml', '~> 3.1.2' 
     27  s.add_dependency 'rest-client', '~> 1.6.3' 
     28  s.add_dependency 't2-server', '~> 0.6.1' 
     29  s.add_dependency 'myexperiment-rest', '~> 0.2.8' 
    2530end 
    2631 
  • t2-web/trunk/views/form.haml

    r150 r153  
    44    %title Workflow: #{@my_exp_wkf.title} 
    55    %link(rel="stylesheet" href="/css/form.css") 
     6    %link(rel="stylesheet" href="/css/tipsy.css") 
    67    %script{:type => "text/javascript", :src => "/scripts/jquery-1.6.1.js"} 
     8    %script{:type => "text/javascript", :src => "/scripts/jquery.tipsy.js"} 
    79    %script{:type => "text/javascript", :src => "/scripts/form.js"} 
    810 
    911  %body 
    1012 
    11     #header 
     13    = generate_header_table(@my_exp_wkf) 
     14 
     15    -# TODO: should move coding to controller and not use haml's "-" for logic inside the template!!! 
     16    -#header 
    1217      %table.header 
    1318        %tr 
    14           %td.header Workflow: #{@my_exp_wkf.title} 
     19          %td 
     20            %img{:src => "/images/nbic_logo.gif", :alt => "NBIC logo"} 
     21          %td 
     22            %table.header-title 
     23              %tr 
     24                %td.header-title Workflow: #{@my_exp_wkf.title} 
     25              - if #{@my_exp_wkf.user.name} 
     26                %tr 
     27                  %td.right workflow by #{@my_exp_wkf.user.name} 
     28          %td 
     29            %img.right{:src => "/images/lumc_logo2.png", :alt => "LUMC logo"} 
    1530 
    1631    %br 
     
    3853      - if @my_exp_wkf.inputs.size >=1 
    3954        - @my_exp_wkf.inputs.each do |input| 
    40           - input_label_tooltip = "" 
     55          -# TODO: make helper create_input_tooltip(input) to return proper tooltip html string!!! 
    4156          - if input.descriptions.size >=1 
    42             - input.descriptions.each do |descr| 
    43               - input_label_tooltip << CGI::unescapeHTML(descr) + " " 
     57            - input_label_tooltip = generate_label_tooltip(input) 
    4458          - input_textarea_tooltip = "" 
    4559          - if input.examples.size >=1 
    46             - input.examples.each do |ex| 
    47               - input_textarea_tooltip << CGI::unescapeHTML(ex) + " " 
     60            - input_textarea_tooltip = generate_textarea_tooltip(input) 
    4861          %div{:id => "#{input.name}-upload-form-div"} 
    4962            %form{:id => "#{input.name}-upload-form", :enctype => "multipart/form-data", :target => "hidden-iframe", :action => "/t2web/upload", :method => "post"} 
    50               %label{:for => "#{input.name}-upload-label", :class => "tooltip", :title => "#{input_label_tooltip}"} Select file for #{input.name} 
     63              %label{:for => "#{input.name}-upload-label", :title => "#{input_label_tooltip}"} Select file for #{input.name} 
    5164              %input{:type => "file", :name => "file", :onchange => "uploadFile('#{input.name}')"} 
    5265          %div{:id => "#{input.name}-manual-group"} 
    53             %label{:for => "#{input.name}-label", :class => "tooltip", :title => "#{input_label_tooltip}"} Enter #{input.name}: 
     66            %label{:for => "#{input.name}-label", :title => "#{input_label_tooltip}"} Enter #{input.name}: 
    5467            %br 
    55             %textarea{:name => "#{input.name}-input", :rows => 3, :cols => 50, :class => "tooltip", :title => "#{input_textarea_tooltip}"} 
     68            %textarea{:name => "#{input.name}-input", :rows => 3, :cols => 50, :title => "#{input_textarea_tooltip}"} 
    5669              - if input.examples.size >= 1 
    5770                = CGI::unescapeHTML(input.examples[0]) 
     
    129142        %tr 
    130143          %th.inputs 
     144          %th.inputs 
    131145            Please Note 
     146          %th.inputs 
    132147        %tr 
     148          %td.inputs 
     149            %img{:src => "/images/info.png", :alt => "Important!" } 
    133150          %td.inputs 
    134151            Some workflows are not up-to-date or have dependencies that cannot be met by the specific Taverna server that you specified during generation of this tool. You can make sure that the workflow is valid by running it in the Taverna Workbench first to confirm that it works before running it via the Web. 
    135152        %tr 
    136153          %td.inputs 
     154            %img{:src => "/images/info.png", :alt => "Important!" } 
     155          %td.inputs 
    137156            There might be some repetitions in the workflow description in some of the generated workflows. This is due to a backwards compatibility issue on the myExperiment repository which keeps the old descriptions to make sure that no information is lost. 
    138157        %tr 
    139158          %td.inputs 
     159            %img{:src => "/images/info.png", :alt => "Important!" } 
     160          %td.inputs 
    140161            For more information on this workflow please visit the 
    141162            %a{ :href => "http://www.myExperiment.org/workflows/#{@wid}" } myExperiment website 
     163        - if #{@my_exp_wkf.user.email} 
     164          %tr 
     165            %td.inputs 
     166              %img{:src => "/images/info.png", :alt => "Important!" } 
     167            %td.inputs 
     168              For questions/comments you can also contact the workflow creator at: 
     169              %a{ :href => "mailto:#{@my_exp_wkf.user.email}" } #{@my_exp_wkf.user.email} 
     170 
    142171    %br 
     172    %br 
  • t2-web/trunk/views/results.haml

    r143 r153  
    1212          // calculate results_navigation here since helpers seem unavailable in results.js!? 
    1313          results_navigation = "#{generate_data_navigation_frame(@my_exp_wkf, @run_uuid, @wid, @wkf_version, @t2_server, true)}"; 
    14           window.frames['header'].document.write("#{generate_header_frame(@my_exp_wkf)}"); 
     14          window.frames['header'].document.write("#{generate_header_frame(@my_exp_wkf).gsub!(/\n/, "")}"); 
    1515          window.frames['data-navigation'].document.write("#{generate_data_navigation_frame(@my_exp_wkf, @run_uuid, @wid, @wkf_version, @t2_server, false)}"); 
    1616          runStatusIntervalId = window.setInterval( "checkRunStatus('#{@t2_server}', '#{@run_uuid}')", 5000); 
     
    1919 
    2020  -# we use border for FF and framespacing for IE 
    21   %frameset{ :rows => "86px, *", :border => "1", :framespacing => "1" } 
     21  %frameset{ :rows => "113px, *", :border => "1", :framespacing => "1" } 
    2222    %noframes 
    2323      To be viewed properly, this page requires frames.