Difference between revisions of "Icon LnF"

From Catglobe Wiki
Jump to: navigation, search
m
m
Line 1: Line 1:
== Icon LnF ==
+
== 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 "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 Appendix B 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 Appendix B.  
#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.
  

Revision as of 12:00, 6 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 Appendix B 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 Appendix B.
  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

Project tree icons

Icon Used for
Company.gif Company
Group.gif Group
Project.gif Project
Project complete.gif Completed project
Folder.gif Folder
Task.gif Task
Task complete.gif Completed task
Taskset.gif Task set
Workflow.gif Workflow
Communicator template.gif Communicator template
Attachment.gif Attachment
DCS.gif DCS
DCS export.gif DCS export
Product.gif Product
Shift.gif Shift
Translationjob.gif Translation job
Codingjob.gif Coding job

Common icons

Icon Function
Create.gif Create
CreateAndClose.gif Create and close
Delete.gif Delete (for good)
Add.gif Add
Remove.gif Remove
DeleteToRecycleBin.gif Delete to Recycle bin
RestoreBin.gif Restore
DestroyBin.gif Destroy
DestroyBinAll.gif Mass destroy
Recycle bin.gif Recycle bin
Save.gif Save
SaveAndNew.gif Save and new, Save and next
SaveAndClose.gif Save and close
SaveAndView.gif Save and view
SaveAs.gif Save as
SaveAsTemplate.gif Save as template
Open.gif Open
OpenTemplate.gif Open template
Cut.gif Cut
Edit.gif Edit
Copy.gif Copy
Paste.gif Paste
Close.gif Close
Cancel.png Cancel
Search.gif Search
Find all.gif Search all
Replace.gif Replace
Replace all.gif Search and replace
Refresh.gif Refresh
SortDescending.gif Sort Descending
SortAscending.gif Sort Ascending
Run.gif Run, Execute
Generate.gif Generate
Download.gif Download
Upload.gif Upload
Submit.gif Submit
Submit close.gif Submit and close
Submit new.gif Submit and new
View.gif View, Preview
Access.gif Access
Approve.gif Approve
Disapprove.gif Disapprove
SetDefault.gif Set default
Finish.gif Apply, Finish
Undo.gif Undo, Reset
ResetAll.gif Reset all
Redo.gif Redo
AddImage.gif Add image
AddAttachment.gif Add attachment
Hyperlink.gif Hyperlink
Image.gif Image
Resource-access.gif Resource access
Navigation.gif Navigation access
Excel.gif Export to Excel
Pdf.gif Export to Pdf
Powerpoint.gif Export to Power point
Favorite.gif Add to favorites
Constant.gif Constants
TimeRegistration.gif Add time registration, date time
Generatetask.gif Generate task
Accept.gif Accept
Import.gif Import
Export.gif Export
Import export.gif Import and export
User.gif User
AddUser.png Add user
Edit2.gif Edit user details
Reassign.gif Reassign
Protectdate.gif Protect date
Account.gif Group, Account
Add group.gif Add group
Help.gif Help
Tip.gif Tip
Information.gif Information
Printer.gif Print
Data gear.gif Mass update
Journal.gif Journal viewer
DeleteJournal.gif Delete journal
ViewHistory.gif View history

Navigation icons

Icon Function
NavigateFirst.gif Navigate to the first
NavigateLast.gif Navigate to the last
NavigateLeft.gif Navigate to the left, previous
NavigateRight.gif Navigate to the right, next


Icon Function
UpArrow.gif collapse view area
DownArrow.gif expand view area

Editor icons

Icon Function
Subscript.gif Subscript
Superscript.gif Superscript
Bullets.gif Bullets
Numberlist.gif Number list
Table.gif Table
Aligncenter.gif Align center
Alignleft.gif Align left
Alignright.gif Align right
Justify.gif Justify
Top.gif Top
Bottom.gif Bottom
Middle.gif Middle
Bold.gif Bold
Italic.gif Italic
Underline.gif Underline
Fontcolor.gif Font color
Bringfoward.gif Bring forward
Sendbackward.gif Send backward
Bringtofront.gif Bring to front
Sendtoback.gif Send to back
Insertbreakpage.gif Insert break page
Insertchart.gif Insert chart
Insertflash.gif Insert flash
Insertpagelink.gif Insert pagelink
Insert-Text-Box-1.gif Insert text box
Newpagebefore.gif New page before
Newpageafter.gif New page after
Deletecurrentpage.gif Delete current page
AddRow.gif Add row
DeleteRow.gif Delete row
AddColumn.gif Add column
DeleteColumn.gif Delete column
MoveDown.gif Move down
MoveUp.gif Move up
MoveLeft.gif Move left
MoveRight.gif Move right
Viewresult.gif View result
Copychart.gif Copy diagram
Sum.gif Sum
Expression.gif Expression

Questionnaire icons

Icon Function
Project questionnaire.gif Project questionnaire
Project questionnaire complete.gif Completed Project questionnaire
Add project questionnaire.gif Add Project questionnaire
Questionnaire.gif Questionnaire
Questionnaire template.gif Questionnaire template
Questionnaire layout.gif Questionnaire layout
Questionnaire layout template.gif Questionnaire layout template
Questionnaire datagrid.gif Questionnaire data grid
QuestionGroup.gif Question group
Questionnaire paper.gif Questionnaire paper
ViewSampleSize.gif View sample size
ViewFilter.gif View filter
ViewCross.gif View cross
Viewproperties.gif View properties
Viewconditions.gif Viewconditions.gif
GenerateTestSheet.gif Generate test sheet
Moveto.gif Move respondent
Interview manager.gif Interview manager
Mask.gif Add mask, Change mode 
Disable.gif Disable
Lock information.png Access code
Target.gif Target
Reset layout.gif Reset layout
Resetdelete.gif Reset and delete data
Translate.gif Translation
Start.gif Start
Pause.gif Pause

Report icons

Icon Function
Report.gif Report
Report template.gif Report template
ViewReport.gif View report
Dashboard.gif Dash board
Spreadsheet.gif Spreadsheet
Monitor.gif Monitor
Diagram.gif Diagram
GotoSite.gif Go to site
Customize.gif Customize
Random.gif Random
Selection view.gif Set view area
Chartstyle.gif Chart style

Mail & SMS icons

Icon Function
Mail.gif Mail
Bulkmail.gif Bulk mail
InformMessage.gif Informer message
SentMail.gif Send mail
SendAllMails.gif Send all mails
SaveAndSentLater.gif Save and sent later
ReadMail.gif Read mail
UnreadMail.gif Unread mail
MailAccount.gif Mail account
SavetoDraft.gif Save to draft
Reply.gif Reply
ReplyAll.gif Reply to all
Sms.gif SMS
Bulksms.gif Bulk SMS
InvalidAddress plain.gif Invalid Address
SendProperty.gif Send property, resource information
Sendrequest.gif Send request

Coding & Script & DCS icons

Icon Function
Script.gif Script
CGScriptPrompt.gif CGScript Prompt
CGScriptRun.gif CGScript run
CGScriptRunAll.gif CGScript run batch
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
Exclude.gif Exclude
Include.gif Include
Reuse.gif Reuse coding task
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

Webshop icons

Icon Function
Transaction.gif Transaction
Addtransactionex.gif Add transaction
Closetransaction.gif Close transation
Viewtransaction.gif View transaction
Updatebudget.gif Update budget
Pending.gif Pending
DeletePackage.gif Delete package
Deliver.gif Deliver
Cashier approve.gif Cashier
Creditcard approve.gif Credit card

CATI & Asterisk icons

Icon Used for
Play.png Play
Record.gif Record
Phone.gif Phone
Speaker.gif Speaker
DisconnectPhone.gif Disconnect phone
RingPhone.gif Ring phone
SleepPhone.gif Sleeping phone
TalkingPhone.gif Talking phone

Ungroup icons

Icon Used for
Calculator.gif Calculator
Merge.gif Merge
Inherit.gif Inherit
Analyze.gif Analyze
Schedule.png Schedule.png
Application.gif Application
Chart.gif Chart
Rowcheck.gif Rowcheck.gif
Diagram text.gif Diagram text
Document chart.gif Document_chart.gif
Select.gif Select
Select Some.gif Select some
Select All.gif Select all
SelectMerge.gif SelectMerge.gif
Viewoption.gif Viewoption.gif
Check.gif Check
Check checked.gif Checked
Check none.gif Unchecked
Checks.gif Checks.gif
Checksyntax.gif Checksyntax.gif
Error.png Error
OK.gif Ok
Warning.png Warning
Execute.gif Execute
Layoutxml.gif Save to xml
Providerxml.gif Provider xml
Keys.png Keys
Lock.gif Lock
Move.gif Move
Move2folder.gif Move to folder
Myportal.gif My portal
Rename.gif Rename.gif
Resize.gif Resize.gif
Rules.gif Rules.gif
Satellite dish.png Satellite_dish.png
ViewSlideshow plain.gif View slideshow

Attachment type icons

Icon Function
Image access.gif Access file
Image excel.gif Excel file
Image word.gif Word file
Image ppt.gif Powerpoint file
Image visio.gif Visio file
Image pdf.gif Pdf file
Image html.gif Web page html file
Image xml.gif XML type
Image text.gif Normal text type
Image bmp.gif Bmp type
Image png.gif Png type
Image gif.gif Gif type
Image jpg.gif Jpeg type
Image zip.gif Zip type
Image wma.gif Wma file
Notype.gif Unknown type

Order of Icons/Buttons

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