search

uujgii / web-to-print-scripts

Automatically exported from code.google.com/p/web-to-print-scripts
0 stars 0 forks source link

Datasets fix #58

Open GoogleCodeExporter opened 9 years ago

GoogleCodeExporter commented 9 years ago 
We need to style and optimize the dataset table in our portal. Sample template 
containing a dataset:
http://realestate.zetaprints.com/?page=template;TemplateID=C3EF7F0A-210B-4A4B-8C
F4-BE56D511D476

1. All rows have a maximum height of one line of text. If the text can't fit in 
one line - we show it on cell hover (cell-hover_D1-2.png). Cell background on 
hover is ##e0ecff, hover box has background #e0ecff and border #c6c4c5.

2. Users can select cells from different rows. We already have this feature but 
instead of highlighting the selected cell by changing text color and font 
weight, we mark them by changing the cell background color to #c3d9ff 
(cell-selection_D1-2.png).

3. The current symbol at the beginning of each row needs to be replaced with an 
icon. Not sure which one you prefer so I made a separate sprite 
(dataset_row_ico.png) and added it to the current g-skin sprite (icons.png), 
use whichever.

4. When hovering over a row selection icon, the row expands its height, 
according to the cell that holds most text, to show full text 
(hover-row_D1-2.png). This happens at a delay of 0.5-1 sec. We will adjust 
delay time later, after we see it in action. Row hover background color is 
#e0ecff. Row selection icon changes to the checked version.

5. A selected row stays expanded to show full text (selected-row_D1-2.png). 
Background color of selected row is #c3d9ff. Row selection icon changes to the 
checked version.

Original issue reported on code.google.com by agur...@gmail.com on 24 Nov 2010 at 10:26

Attachments:

GoogleCodeExporter commented 9 years ago

Original comment by zetapri...@gmail.com on 1 Mar 2011 at 5:09

GoogleCodeExporter commented 9 years ago 
1.Change the markup of lookup table (returned from this kind of link 
http://realestate.zetaprints.com/?page=fieldset-show;TemplateID=C3EF7F0A-210B-4A
4B-8CF4-BE56D511D476)
1.1 add a class attribute for the every cell in the first column, for example:
            <table id="tblDatasetLookUp" class="fields-change">
                <thead>
                    <tr>
                        <th class="icon"></th>
                        <th>Area</th>
                <tbody>
                    <tr>
                        <td class="icon" onclick="datasetInsertRow(this)"></td>
                    <tr>
                        <td class="icon" ...
1.2 add a title atrribute for every cell that you want to show tooltips, for 
example:
                        <td onclick="datasetInsertValue(this,2)" title="one one one one one"><span style="display: none;">one one one one one</span><p>one one one one one</p></td>
2. Add requried javascript scripts.
2.1 add jquery tools library for showing tooltips
<script src="http://cdn.jquerytools.org/1.2.5/jquery.tools.min.js"></script>
2.2 download jquery.hoverintent script from its website and add
<script src="jquery.hoverIntent.minified.js"></script>
hoverintent is for delayed hover behaviour.
3. Modified user19.js
3.1 Append the following code at the end of the function datasetPreShow
    var timer;
    jQuery("#tblDatasetLookUp td.icon").hoverIntent({
        interval: 300,
        over: function(){
            jQuery(this).addClass('hoverIcon');
            jQuery(this).nextAll("td").addClass("hoverRow");
        },
        out: function(){
            jQuery(this).removeClass("hoverIcon");
            jQuery(this).nextAll("td").removeClass('hoverRow');
        }
    });

    $("#tblDatasetLookUp td[title]").tooltip({position: "bottom right", offset: [10, -20]});
3.2 Append the following code at the end of the function datasetInsertRow:
    $("#tblDatasetLookUp td.icon").removeClass("selected");
    $(td).addClass("selected");
4. Change style
4.1. Find the the css rule for #divDatasetContent td.selected-value, normally 
in css/main.css
,replace it with:
#divDatasetContent td.selected-value { 
/*  font-weight: bold; color: rgb(196, 38, 29);*/
    background: #c3d9ff;
    white-space: normal;
}
4.2 download the icon image called dataset_row_icon.png from 
http://code.google.com/p/web-to-print-scripts/issues/detail?id=58 and save it 
to the proper location
4.3 Add the following css rules:
<style type="text/css">
#tblDatasetLookUp {
    width: 100%;
    table-layout: fixed;
}
#tblDatasetLookUp th {
    width: 10em;
}
#tblDatasetLookUp th.icon {
    width: 20px;
    padding: 0px;
}
#tblDatasetLookUp td {
    white-space: pre;
    overflow: hidden;
    border-color: #c6c4c5;
}
#tblDatasetLookUp td.icon {
    text-align:center;
    vertical-align: middle;
    padding: 0;
}
#tblDatasetLookUp td.icon b {
    display:inline-block;
    width: 16px;
    height: 10px;
    background: url(dataset_row_ico.png);
}
#tblDatasetLookUp td.selected b, #tblDatasetLookUp td.hoverIcon b {
    background-position: 0 10px;
}

#tblDatasetLookUp td:hover, #tblDatasetLookUp td.hoverRow, .tooltip {
    background: #e0ecff;
}

.tooltip {
    padding: 10px;
    border: 1px solid #c6c4c5;
    width: 10em;
}

#tblDatasetLookUp td.hoverRow {
    white-space: normal;
}
</style>
Please make sure these rules point to the correct location of the image file 
you downloaded earlier.

Original comment by hanl...@gmail.com on 22 Jun 2011 at 7:56

GoogleCodeExporter commented 9 years ago 
forgot 1.3
1.3 remove the > symbol from the cells in the first column. So the final cell 
in the first column should be:
<td class="icon" onclick="datasetInsertRow(this)"></td>

Original comment by hanl...@gmail.com on 22 Jun 2011 at 8:08

GoogleCodeExporter commented 9 years ago

Original comment by ad...@zetaprints.com on 24 Jun 2011 at 8:36

GoogleCodeExporter commented 9 years ago

Original comment by ad...@zetaprints.com on 24 Jun 2011 at 8:43

GoogleCodeExporter commented 9 years ago 
How and where do I test this?
Tried it on:
http://realestate.zetaprints.com/?page=template;TemplateID=C3EF7F0A-210B-4A4B-8C
F4-BE56D511D476
with the old skeleton theme and g-skin, no changes. Please give testing 
instructions.

Original comment by agur...@gmail.com on 24 Jun 2011 at 8:59

GoogleCodeExporter commented 9 years ago 
Added class="fields-change-icon" instead of "icon".
Didn't do anything with @title. Why do we need it?

These changes are for g-skin only. main.css won't change.
Sorry, it wasn't made clear in the task.
http://www.zetaprints.com/help/g-skin/

Upload modified files here:
1. g-skin files
2. user19.js

We'll run them through a diff to see the changes, but you explained them here 
pretty well. It's just that inserting them is a hassle and may be easier just 
to grab the files from you.

Original comment by ad...@zetaprints.com on 24 Jun 2011 at 11:14

GoogleCodeExporter commented 9 years ago 
title attribute is for showing tooktip, if you do not want to show tooktip, do 
not add it.

Original comment by hanl...@gmail.com on 27 Jun 2011 at 12:18

GoogleCodeExporter commented 9 years ago 
@comment 8 - we already have this text in full in the cell. Any point in 
duplicating it?

Original comment by ad...@zetaprints.com on 27 Jun 2011 at 1:15

GoogleCodeExporter commented 9 years ago 
the title attribute is required by the tooltip plugin. If you do not want to 
add it, I can add it via JavaScript.

Original comment by hanl...@gmail.com on 27 Jun 2011 at 2:41

GoogleCodeExporter commented 9 years ago 
Two notes:
1. the table markup returned from 
http://realestate.zetaprints.com/?page=fieldset-show;TemplateID=C3EF7F0A-210B-4A
4B-8CF4-BE56D511D476 make all the cells in the address and agent columns 
selected by default (have class selected-value). I do not know why.
2. Do not forget to add the js libraries in step 2.

Original comment by hanl...@gmail.com on 27 Jun 2011 at 5:20

Attachments:

GoogleCodeExporter commented 9 years ago 
Atanas, no diffs yet.
Just have a look if it's what you meant and if it works in all browsers.

Original comment by ad...@zetaprints.com on 29 Jun 2011 at 11:27

GoogleCodeExporter commented 9 years ago 
Tested on:
http://realestate.zetaprints.com/?page=template;TemplateID=C3EF7F0A-210B-4A4B-8C
F4-BE56D511D476

1. Empty columns are highlighted by default (dataset_01.png)

2. All versions of IE show the outer border as black (ie_dataset_02.png).

3. No version of IE shows the first column icons (ie_dataset_03.png).

4. Field name titles are suppose to be white (dataset_04.png).

5. Can we move the hover a bit closer to the cursor (dataset_05.png)?

Original comment by agur...@gmail.com on 29 Jun 2011 at 12:02

Attachments:

GoogleCodeExporter commented 9 years ago 
test issue 1 is the problem of html, just remove the "selected-value" class for 
the empty cell, I cannot modify html
test issue 5: do you want to make the tooltip follow the cursor? Currently the 
tooltip is in the fixed position, do not follow the cursor position.
others are fixed

Original comment by hanl...@gmail.com on 30 Jun 2011 at 2:57

GoogleCodeExporter commented 9 years ago 
1. Max? Can you do that?
5. Yes, please make it follow the cursor

Original comment by agur...@gmail.com on 30 Jun 2011 at 11:20

GoogleCodeExporter commented 9 years ago 
1. the class name is set via JS. Roger.

5. We can probably release as is. What's involved in shifting it closer? What 
will it look like long text values? On short text values?

Original comment by ad...@zetaprints.com on 1 Jul 2011 at 12:35

GoogleCodeExporter commented 9 years ago

Original comment by ad...@zetaprints.com on 1 Jul 2011 at 8:47

GoogleCodeExporter commented 9 years ago 
fixed

Original comment by hanl...@gmail.com on 1 Jul 2011 at 11:44

GoogleCodeExporter commented 9 years ago 
Tested on:
http://realestate.zetaprints.com/?page=template;TemplateID=C3EF7F0A-210B-4A4B-8C
F4-BE56D511D476

1. The first row of the empty columns is still highlighted by default 
(dataset_06.png).

2. Test OK

3. Test OK

4. Test OK

5. Test OK

6. Part of the dataset table gets hidden when the browser window is too small 
for it (dataset_07.png). The latter columns are impossible to see if the 
browser window is not wide enough. We should either add a horizontal scroll to 
the whole window or make the table cells narrower, to compensate when the 
browser window is too small. My opinion - I'd prefer making the cells smaller 
rather than adding a horizontal scroll.

7. After selecting an entire row, a user might select a value from a cell 
outside that row. This should disqualify the selected row as the active one and 
disable its "active" icon (dataset_08.png). The active (checked) icon should 
only be assigned to a row if every cell of that row is selected. otherwise, 
back to the common icon (not check).

Original comment by agur...@gmail.com on 1 Jul 2011 at 3:48

Attachments:

GoogleCodeExporter commented 9 years ago 
+ 0.5 units

Atanas, can you post [6] as a separate issue?
It's a problem with the skin.

Original comment by ad...@zetaprints.com on 4 Jul 2011 at 5:08

GoogleCodeExporter commented 9 years ago 
[6] posted:
http://code.google.com/p/web-to-print-scripts/issues/detail?id=66

Original comment by agur...@gmail.com on 4 Jul 2011 at 7:28

GoogleCodeExporter commented 9 years ago 
1. When the table is first shown, it tries to match the values of text controls 
below the table with the values saved in the cells of corresponding column, if 
matched, cells will be marked with selected. In this case, the initial value of 
"address" control has empty value, and the cells in the address column also 
have empty values, so they matched and the first address cell is marked with 
selected. Same for Agent name column. So this is not a bug.
7. fixed

Original comment by hanl...@gmail.com on 4 Jul 2011 at 9:13

GoogleCodeExporter commented 9 years ago 
7. Just some styling issues remaining:
7.1. The checked/unchecked icon positioning is off by a few pixels. It jumps 
up/down when switching on and off. Select an entire row and click on a cell 
outside it while looking at the icon. You'll see it happening. Icon should not 
move, just that check appearing/disappearing.
7.2. In Apple Safari, there are small dots on top of each icon 
(safari_dots.png).
7.3. Click once to select a row, then click the same icon once again - the row 
changes background color. Why? Clicking on it multiple times makes no 
difference, why changing the color?

Original comment by agur...@gmail.com on 4 Jul 2011 at 10:00

Attachments:

GoogleCodeExporter commented 9 years ago 
7.1 fixed
7.2  This is safari bug. max, could you change the html to add a span element 
around the > symobl, so I can hide this symbol easily? IE and safari both have 
bug on this, it is not easy to fix if no span around it.
7.3 fixed

Original comment by hanl...@gmail.com on 4 Jul 2011 at 2:31

GoogleCodeExporter commented 9 years ago 
7.1 Test OK

7.3 Test OK

Original comment by agur...@gmail.com on 4 Jul 2011 at 3:33

GoogleCodeExporter commented 9 years ago 
Just record the steps for implementing the feature that make tooltip follow 
cursor:
1. add jquery.tooltip.min.js library ( do not add library 
jquery.dimensions.min.js although jquery.tooltip declaim that it requires it, 
jquery.dimensions conflicts with qtip library it will make the tooltip position 
wrong).
2. In function datasetPreShow, add:
$("#tblDatasetLookUp td[title]").tooltip({id: 'tblDatasetLookUp-tooltip'});
3. add css rule in G-skin/styles.css
#tblDatasetLookUp-tooltip {
  border: 1px solid #C6C4C5;
  padding: 5px;
  position: absolute;
  width: 10em;
  z-index: 3000;
}

Original comment by hanl...@gmail.com on 6 Jul 2011 at 2:06

GoogleCodeExporter commented 9 years ago 
This was almost done but abandoned. A customer can benefit from it now and we 
need it.
Lets get the files, give them one more test to make sure all is ok and include 
in the G-skin.
Max, get them from that paused instance.

The changes should only affect the dataset table (to be checked with a diff) so 
users probably wont get upset when we do change G-skin. It is an improvement of 
the dataset only.
I guess that Safari 1px jump is negligible if fixing it is a show stopper.

Original comment by agur...@gmail.com on 29 Sep 2011 at 11:55