Difference between revisions of "Icon LnF"
m (→Common use icons) |
Wikicatglobe (talk | contribs) |
||
(70 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
+ | <accesscontrol>Main:MyGroup</accesscontrol> | ||
== Icon LnF == | == Icon LnF == | ||
Line 25: | Line 26: | ||
| [[Image:facility.gif]] | | [[Image:facility.gif]] | ||
| [[Image:user.gif]] | | [[Image:user.gif]] | ||
− | | [[Image: | + | | [[Image:Grouptree.gif]] |
| [[Image:Sitetree.gif]] | | [[Image:Sitetree.gif]] | ||
| [[Image:Project.gif]] | | [[Image:Project.gif]] | ||
Line 58: | Line 59: | ||
| [[Image:spreadsheet.gif]] | | [[Image:spreadsheet.gif]] | ||
| [[Image:dashboard.gif]] | | [[Image:dashboard.gif]] | ||
− | | [[Image:nextpage.gif]] | + | | [[Image:nextpage.gif]] |
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
|} | |} | ||
Line 111: | Line 116: | ||
| [[Image:Cut.gif]] | | [[Image:Cut.gif]] | ||
| [[Image:Edit.gif]] | | [[Image:Edit.gif]] | ||
+ | | [[Image:Editall.gif]] | ||
| [[Image:Copy.gif]] | | [[Image:Copy.gif]] | ||
| [[Image:Paste.gif]] | | [[Image:Paste.gif]] | ||
Line 116: | Line 122: | ||
| [[Image:Cancel.png]] | | [[Image:Cancel.png]] | ||
| [[Image:OK.gif]] | | [[Image:OK.gif]] | ||
+ | | [[Image:No.gif]] | ||
+ | | [[Image:Yes.gif]] | ||
| [[Image:Search.gif]] | | [[Image:Search.gif]] | ||
| [[Image:Find all.gif]] | | [[Image:Find all.gif]] | ||
Line 124: | Line 132: | ||
| [[Image:SortAscending.gif]] | | [[Image:SortAscending.gif]] | ||
| [[Image:Run.gif]] | | [[Image:Run.gif]] | ||
+ | |- | ||
| [[Image:Generate.gif]] | | [[Image:Generate.gif]] | ||
| [[Image:Download.gif]] | | [[Image:Download.gif]] | ||
| [[Image:Upload.gif]] | | [[Image:Upload.gif]] | ||
− | |||
| [[Image:Submit.gif]] | | [[Image:Submit.gif]] | ||
| [[Image:Submit close.gif]] | | [[Image:Submit close.gif]] | ||
Line 144: | Line 152: | ||
| [[Image:Execute.gif]] | | [[Image:Execute.gif]] | ||
| [[Image:Constant.gif]] | | [[Image:Constant.gif]] | ||
− | | [[Image:TimeRegistration.gif]] | + | | [[Image:TimeRegistration.gif]] |
+ | |- | ||
+ | | [[Image:Register_external_hour.gif]] | ||
| [[Image:Chart.gif]] | | [[Image:Chart.gif]] | ||
− | | [[Image: | + | | [[Image:Myportal.gif]] |
| [[Image:Import.gif]] | | [[Image:Import.gif]] | ||
− | |||
| [[Image:Export.gif]] | | [[Image:Export.gif]] | ||
| [[Image:Import export.gif]] | | [[Image:Import export.gif]] | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
| [[Image:Help.gif]] | | [[Image:Help.gif]] | ||
| [[Image:Tip.gif]] | | [[Image:Tip.gif]] | ||
Line 169: | Line 166: | ||
| [[Image:Data gear.gif]] | | [[Image:Data gear.gif]] | ||
| [[Image:Schedule.png]] | | [[Image:Schedule.png]] | ||
− | |||
| [[Image:Calculator.gif]] | | [[Image:Calculator.gif]] | ||
| [[Image:ViewSlideshow plain.gif]] | | [[Image:ViewSlideshow plain.gif]] | ||
+ | | [[Image:Layoutxml.gif]] | ||
+ | | [[Image:Stable_plain.gif]] | ||
+ | | [[Image:UnStable_plain.gif]] | ||
+ | | [[Image:SetFail_plain.gif]] | ||
+ | | [[Image:Properties.gif]] | ||
+ | | | ||
+ | |} | ||
+ | |||
+ | === [[Access icons]] === | ||
+ | |||
+ | :{| class="CGTable" border="1" | ||
+ | | [[Image:Access.gif]] | ||
+ | | [[Image:Resource-access.gif]] | ||
+ | | [[Image:Navigation.gif]] | ||
+ | | [[Image:Inherit.gif]] | ||
+ | |} | ||
+ | |||
+ | === [[Journal icons]] === | ||
+ | |||
+ | :{| class="CGTable" border="1" | ||
| [[Image:Journal.gif]] | | [[Image:Journal.gif]] | ||
− | | [[Image: | + | | [[Image:Check checked.gif]] |
− | | [[Image: | + | | [[Image:Check none.gif]] |
− | | [[Image: | + | | [[Image:grant1.png]] |
− | | [[Image: | + | | [[Image:ungrant1.png]] |
+ | | [[Image:Select Some.gif]] | ||
+ | | [[Image:Select All.gif]] | ||
+ | |} | ||
+ | |||
+ | === [[User icons]] === | ||
+ | |||
+ | :{| class="CGTable" border="1" | ||
+ | | [[Image:User.gif]] | ||
+ | | [[Image:AddUser.png]] | ||
+ | | [[Image:Edit2.gif]] | ||
+ | | [[Image:Protectdate.gif]] | ||
+ | | [[Image:Account.gif]] | ||
+ | | [[Image:group.gif]] | ||
+ | | [[Image:Add group.gif]] | ||
+ | | [[Image:view_user_plain.gif]] | ||
|} | |} | ||
Line 187: | Line 218: | ||
| [[Image:NavigateRight.gif]] | | [[Image:NavigateRight.gif]] | ||
| [[Image:NavigateLast.gif]] | | [[Image:NavigateLast.gif]] | ||
− | |||
− | |||
| [[Image:Navigate_left2.gif]] | | [[Image:Navigate_left2.gif]] | ||
| [[Image:Navigate_right2.gif]] | | [[Image:Navigate_right2.gif]] | ||
Line 200: | Line 229: | ||
|- | |- | ||
| [[Image:UpArrow.gif]] | | [[Image:UpArrow.gif]] | ||
− | | [[Image:DownArrow.gif]] | + | | [[Image:DownArrow.gif]] |
+ | | [[Image:LeftArrow.gif]] | ||
+ | | [[Image:RightArrow.gif]] | ||
+ | | [[Image:Hide.gif]] | ||
+ | | | ||
+ | |- | ||
+ | | [[Image:left_circle.gif]] | ||
+ | | [[Image:right_circle.gif]] | ||
+ | | [[Image:up_circle.gif]] | ||
+ | | [[Image:down_circle.gif]] | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [[Image:up.gif]] | ||
+ | | [[Image:down.gif]] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | |- | ||
+ | | [[Image:left.gif]] | ||
+ | | [[Image:right.gif]] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
|} | |} | ||
Line 230: | Line 284: | ||
| [[Image:Insertbreakpage.gif]] | | [[Image:Insertbreakpage.gif]] | ||
| [[Image:Insertchart.gif]] | | [[Image:Insertchart.gif]] | ||
− | |||
| [[Image:Insertpagelink.gif]] | | [[Image:Insertpagelink.gif]] | ||
| [[Image:Insert-Text-Box-1.gif]] | | [[Image:Insert-Text-Box-1.gif]] | ||
Line 240: | Line 293: | ||
| [[Image:AddColumn.gif]] | | [[Image:AddColumn.gif]] | ||
| [[Image:DeleteColumn.gif]] | | [[Image:DeleteColumn.gif]] | ||
− | | [[Image: | + | | [[Image:Moverowdown.gif]] |
− | | [[Image: | + | | [[Image:Moverowup.gif]] |
− | | [[Image: | + | | [[Image:Movecolumnleft.gif]] |
− | | [[Image: | + | | [[Image:Movecolumnright.gif]] |
− | | | + | | |
− | | | + | | |
− | | | + | | |
− | | | + | | |
+ | | | ||
|} | |} | ||
Line 256: | Line 310: | ||
| [[Image:Project questionnaire.gif]] | | [[Image:Project questionnaire.gif]] | ||
| [[Image:Project questionnaire complete.gif]] | | [[Image:Project questionnaire complete.gif]] | ||
− | |||
| [[Image:Questionnaire.gif]] | | [[Image:Questionnaire.gif]] | ||
| [[Image:Questionnaire template.gif]] | | [[Image:Questionnaire template.gif]] | ||
Line 269: | Line 322: | ||
| [[Image:Viewproperties.gif]] | | [[Image:Viewproperties.gif]] | ||
| [[Image:Viewconditions.gif]] | | [[Image:Viewconditions.gif]] | ||
− | |||
| [[Image:Moveto.gif]] | | [[Image:Moveto.gif]] | ||
| [[Image:Interview manager.gif]] | | [[Image:Interview manager.gif]] | ||
| [[Image:Mask.gif]] | | [[Image:Mask.gif]] | ||
| [[Image:Disable.gif]] | | [[Image:Disable.gif]] | ||
+ | | [[Image:Lock information.png]] | ||
+ | | [[Image:Target.gif]] | ||
|- | |- | ||
− | | [[Image: | + | | [[Image:testlink.gif]] |
− | |||
| [[Image:Reset layout.gif]] | | [[Image:Reset layout.gif]] | ||
| [[Image:Resetdelete.gif]] | | [[Image:Resetdelete.gif]] | ||
Line 283: | Line 336: | ||
| [[Image:Pause.gif]] | | [[Image:Pause.gif]] | ||
| [[Image:Checksyntax.gif]] | | [[Image:Checksyntax.gif]] | ||
− | | [[Image:Analyze.gif]] | + | | [[Image:Analyze.gif]] |
+ | | [[Image:Insertflash.gif]] | ||
+ | | [[Image:ExportPerformance_plain.gif]] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
|} | |} | ||
Line 303: | Line 368: | ||
| [[Image:Chartstyle.gif]] | | [[Image:Chartstyle.gif]] | ||
| [[Image:Document chart.gif]] | | [[Image:Document chart.gif]] | ||
+ | | [[Image:Viewresult.gif]] | ||
+ | | [[Image:Copychart.gif]] | ||
+ | | [[Image:Sum.gif]] | ||
+ | | [[Image:Expression.gif]] | ||
+ | | [[Image:Checks.gif]] | ||
+ | | [[Image:Providerxml.gif]] | ||
+ | | [[Image:weekcross.gif]] | ||
+ | |- | ||
+ | | [[Image:addtoleft.gif]] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
|} | |} | ||
Line 328: | Line 421: | ||
| [[Image:StartQuestionnaire.gif]] | | [[Image:StartQuestionnaire.gif]] | ||
| [[Image:SendingMail.gif]] | | [[Image:SendingMail.gif]] | ||
+ | | [[Image:Informer_plain.gif]] | ||
|- | |- | ||
− | |||
| [[Image:Highpriority.GIF]] | | [[Image:Highpriority.GIF]] | ||
| [[Image:Priority.gif]] | | [[Image:Priority.gif]] | ||
Line 336: | Line 429: | ||
| [[Image:Rules.gif]] | | [[Image:Rules.gif]] | ||
| [[Image:Keys.png]] | | [[Image:Keys.png]] | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
+ | | | ||
|} | |} | ||
Line 355: | Line 462: | ||
| [[Image:Include.gif]] | | [[Image:Include.gif]] | ||
| [[Image:Reuse.gif]] | | [[Image:Reuse.gif]] | ||
+ | | [[Image:ClearAll.gif]] | ||
|} | |} | ||
Line 397: | Line 505: | ||
| [[Image:Reassign.gif]] | | [[Image:Reassign.gif]] | ||
| [[Image:Merge.gif]] | | [[Image:Merge.gif]] | ||
+ | | [[Image:SelectMerge.gif]] | ||
+ | | [[Image:generatetask.gif]] | ||
|} | |} | ||
Line 411: | Line 521: | ||
| [[Image:Cashier approve.gif]] | | [[Image:Cashier approve.gif]] | ||
| [[Image:Creditcard approve.gif]] | | [[Image:Creditcard approve.gif]] | ||
+ | | [[Image:setAttribute_plain.gif]] | ||
|} | |} | ||
Line 422: | Line 533: | ||
| [[Image:Earth2.gif]] | | [[Image:Earth2.gif]] | ||
| [[Image:Folder.gif]] | | [[Image:Folder.gif]] | ||
− | | [[Image: | + | | [[Image:DiagramCross.gif]] |
+ | | [[Image:DiagramStandard.gif]] | ||
+ | | [[Image:DiagramTracking.gif]] | ||
+ | | [[Image:DiagramCampaign.gif]] | ||
+ | | [[Image:DiagramComparison.gif]] | ||
| [[Image:PowerPoint.gif]] | | [[Image:PowerPoint.gif]] | ||
| [[Image:Presentation.gif]] | | [[Image:Presentation.gif]] | ||
Line 431: | Line 546: | ||
:{| class="CGTable" border="1" | :{| class="CGTable" border="1" | ||
|- | |- | ||
− | |||
− | |||
| [[Image:Phone.gif]] | | [[Image:Phone.gif]] | ||
| [[Image:Speaker.gif]] | | [[Image:Speaker.gif]] | ||
| [[Image:Check.gif]] | | [[Image:Check.gif]] | ||
+ | | [[Image:custom.gif]] | ||
+ | | [[Image:Play.png]] | ||
+ | | [[Image:Record.gif]] | ||
+ | | [[Image:Stop.gif]] | ||
+ | | [[Image:Overhear.gif]] | ||
|- | |- | ||
| [[Image:DisconnectPhone.gif]] | | [[Image:DisconnectPhone.gif]] | ||
Line 441: | Line 559: | ||
| [[Image:SleepPhone.gif]] | | [[Image:SleepPhone.gif]] | ||
| [[Image:TalkingPhone.gif]] | | [[Image:TalkingPhone.gif]] | ||
+ | | | ||
+ | | | ||
+ | | | ||
|} | |} | ||
Line 452: | Line 573: | ||
|} | |} | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
== Order of Icons == | == Order of Icons == | ||
Line 505: | Line 581: | ||
When we have limited space the icons with * may appear with no text labeling. | When we have limited space the icons with * may appear with no text labeling. | ||
− | + | === Some samples === | |
+ | [[Image:OrderofIcon.gif]] | ||
+ | |||
+ | === Order of icons === | ||
+ | |||
+ | #Create * | ||
#Add * | #Add * | ||
− | + | #Save * <br>''--------(Separator)'' | |
− | #Save * | ||
#Save and next | #Save and next | ||
#Save and new | #Save and new | ||
− | #Save and close | + | #Save and close <br>''--------(Separator)'' |
+ | #Edit * | ||
#Open * | #Open * | ||
− | |||
#Open Template | #Open Template | ||
− | + | #Copy * <br>''--------(Separator)'' | |
− | |||
− | #Copy *<br>''Separator'' | ||
#Search * | #Search * | ||
− | #Refresh *<br>''Separator'' | + | #Refresh *<br>''--------(Separator)'' |
− | # | + | #Backward * |
− | # | + | #Forward * <br>''--------(Separator)'' |
− | + | #Print resource information * | |
− | + | #Send resource information * <br>''--------(Separator)'' | |
− | # | + | #'''<span style="color: rgb(255, 102, 0);">Other specified Icons</span>'''<br>''--------(Separator)'' |
− | # | ||
− | # | ||
− | |||
− | |||
− | |||
− | |||
#Delete * | #Delete * | ||
#Remove * | #Remove * | ||
− | #Close *<br>''Separator'' | + | #Close *<br>''--------(Separator)'' |
#Pager control | #Pager control | ||
#No of Records field | #No of Records field | ||
[[Category:LnF_guidelines]] | [[Category:LnF_guidelines]] |
Latest revision as of 04:57, 18 October 2013
<accesscontrol>Main:MyGroup</accesscontrol>
Contents
- 1 Icon LnF
- 2 What icons to use
- 2.1 Project tree icons
- 2.2 Attachment type icons
- 2.3 Common use icons
- 2.4 Access icons
- 2.5 Journal icons
- 2.6 User icons
- 2.7 Navigation & Expand/Collapse icons
- 2.8 Editor icons
- 2.9 Questionnaire icons
- 2.10 Report icons
- 2.11 Communicator icons
- 2.12 CGScript icons
- 2.13 Coding job icons
- 2.14 Data icons
- 2.15 Expression icons
- 2.16 Task icons
- 2.17 Webshop icons
- 2.18 Monitor icons
- 2.19 CATI & Asterisk icons
- 2.20 System announcement icons
- 3 Order of Icons
Icon LnF
- Icons should have two states; normal and mouse over. The mouse over effect is a 3d shadow effect!
- All tool bar icons need 3 images specified; normal, hover, and disable!
- Buttons in tool bars that cannot be used should be grayed out, for example delete cannot be used until an item is chosen so it is grayed out until something is chosen. Tool tips should be visible on grayed out buttons.
- Tool tips must be added to all buttons that does not have text on the button.
- If the button text consists of more than one word then the first word is with a capital letter the following are with small letters. For example "Changed by".
- There can never be buttons after a Pager Control in a tool bar.
- Some icons should always have the same image no matter where we see the icon; please refer to "What icons to use". If the icon is not available, please talk to Process group for getting assigned an icon!
- Icons must always be set in the same general order on all lists. Please refer to Order_of_Icons to see the order in which icons must appear when you have an icon tool bar or equivalent!
- When we have 6 or more icons on a tool bar (or the dialogue is very small) we can choose to show some icons without the text label. Those icons that can be shown this way are marked with * in Order_of_Icons
- Groups of tool bar buttons are separated by a vertical separator
- Do not show two icons button separators next to each other - if e.g. no buttons with access in between!
- Do not show icon button separator at start or end without buttons on each side.
What icons to use
Icons is grouped based on the their function or number of use in each modules. Click on each group to see more details.
Project tree icons
Attachment type icons
Common use icons
Access icons
Journal icons
User icons
Editor icons
Questionnaire icons
Report icons
Communicator icons
CGScript icons
Coding job icons
Data icons
Expression icons
Task icons
Webshop icons
Monitor icons
CATI & Asterisk icons
System announcement icons
Order of Icons
To give CatGlobe a uniform Look & Feel, buttons must be in about the same location on all pages. While there are many different buttons the system, most buttons are in the same list of categories.
When we have limited space the icons with * may appear with no text labeling.
Some samples
Order of icons
- Create *
- Add *
- Save *
--------(Separator) - Save and next
- Save and new
- Save and close
--------(Separator) - Edit *
- Open *
- Open Template
- Copy *
--------(Separator) - Search *
- Refresh *
--------(Separator) - Backward *
- Forward *
--------(Separator) - Print resource information *
- Send resource information *
--------(Separator) - Other specified Icons
--------(Separator) - Delete *
- Remove *
- Close *
--------(Separator) - Pager control
- No of Records field