Difference between revisions of "Icon LnF"

From Catglobe Wiki
Jump to: navigation, search
m (→‎What icons to use)
m (→‎Editor icons)
Line 165: Line 165:
 
|}
 
|}
  
−
=== Editor icons  ===
+
=== [[Editor icons]] ===
  
−
{| border="1" class="CGTable"
+
:{| border="1" class="CGTable"
−
|-
 
−
! Icon
 
−
! Function
 
 
|-
 
|-
 
| [[Image:Subscript.gif]]  
 
| [[Image:Subscript.gif]]  
−
| Subscript
 
−
|-
 
 
| [[Image:Superscript.gif]]  
 
| [[Image:Superscript.gif]]  
−
| Superscript
 
−
|-
 
 
| [[Image:Bullets.gif]]  
 
| [[Image:Bullets.gif]]  
−
| Bullets
 
−
|-
 
 
| [[Image:Numberlist.gif]]  
 
| [[Image:Numberlist.gif]]  
−
| Number list
 
−
|-
 
 
| [[Image:Table.gif]]  
 
| [[Image:Table.gif]]  
−
| Table
 
−
|-
 
 
| [[Image:Aligncenter.gif]]  
 
| [[Image:Aligncenter.gif]]  
−
| Align center
 
−
|-
 
 
| [[Image:Alignleft.gif]]  
 
| [[Image:Alignleft.gif]]  
−
| Align left
 
−
|-
 
 
| [[Image:Alignright.gif]]  
 
| [[Image:Alignright.gif]]  
−
| Align right
 
−
|-
 
 
| [[Image:Justify.gif]]  
 
| [[Image:Justify.gif]]  
−
| Justify
 
−
|-
 
 
| [[Image:Top.gif]]  
 
| [[Image:Top.gif]]  
−
| Top
 
−
|-
 
 
| [[Image:Bottom.gif]]  
 
| [[Image:Bottom.gif]]  
−
| Bottom
 
−
|-
 
 
| [[Image:Middle.gif]]  
 
| [[Image:Middle.gif]]  
−
| Middle
 
−
|-
 
 
| [[Image:Bold.gif]]  
 
| [[Image:Bold.gif]]  
−
| Bold
 
−
|-
 
 
| [[Image:Italic.gif]]  
 
| [[Image:Italic.gif]]  
−
| Italic
 
−
|-
 
 
| [[Image:Underline.gif]]  
 
| [[Image:Underline.gif]]  
−
| Underline
 
−
|-
 
 
| [[Image:Fontcolor.gif]]  
 
| [[Image:Fontcolor.gif]]  
−
| Font color
 
−
|-
 
 
| [[Image:Bringfoward.gif]]  
 
| [[Image:Bringfoward.gif]]  
−
| Bring forward
 
−
|-
 
 
| [[Image:Sendbackward.gif]]  
 
| [[Image:Sendbackward.gif]]  
−
| Send backward
 
−
|-
 
 
| [[Image:Bringtofront.gif]]  
 
| [[Image:Bringtofront.gif]]  
−
| Bring to front
+
| [[Image:Sendtoback.gif]]
−
|-
+
|-  
−
| [[Image:Sendtoback.gif]]  
 
−
| Send to back
 
−
|-
 
 
| [[Image:Insertbreakpage.gif]]  
 
| [[Image:Insertbreakpage.gif]]  
−
| Insert break page
 
−
|-
 
 
| [[Image:Insertchart.gif]]  
 
| [[Image:Insertchart.gif]]  
−
| Insert chart
 
−
|-
 
 
| [[Image:Insertflash.gif]]  
 
| [[Image:Insertflash.gif]]  
−
| Insert flash
 
−
|-
 
 
| [[Image:Insertpagelink.gif]]  
 
| [[Image:Insertpagelink.gif]]  
−
| Insert pagelink
 
−
|-
 
 
| [[Image:Insert-Text-Box-1.gif]]  
 
| [[Image:Insert-Text-Box-1.gif]]  
−
| Insert text box
 
−
|-
 
 
| [[Image:Newpagebefore.gif]]  
 
| [[Image:Newpagebefore.gif]]  
−
| New page before
 
−
|-
 
 
| [[Image:Newpageafter.gif]]  
 
| [[Image:Newpageafter.gif]]  
−
| New page after
 
−
|-
 
 
| [[Image:Deletecurrentpage.gif]]  
 
| [[Image:Deletecurrentpage.gif]]  
−
| Delete current page
 
−
|-
 
 
| [[Image:AddRow.gif]]  
 
| [[Image:AddRow.gif]]  
−
| Add row
 
−
|-
 
 
| [[Image:DeleteRow.gif]]  
 
| [[Image:DeleteRow.gif]]  
−
| Delete row
 
−
|-
 
 
| [[Image:AddColumn.gif]]  
 
| [[Image:AddColumn.gif]]  
−
| Add column
 
−
|-
 
 
| [[Image:DeleteColumn.gif]]  
 
| [[Image:DeleteColumn.gif]]  
−
| Delete column
 
−
|-
 
 
| [[Image:MoveDown.gif]]  
 
| [[Image:MoveDown.gif]]  
−
| Move down
 
−
|-
 
 
| [[Image:MoveUp.gif]]  
 
| [[Image:MoveUp.gif]]  
−
| Move up
 
−
|-
 
 
| [[Image:MoveLeft.gif]]  
 
| [[Image:MoveLeft.gif]]  
−
| Move left
 
−
|-
 
 
| [[Image:MoveRight.gif]]  
 
| [[Image:MoveRight.gif]]  
−
| Move right
 
−
|-
 
 
| [[Image:Viewresult.gif]]  
 
| [[Image:Viewresult.gif]]  
−
| View result
 
−
|-
 
 
| [[Image:Copychart.gif]]  
 
| [[Image:Copychart.gif]]  
−
| Copy diagram
 
−
|-
 
 
| [[Image:Sum.gif]]  
 
| [[Image:Sum.gif]]  
−
| Sum
 
−
|-
 
 
| [[Image:Expression.gif]]  
 
| [[Image:Expression.gif]]  
−
| Expression
 
 
|}
 
|}
  

Revision as of 11:07, 9 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 Journal.gif
DeleteJournal.gif ViewHistory.gif

Navigation 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

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
Document chart.gif Document chart
Checksyntax.gif Checksyntax

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
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


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

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

Informed icons

Icon Used for
Error.png Error
Warning.png Warning
Check.png Check

Ungroup icons

Icon Used for
OK.gif Ok
Inherit.gif Inherit
Analyze.gif Analyze
Application.gif Application
Chart.gif Chart
Select.gif Select
Select Some.gif Select some
Select All.gif Select all
Merge.gif Merge
SelectMerge.gif SelectMerge
Viewoption.gif Viewoption
Check checked.gif Checked
Check none.gif Unchecked
Check.gif Check
Checks.gif Checks
Execute.gif Execute
Layoutxml.gif Save to xml
Providerxml.gif Provider xml
Keys.png Keys
Lock.gif Lock
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=3392"