Difference between revisions of "Icon LnF"

From Catglobe Wiki
Jump to: navigation, search
(→‎Ungroup icons)
Line 15: Line 15:
  
 
== What icons to use  ==
 
== What icons to use  ==
−
Icons is grouped based on the their function or number of use in each modules. Click on each of them to see more details.
+
 
 +
Icons is grouped based on the their function or number of use in each modules. Click on each of them to see more details.  
 +
 
 
=== [[Project tree icons]]  ===
 
=== [[Project tree icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Company.gif]]  
 
| [[Image:Company.gif]]  
Line 38: Line 41:
 
| [[Image:Codingjob.gif]]
 
| [[Image:Codingjob.gif]]
 
|}
 
|}
 +
  
 
=== [[Attachment type icons]]  ===
 
=== [[Attachment type icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Image access.gif]]  
 
| [[Image:Image access.gif]]  
Line 58: Line 63:
 
| [[Image:Image zip.gif]]  
 
| [[Image:Image zip.gif]]  
 
| [[Image:Image wma.gif]]  
 
| [[Image:Image wma.gif]]  
−
| [[Image:Notype.gif]]  
+
| [[Image:Notype.gif]]
 
|}
 
|}
 +
  
 
=== [[Common use icons]]  ===
 
=== [[Common use icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 +
|-
 
| [[Image:Create.gif]]  
 
| [[Image:Create.gif]]  
 
| [[Image:CreateAndClose.gif]]  
 
| [[Image:CreateAndClose.gif]]  
Line 83: Line 91:
 
| [[Image:OpenTemplate.gif]]  
 
| [[Image:OpenTemplate.gif]]  
 
| [[Image:Cut.gif]]  
 
| [[Image:Cut.gif]]  
−
| [[Image:Edit.gif]]  
+
| [[Image:Edit.gif]]
 
|-
 
|-
 
| [[Image:Copy.gif]]  
 
| [[Image:Copy.gif]]  
Line 104: Line 112:
 
| [[Image:Submit new.gif]]  
 
| [[Image:Submit new.gif]]  
 
| [[Image:View.gif]]  
 
| [[Image:View.gif]]  
−
| [[Image:Constant.gif]]  
+
| [[Image:Constant.gif]]
 
|-
 
|-
 
| [[Image:Approve.gif]]  
 
| [[Image:Approve.gif]]  
Line 111: Line 119:
 
| [[Image:Finish.gif]]  
 
| [[Image:Finish.gif]]  
 
| [[Image:Undo.gif]]  
 
| [[Image:Undo.gif]]  
−
| [[Image:resetAll.gif]]  
+
| [[Image:ResetAll.gif]]  
 
| [[Image:Redo.gif]]  
 
| [[Image:Redo.gif]]  
 
| [[Image:AddImage.gif]]  
 
| [[Image:AddImage.gif]]  
Line 125: Line 133:
 
| [[Image:TimeRegistration.gif]]  
 
| [[Image:TimeRegistration.gif]]  
 
| [[Image:Generatetask.gif]]  
 
| [[Image:Generatetask.gif]]  
−
| [[Image:Accept.gif]]  
+
| [[Image:Accept.gif]]
 
|-
 
|-
 
| [[Image:Import.gif]]  
 
| [[Image:Import.gif]]  
Line 146: Line 154:
 
| [[Image:Calculator.gif]]  
 
| [[Image:Calculator.gif]]  
 
| [[Image:ViewSlideshow plain.gif]]  
 
| [[Image:ViewSlideshow plain.gif]]  
−
| [[Image:OK.gif]]  
+
| [[Image:OK.gif]]
 
|-
 
|-
 
| [[Image:Journal.gif]]  
 
| [[Image:Journal.gif]]  
 
| [[Image:DeleteJournal.gif]]  
 
| [[Image:DeleteJournal.gif]]  
−
| [[Image:ViewHistory.gif]]  
+
| [[Image:ViewHistory.gif]]
 
|}
 
|}
  
−
=== [[Navigation icons | Navigation & Expand/Collapse icons]]  ===
 
  
−
:{| border="1" class="CGTable"
+
=== [[Navigation icons|Navigation & Expand/Collapse icons]]  ===
 +
 
 +
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:NavigateFirst.gif]]  
 
| [[Image:NavigateFirst.gif]]  
 
| [[Image:NavigateLast.gif]]  
 
| [[Image:NavigateLast.gif]]  
 
| [[Image:NavigateLeft.gif]]  
 
| [[Image:NavigateLeft.gif]]  
−
| [[Image:NavigateRight.gif]]  
+
| [[Image:NavigateRight.gif]]
 
|-
 
|-
−
| [[Image:upArrow.gif]]  
+
| [[Image:UpArrow.gif]]  
−
| [[Image:downArrow.gif]]  
+
| [[Image:DownArrow.gif]]
 
|}
 
|}
 +
  
 
=== [[Editor icons]]  ===
 
=== [[Editor icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Subscript.gif]]  
 
| [[Image:Subscript.gif]]  
Line 190: Line 202:
 
| [[Image:Bringtofront.gif]]  
 
| [[Image:Bringtofront.gif]]  
 
| [[Image:Sendtoback.gif]]
 
| [[Image:Sendtoback.gif]]
−
|-  
+
|-
 
| [[Image:Insertbreakpage.gif]]  
 
| [[Image:Insertbreakpage.gif]]  
 
| [[Image:Insertchart.gif]]  
 
| [[Image:Insertchart.gif]]  
Line 210: Line 222:
 
| [[Image:Copychart.gif]]  
 
| [[Image:Copychart.gif]]  
 
| [[Image:Sum.gif]]  
 
| [[Image:Sum.gif]]  
−
| [[Image:Expression.gif]]  
+
| [[Image:Expression.gif]]
 
|}
 
|}
 +
  
 
=== [[Questionnaire icons]]  ===
 
=== [[Questionnaire icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Project questionnaire.gif]]  
 
| [[Image:Project questionnaire.gif]]  
Line 236: Line 250:
 
| [[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:Lock information.png]]  
Line 244: Line 258:
 
| [[Image:Translate.gif]]  
 
| [[Image:Translate.gif]]  
 
| [[Image:Start.gif]]  
 
| [[Image:Start.gif]]  
−
| [[Image:Pause.gif]]  
+
| [[Image:Pause.gif]]
 
|}
 
|}
 +
  
 
=== [[Report icons]]  ===
 
=== [[Report icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Report.gif]]  
 
| [[Image:Report.gif]]  
Line 264: Line 280:
 
| [[Image:Chartstyle.gif]]  
 
| [[Image:Chartstyle.gif]]  
 
| [[Image:Document chart.gif]]  
 
| [[Image:Document chart.gif]]  
−
| [[Image:Checksyntax.gif]]  
+
| [[Image:Checksyntax.gif]]
 
|}
 
|}
 +
  
 
=== [[Communicator icons]]  ===
 
=== [[Communicator icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Mail.gif]]  
 
| [[Image:Mail.gif]]  
Line 275: Line 293:
 
| [[Image:InformMessage.gif]]  
 
| [[Image:InformMessage.gif]]  
 
| [[Image:MailAccount.gif]]  
 
| [[Image:MailAccount.gif]]  
−
| [[Image:SavetoDraft.gif]]
+
| [[Image:SavetoDraft.gif]]  
 
| [[Image:SentMail.gif]]  
 
| [[Image:SentMail.gif]]  
 
| [[Image:SendAllMails.gif]]  
 
| [[Image:SendAllMails.gif]]  
Line 283: Line 301:
 
| [[Image:ReadMail.gif]]  
 
| [[Image:ReadMail.gif]]  
 
| [[Image:UnreadMail.gif]]  
 
| [[Image:UnreadMail.gif]]  
−
| [[Image:InvalidAddress_plain.gif]]  
+
| [[Image:InvalidAddress plain.gif]]  
 
| [[Image:Sms.gif]]  
 
| [[Image:Sms.gif]]  
 
| [[Image:Bulksms.gif]]  
 
| [[Image:Bulksms.gif]]  
 
| [[Image:SendProperty.gif]]  
 
| [[Image:SendProperty.gif]]  
−
| [[Image:Sendrequest.gif]]  
+
| [[Image:Sendrequest.gif]]
 
|}
 
|}
  
−
=== CGScript icons===
 
  
−
{| border="1" class="CGTable"
+
=== CGScript icons ===
 +
 
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
! Icon  
 
! Icon  
Line 307: Line 326:
 
|}
 
|}
  
−
=== Coding job icons ===  
+
=== Coding job icons ===
  
−
{| border="1" class="CGTable"
+
{| class="CGTable" border="1"
 
|-
 
|-
 
! Icon  
 
! Icon  
Line 327: Line 346:
 
|}
 
|}
  
−
=== Data cache icons ===  
+
=== Data cache icons ===
  
−
{| border="1" class="CGTable"
+
{| class="CGTable" border="1"
 
|-
 
|-
 
! Icon  
 
! Icon  
Line 356: Line 375:
 
|}
 
|}
  
−
=== Expression icons ===  
+
=== Expression icons ===
  
−
{| border="1" class="CGTable"
+
{| class="CGTable" border="1"
 
|-
 
|-
 
! Icon  
 
! Icon  
Line 392: Line 411:
 
| [[Image:Value.gif]]  
 
| [[Image:Value.gif]]  
 
| Value
 
| Value
 +
|}
 +
 +
=== Task icons  ===
  
 +
{| class="CGTable" border="1"
 +
|-
 +
! Icon
 +
! Function
 +
|-
 +
| [[Image:Approve.gif]]
 +
| Approve
 +
|-
 +
| [[Image:Disapprove.gif]]
 +
| Disapprove
 +
|-
 +
| [[Image:Finish.gif]]
 +
| Apply, Finish
 +
|-
 +
| [[Image:Accept.gif]]
 +
| Accept
 +
|-
 +
| [[Image:Reassign.gif]]
 +
| Reassign
 +
|-
 +
| [[Image:Merge.gif]]
 +
| Merge
 
|}
 
|}
  
 
=== [[Webshop icons]]  ===
 
=== [[Webshop icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Transaction.gif]]  
 
| [[Image:Transaction.gif]]  
Line 408: Line 453:
 
| [[Image:Deliver.gif]]  
 
| [[Image:Deliver.gif]]  
 
| [[Image:Cashier approve.gif]]  
 
| [[Image:Cashier approve.gif]]  
−
| [[Image:Creditcard approve.gif]]  
+
| [[Image:Creditcard approve.gif]]
 
|}
 
|}
  
−
=== [[CATI & Asterisk icons]]  ===
 
  
−
:{| border="1" class="CGTable"
+
=== [[CATI & Asterisk icons]]  ===
 +
 
 +
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Play.png]]  
 
| [[Image:Play.png]]  
Line 422: Line 469:
 
| [[Image:RingPhone.gif]]  
 
| [[Image:RingPhone.gif]]  
 
| [[Image:SleepPhone.gif]]  
 
| [[Image:SleepPhone.gif]]  
−
| [[Image:TalkingPhone.gif]]  
+
| [[Image:TalkingPhone.gif]]
 
|}
 
|}
 +
  
 
=== [[System announcement icons]]  ===
 
=== [[System announcement icons]]  ===
  
−
:{| border="1" class="CGTable"
+
:
 +
{| class="CGTable" border="1"
 
|-
 
|-
 
| [[Image:Error.png]]  
 
| [[Image:Error.png]]  
 
| [[Image:Warning.png]]  
 
| [[Image:Warning.png]]  
−
| [[Image:check.png]]  
+
| [[Image:Check.png]]
 
|}
 
|}
 +
  
 
=== Ungroup icons  ===
 
=== Ungroup icons  ===
  
−
{| border="1" class="VerticalTable"
+
{| class="VerticalTable" border="1"
 
|-
 
|-
 
! Icon  
 
! Icon  
Line 461: Line 511:
 
| [[Image:SelectMerge.gif]]  
 
| [[Image:SelectMerge.gif]]  
 
| SelectMerge
 
| SelectMerge
−
 
 
|-
 
|-
 
| [[Image:Check.gif]]  
 
| [[Image:Check.gif]]  
Line 497: Line 546:
 
|}
 
|}
  
−
== Order of 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. 
+
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.
+
When we have limited space the icons with * may appear with no text labeling.  
  
−
Order of icons:
+
Order of icons:  
  
−
#Add *
+
#Add *  
−
#New *
+
#New *  
−
#Save *
+
#Save *  
−
#Save and next
+
#Save and next  
−
#Save and new
+
#Save and new  
−
#Save and close
+
#Save and close  
−
#Open *
+
#Open *  
−
#Edit *
+
#Edit *  
−
#Open Template
+
#Open Template  
−
#Sort up *
+
#Sort up *  
−
#Sort down *
+
#Sort down *  
−
#Copy *<br>''Separator''
+
#Copy *<br>''Separator''  
−
#Search *
+
#Search *  
−
#Refresh *<br>''Separator''
+
#Refresh *<br>''Separator''  
−
#Run
+
#Run  
−
#Download
+
#Download  
−
#Go to Site
+
#Go to Site  
−
#View<br>''Separator''
+
#View<br>''Separator''  
−
#Access
+
#Access  
−
#Navigation Access<br>''Separator''
+
#Navigation Access<br>''Separator''  
−
#Export to Excel *
+
#Export to Excel *  
−
#Add to Favorites *
+
#Add to Favorites *  
−
#Info *
+
#Info *  
−
#Constants
+
#Constants  
−
#Other Specialty Icons<br>''Separator''
+
#Other Specialty Icons<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]]

Revision as of 08:44, 10 February 2009

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 of them to see more details.

Project tree icons

Company.gif Group.gif Project.gif Project complete.gif Folder.gif Task.gif Task complete.gif Taskset.gif Workflow.gif Communicator template.gif Attachment.gif DCS.gif DCS export.gif Product.gif Shift.gif Translationjob.gif Codingjob.gif


Attachment type icons

Image access.gif Image excel.gif Image word.gif Image ppt.gif Image visio.gif Image pdf.gif Image html.gif Image xml.gif Image text.gif Image bmp.gif Image png.gif Image gif.gif Image jpg.gif Image zip.gif Image wma.gif Notype.gif


Common use icons

Create.gif CreateAndClose.gif Delete.gif Add.gif Remove.gif DeleteToRecycleBin.gif RestoreBin.gif DestroyBin.gif DestroyBinAll.gif Recycle bin.gif Save.gif SaveAndNew.gif SaveAndClose.gif SaveAndView.gif SaveAs.gif SaveAsTemplate.gif Open.gif OpenTemplate.gif Cut.gif Edit.gif
Copy.gif Paste.gif Close.gif Cancel.png Search.gif Find all.gif Replace.gif Replace all.gif Refresh.gif SortDescending.gif SortAscending.gif Run.gif Generate.gif Download.gif Upload.gif Submit.gif Submit close.gif Submit new.gif View.gif Constant.gif
Approve.gif Disapprove.gif SetDefault.gif Finish.gif Undo.gif ResetAll.gif Redo.gif AddImage.gif AddAttachment.gif Hyperlink.gif Image.gif Resource-access.gif Navigation.gif Excel.gif Pdf.gif Powerpoint.gif Favorite.gif TimeRegistration.gif Generatetask.gif Accept.gif
Import.gif Export.gif Import export.gif User.gif AddUser.png Edit2.gif Reassign.gif Protectdate.gif Access.gif Account.gif Add group.gif Help.gif Tip.gif Information.gif Printer.gif Data gear.gif Schedule.png Calculator.gif ViewSlideshow plain.gif OK.gif
Journal.gif DeleteJournal.gif ViewHistory.gif


Navigation & Expand/Collapse icons

NavigateFirst.gif NavigateLast.gif NavigateLeft.gif NavigateRight.gif
UpArrow.gif DownArrow.gif


Editor icons

Subscript.gif Superscript.gif Bullets.gif Numberlist.gif Table.gif Aligncenter.gif Alignleft.gif Alignright.gif Justify.gif Top.gif Bottom.gif Middle.gif Bold.gif Italic.gif Underline.gif Fontcolor.gif Bringfoward.gif Sendbackward.gif Bringtofront.gif Sendtoback.gif
Insertbreakpage.gif Insertchart.gif Insertflash.gif Insertpagelink.gif Insert-Text-Box-1.gif Newpagebefore.gif Newpageafter.gif Deletecurrentpage.gif AddRow.gif DeleteRow.gif AddColumn.gif DeleteColumn.gif MoveDown.gif MoveUp.gif MoveLeft.gif MoveRight.gif Viewresult.gif Copychart.gif Sum.gif Expression.gif


Questionnaire icons

Project questionnaire.gif Project questionnaire complete.gif Add project questionnaire.gif Questionnaire.gif Questionnaire template.gif Questionnaire layout.gif Questionnaire layout template.gif Questionnaire datagrid.gif QuestionGroup.gif Questionnaire paper.gif ViewSampleSize.gif ViewFilter.gif ViewCross.gif Viewproperties.gif Viewconditions.gif GenerateTestSheet.gif Moveto.gif Interview manager.gif Mask.gif Disable.gif
Lock information.png Target.gif Reset layout.gif Resetdelete.gif Translate.gif Start.gif Pause.gif


Report icons

Report.gif Report template.gif ViewReport.gif Dashboard.gif Spreadsheet.gif Monitor.gif Diagram.gif GotoSite.gif Customize.gif Random.gif Selection view.gif Chartstyle.gif Document chart.gif Checksyntax.gif


Communicator icons

Mail.gif Bulkmail.gif InformMessage.gif MailAccount.gif SavetoDraft.gif SentMail.gif SendAllMails.gif SaveAndSentLater.gif Reply.gif ReplyAll.gif ReadMail.gif UnreadMail.gif InvalidAddress plain.gif Sms.gif Bulksms.gif SendProperty.gif Sendrequest.gif


CGScript icons

Icon Function
CGScriptPrompt.gif CGScript Prompt
CGScriptRun.gif CGScript run
CGScriptRunAll.gif CGScript run batch

Coding job icons

Icon Function
Script.gif Code a Coding job
Exclude.gif Exclude
Include.gif Include
Reuse.gif Reuse coding task

Data cache icons

Icon Function
Datacache.gif Data cache
DeleteCache.gif Delete cache
GenerateCache.gif Generate cache
Autofix.gif Auto fix
Editaxis.gif Edit axis
Weight.gif Weight
Rebuild.png Rebuild

Expression icons

Icon Function
And.gif And
Or.gif Or
Larger.gif Larger
LargerEqual.gif Larger equal
Smaller.gif Smaller
SmallerEqual.gif Smaller equal
Equal.gif Equal
NotEqual.gif Not equal
Inside.gif Inside
Value.gif Value

Task icons

Icon Function
Approve.gif Approve
Disapprove.gif Disapprove
Finish.gif Apply, Finish
Accept.gif Accept
Reassign.gif Reassign
Merge.gif Merge

Webshop icons

Transaction.gif Addtransactionex.gif Closetransaction.gif Viewtransaction.gif Updatebudget.gif Pending.gif DeletePackage.gif Deliver.gif Cashier approve.gif Creditcard approve.gif


CATI & Asterisk icons

Play.png Record.gif Phone.gif Speaker.gif DisconnectPhone.gif RingPhone.gif SleepPhone.gif TalkingPhone.gif


System announcement icons

Error.png Warning.png Check.png


Ungroup icons

Icon Used for
Analyze.gif Analyze
Application.gif Application
Chart.gif Chart
Select.gif Select
Select Some.gif Select some
Select All.gif Select all
SelectMerge.gif SelectMerge
Check.gif Check
Checks.gif Checks
Execute.gif Execute
Providerxml.gif Provider xml
Keys.png Keys
Move.gif Move
Myportal.gif My portal
Rename.gif Rename
Resize.gif Resize
Rules.gif Rules
Satellite dish.png Satellite dish

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.

Order of icons:

  1. Add *
  2. New *
  3. Save *
  4. Save and next
  5. Save and new
  6. Save and close
  7. Open *
  8. Edit *
  9. Open Template
  10. Sort up *
  11. Sort down *
  12. Copy *
    Separator
  13. Search *
  14. Refresh *
    Separator
  15. Run
  16. Download
  17. Go to Site
  18. View
    Separator
  19. Access
  20. Navigation Access
    Separator
  21. Export to Excel *
  22. Add to Favorites *
  23. Info *
  24. Constants
  25. Other Specialty Icons
    Separator
  26. Delete *
  27. Remove *
  28. Close *
    Separator
  29. Pager control
  30. No of Records field
Retrieved from "http://wiki.catglobe.com/index.php?title=Icon_LnF&oldid=3490"