Changeset 153


Ignore:
Timestamp:
Sep 20, 2011, 3:38:40 PM (5 years ago)
Author:
kostas.karasavvas@…
Message:

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

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

Legend:

Unmodified
Added
Removed
  • 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/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/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/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/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.
Note: See TracChangeset for help on using the changeset viewer.