Toggle search
Toggle menu
862
3.8K
30.2K
279.1K
Catglobe Wiki
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

Icon LnF: Difference between revisions

From Catglobe Wiki
More actions
← Older edit
VisualWikitext
No edit summary
Wikicatglobe (talk | contribs)
Cem, Maysunshine, Bureaucrats, Administrators
238 edits
No edit summary
 
(158 intermediate revisions by 2 users not shown)
Line 1: Line 1:
<span style="color: #ff9900">'''Icon LnF'''</span>
<accesscontrol>Main:MyGroup</accesscontrol>
== Icon LnF ==


#Icons should have two states; normal and mouse over. The mouse over effect is a 3d shadow effect!
#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!
#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.
#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.
#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".
#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.
#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 Appendix A for what icons to use. If the icon is not available, please talk to Process group for getting assigned an icon!
#Some icons should always have the same image no matter where we see the icon; please refer to "[http://wiki.catglobe.com/index.php/Icon_LnF#What_icons_to_use 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 Appendix B to see the order in which icons must appear when you have an icon tool bar or equivalent!
#Icons must always be set in the same general order on all lists. Please refer to [http://wiki.catglobe.com/index.php/Icon_LnF#Order_of_Icons 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 Appendix B.
#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 [http://wiki.catglobe.com/index.php/Icon_LnF#Order_of_Icons Order_of_Icons]
#Groups of tool bar buttons are separated by a vertical separator
#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 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.
#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]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Company.gif]]
| [[Image:facility.gif]] 
| [[Image:user.gif]] 
| [[Image:Grouptree.gif]]
| [[Image:Sitetree.gif]] 
| [[Image:Project.gif]]
| [[Image:Project complete.gif]]
| [[Image:Foldertree.gif]]
| [[Image:Task.gif]]
| [[Image:Task complete.gif]]
| [[Image:Taskset.gif]]
| [[Image:Workflow.gif]]
| [[Image:Communicator template.gif]]
| [[Image:Attachment.gif]]
| [[Image:DCS.gif]]
| [[Image:DCS export.gif]]
| [[Image:Product.gif]]
| [[Image:Shift.gif]]
| [[Image:Translationjob.gif]]
| [[Image:Codingjob.gif]]
|-
| [[Image:Issue.gif]] 
| [[Image:project_questionnaire.gif]] 
| [[Image:project_questionnaire_complete.gif]] 
| [[Image:Questionnaire.gif]] 
| [[Image:questionnaire_template.gif]] 
| [[Image:questionnaire_layout.gif]] 
| [[Image:questionnaire_layout_template.gif]] 
| [[Image:questionnaire_paper.gif]] 
| [[Image:sample_request.gif]] 
| [[Image:Diagram.gif]] 
| [[Image:Monitor.gif]] 
| [[Image:Report.gif]] 
| [[Image:report_template.gif]] 
| [[Image:spreadsheet.gif]] 
| [[Image:dashboard.gif]] 
| [[Image:nextpage.gif]]
|
|
|
|
|}
=== [[Attachment type icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Image access.gif]]
| [[Image:Image excel.gif]]
| [[Image:Image word.gif]]
| [[Image:Image ppt.gif]]
| [[Image:Image visio.gif]]
| [[Image:Image pdf.gif]]
| [[Image:Image html.gif]]
| [[Image:Image xml.gif]]
| [[Image:Image text.gif]]
| [[Image:Image bmp.gif]]
| [[Image:Image png.gif]]
| [[Image:Image gif.gif]]
| [[Image:Image jpg.gif]]
| [[Image:Image zip.gif]]
| [[Image:Image wma.gif]]
| [[Image:Notype.gif]]
|}
=== [[Common use icons]]  ===
:{| class="CGTable" border="1"
| [[Image:Create.gif]]
| [[Image:CreateAndClose.gif]]
| [[Image:Delete.gif]]
| [[Image:Add.gif]]
| [[Image:Remove.gif]]
| [[Image:DeleteToRecycleBin.gif]]
| [[Image:RestoreBin.gif]]
| [[Image:DestroyBin.gif]]
| [[Image:DestroyBinAll.gif]]
| [[Image:Recycle bin.gif]]
| [[Image:Save.gif]]
| [[Image:SaveAndNew.gif]]
| [[Image:SaveAndClose.gif]]
| [[Image:SaveAndView.gif]]
| [[Image:SaveAs.gif]]
| [[Image:SaveAsTemplate.gif]]
| [[Image:Open.gif]]
| [[Image:OpenTemplate.gif]]
| [[Image:Viewoption.gif]]
| [[Image:SetDefault.gif]]
|-
| [[Image:Favorite.gif]]
| [[Image:View.gif]]
| [[Image:Cut.gif]]
| [[Image:Edit.gif]]
| [[Image:Editall.gif]]
| [[Image:Copy.gif]]
| [[Image:Paste.gif]]
| [[Image:Close.gif]]
| [[Image:Cancel.png]]
| [[Image:OK.gif]]
| [[Image:No.gif]]
| [[Image:Yes.gif]]
| [[Image:Search.gif]]
| [[Image:Find all.gif]]
| [[Image:Replace.gif]]
| [[Image:Replace all.gif]]
| [[Image:Refresh.gif]]
| [[Image:SortDescending.gif]]
| [[Image:SortAscending.gif]]
| [[Image:Run.gif]]
|-
| [[Image:Generate.gif]]
| [[Image:Download.gif]]
| [[Image:Upload.gif]]
| [[Image:Submit.gif]]
| [[Image:Submit close.gif]]
| [[Image:Submit new.gif]]
| [[Image:Undo.gif]]
| [[Image:ResetAll.gif]]
| [[Image:Redo.gif]]
| [[Image:AddImage.gif]]
| [[Image:AddAttachment.gif]]
| [[Image:Hyperlink.gif]]
| [[Image:Image.gif]]
| [[Image:Excel.gif]]
| [[Image:Pdf.gif]]
| [[Image:Powerpoint.gif]]
| [[Image:Lock.gif]]
| [[Image:Execute.gif]]
| [[Image:Constant.gif]]
| [[Image:TimeRegistration.gif]]
|-
| [[Image:Register_external_hour.gif]]
| [[Image:Chart.gif]]
| [[Image:Myportal.gif]]
| [[Image:Import.gif]]
| [[Image:Export.gif]]
| [[Image:Import export.gif]]
| [[Image:Help.gif]]
| [[Image:Tip.gif]]
| [[Image:Information.gif]]
| [[Image:Printer.gif]]
| [[Image:Data gear.gif]]
| [[Image:Schedule.png]]
| [[Image:Calculator.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:Check checked.gif]]
| [[Image:Check none.gif]]
| [[Image:grant1.png]]
| [[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]]
|}
=== [[Navigation icons|Navigation &amp; Expand/Collapse icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:NavigateFirst.gif]]
| [[Image:NavigateLeft.gif]]
| [[Image:NavigateRight.gif]]
| [[Image:NavigateLast.gif]]
| [[Image:Navigate_left2.gif]]
| [[Image:Navigate_right2.gif]]
|-
| [[Image:Navigatesave_beginning.gif]]
| [[Image:Navigatesave_left.gif]]
| [[Image:Navigatesave_left2.gif]]
| [[Image:Navigatesave_right2.gif]]
| [[Image:Navigatesave_right.gif]]
| [[Image:Navigatesave_end.gif]]
|-
| [[Image:UpArrow.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]]
|
|
|
|
|}
=== [[Editor icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Subscript.gif]]
| [[Image:Superscript.gif]]
| [[Image:Bullets.gif]]
| [[Image:Numberlist.gif]]
| [[Image:Table.gif]]
| [[Image:Aligncenter.gif]]
| [[Image:Alignleft.gif]]
| [[Image:Alignright.gif]]
| [[Image:Justify.gif]]
| [[Image:Top.gif]]
| [[Image:Bottom.gif]]
| [[Image:Middle.gif]]
| [[Image:Bold.gif]]
| [[Image:Italic.gif]]
| [[Image:Underline.gif]]
| [[Image:Fontcolor.gif]]
| [[Image:Bringfoward.gif]]
| [[Image:Sendbackward.gif]]
| [[Image:Bringtofront.gif]]
| [[Image:Sendtoback.gif]]
|-
| [[Image:Insertbreakpage.gif]]
| [[Image:Insertchart.gif]]
| [[Image:Insertpagelink.gif]]
| [[Image:Insert-Text-Box-1.gif]]
| [[Image:Newpagebefore.gif]]
| [[Image:Newpageafter.gif]]
| [[Image:Deletecurrentpage.gif]]
| [[Image:AddRow.gif]]
| [[Image:DeleteRow.gif]]
| [[Image:AddColumn.gif]]
| [[Image:DeleteColumn.gif]]
| [[Image:Moverowdown.gif‎]]
| [[Image:Moverowup.gif]]
| [[Image:Movecolumnleft.gif‎]]
| [[Image:Movecolumnright.gif‎]]
|
|
|
|
|
|}
=== [[Questionnaire icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Project questionnaire.gif]]
| [[Image:Project questionnaire complete.gif]]
| [[Image:Questionnaire.gif]]
| [[Image:Questionnaire template.gif]]
| [[Image:Questionnaire layout.gif]]
| [[Image:Questionnaire layout template.gif]]
| [[Image:Questionnaire datagrid.gif]]
| [[Image:QuestionGroup.gif]]
| [[Image:Questionnaire paper.gif]]
| [[Image:ViewSampleSize.gif]]
| [[Image:ViewFilter.gif]]
| [[Image:ViewCross.gif]]
| [[Image:Viewproperties.gif]]
| [[Image:Viewconditions.gif]]
| [[Image:Moveto.gif]]
| [[Image:Interview manager.gif]]
| [[Image:Mask.gif]]
| [[Image:Disable.gif]]
| [[Image:Lock information.png]]
| [[Image:Target.gif]]
|-
| [[Image:testlink.gif]]
| [[Image:Reset layout.gif]]
| [[Image:Resetdelete.gif]]
| [[Image:Translate.gif]]
| [[Image:Start.gif]]
| [[Image:Pause.gif]]
| [[Image:Checksyntax.gif]]
| [[Image:Analyze.gif]]
| [[Image:Insertflash.gif]]
| [[Image:ExportPerformance_plain.gif]]
|
|
|
|
|
|
|
|
|
|
|}
=== [[Report icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Report.gif]]
| [[Image:Report template.gif]]
| [[Image:ViewReport.gif]]
| [[Image:Dashboard.gif]]
| [[Image:Spreadsheet.gif]]
| [[Image:Monitor.gif]]
| [[Image:Diagram.gif]]
| [[Image:GotoSite.gif]]
| [[Image:Customize.gif]]
| [[Image:Random.gif]]
| [[Image:Selection view.gif]]
| [[Image:Chartstyle.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]]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|}
=== [[Communicator icons]]  ===
:{| border="1" class="CGTable"
|-
| [[Image:Mail.gif]]
| [[Image:Bulkmail.gif]]
| [[Image:InformMessage.gif]]
| [[Image:SentMail.gif]]
| [[Image:SendAllMails.gif]]
| [[Image:SaveAndSentLater.gif]]
| [[Image:SavetoDraft.gif]]
| [[Image:Reply.gif]]
| [[Image:ReplyAll.gif]]
| [[Image:ReadMail.gif]]
| [[Image:UnreadMail.gif]]
| [[Image:MailAccount.gif]]
| [[Image:Sms.gif]]
| [[Image:Bulksms.gif]]
| [[Image:InvalidAddress_plain.gif]]
| [[Image:SendProperty.gif]]
| [[Image:Move.gif]]
| [[Image:StartQuestionnaire.gif]]
| [[Image:SendingMail.gif]]
| [[Image:Informer_plain.gif]]
|-
| [[Image:Highpriority.GIF]]
| [[Image:Priority.gif]]
| [[Image:Normalpriority.gif]]
| [[Image:Lowpriority.GIF]]
| [[Image:Rules.gif]]
| [[Image:Keys.png]]
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|}
=== [[CGScript icons]] ===
:{| class="CGTable" border="1"
|-
| [[Image:CGScriptPrompt.gif]]
| [[Image:CGScriptRun.gif]]
| [[Image:CGScriptRunAll.gif]]
|}
=== [[Coding job icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Script.gif]]
| [[Image:Exclude.gif]]
| [[Image:Include.gif]]
| [[Image:Reuse.gif]]
| [[Image:ClearAll.gif]]
|}
=== [[Data icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Datacache.gif]]
| [[Image:DeleteCache.gif]]
| [[Image:GenerateCache.gif]]
| [[Image:Rename.gif]]
| [[Image:Autofix.gif]]
| [[Image:Editaxis.gif]]
| [[Image:Weight.gif]]
| [[Image:Rebuild.png]]
|}
=== [[Expression icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Larger.gif]]
| [[Image:LargerEqual.gif]]
| [[Image:Smaller.gif]]
| [[Image:SmallerEqual.gif]]
| [[Image:Equal.gif]]
| [[Image:NotEqual.gif]]
| [[Image:And.gif]]
| [[Image:Or.gif]]
| [[Image:Inside.gif]]
| [[Image:Value.gif]]
|}
=== [[Task icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Approve.gif]]
| [[Image:Disapprove.gif]]
| [[Image:Finish.gif]]
| [[Image:Accept.gif]]
| [[Image:Reassign.gif]]
| [[Image:Merge.gif]]
| [[Image:SelectMerge.gif]]
| [[Image:generatetask.gif]]
|}
=== [[Webshop icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Transaction.gif]]
| [[Image:Addtransactionex.gif]]
| [[Image:Viewtransaction.gif]]
| [[Image:Updatebudget.gif]]
| [[Image:Pending.gif]]
| [[Image:Deliver.gif]]
| [[Image:Cashier approve.gif]]
| [[Image:Creditcard approve.gif]]
| [[Image:setAttribute_plain.gif]]
|}
=== [[Monitor icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Dashboard.gif]]
| [[Image:Document.gif]]
| [[Image:Document_attachment.gif]]
| [[Image:Earth2.gif]]
| [[Image:Folder.gif]]
| [[Image:DiagramCross.gif]]
| [[Image:DiagramStandard.gif‎]]
| [[Image:DiagramTracking.gif]]
| [[Image:DiagramCampaign.gif]]
| [[Image:DiagramComparison.gif]]
| [[Image:PowerPoint.gif]]
| [[Image:Presentation.gif]]
|}
=== [[CATI & Asterisk icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Phone.gif]]
| [[Image:Speaker.gif]]
| [[Image:Check.gif]]
| [[Image:custom.gif]]
| [[Image:Play.png]]
| [[Image:Record.gif]]
| [[Image:Stop.gif]]
| [[Image:Overhear.gif]]
|-
| [[Image:DisconnectPhone.gif]]
| [[Image:RingPhone.gif]]
| [[Image:SleepPhone.gif]]
| [[Image:TalkingPhone.gif]]
|
|
|
|}
=== [[System announcement icons]]  ===
:{| class="CGTable" border="1"
|-
| [[Image:Error.png]]
| [[Image:Warning.png]]
| [[Image:Check.png]]
|}
== Order of Icons  ==
To give CatGlobe a uniform Look &amp; 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.&nbsp;
When we have limited space the icons with * may appear with no text labeling.
=== Some samples  ===
[[Image:OrderofIcon.gif]]
=== Order of icons  ===
#Create *
#Add *
#Save * <br>''--------(Separator)''
#Save and next
#Save and new
#Save and close <br>''--------(Separator)''
#Edit *
#Open *
#Open Template
#Copy * <br>''--------(Separator)''
#Search *
#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 *
#Remove *
#Close *<br>''--------(Separator)''
#Pager control
#No of Records field


[[Category:LnF_guidelines]]
[[Category:LnF_guidelines]]

Latest revision as of 03:57, 18 October 2013

<accesscontrol>Main:MyGroup</accesscontrol>

Icon LnF

  1. Icons should have two states; normal and mouse over. The mouse over effect is a 3d shadow effect!
  2. All tool bar icons need 3 images specified; normal, hover, and disable!
  3. 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.
  4. Tool tips must be added to all buttons that does not have text on the button.
  5. 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".
  6. There can never be buttons after a Pager Control in a tool bar.
  7. 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!
  8. 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!
  9. 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
  10. Groups of tool bar buttons are separated by a vertical separator
  11. Do not show two icons button separators next to each other - if e.g. no buttons with access in between!
  12. 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

Navigation & Expand/Collapse 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

  1. Create *
  2. Add *
  3. Save *
    --------(Separator)
  4. Save and next
  5. Save and new
  6. Save and close
    --------(Separator)
  7. Edit *
  8. Open *
  9. Open Template
  10. Copy *
    --------(Separator)
  11. Search *
  12. Refresh *
    --------(Separator)
  13. Backward *
  14. Forward *
    --------(Separator)
  15. Print resource information *
  16. Send resource information *
    --------(Separator)
  17. Other specified Icons
    --------(Separator)
  18. Delete *
  19. Remove *
  20. Close *
    --------(Separator)
  21. Pager control
  22. No of Records field
Retrieved from "https://testwiki.catglobe.com/index.php?title=Icon_LnF&oldid=24775"