Difference between revisions of "Icon LnF"

From Catglobe Wiki
Jump to: navigation, search
(→‎Ungroup icons)
 
(18 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 +
<accesscontrol>Main:MyGroup</accesscontrol>
 
== Icon LnF  ==
 
== Icon LnF  ==
  
Line 115: 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 120: 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 128: 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 149: Line 153:
 
| [[Image:Constant.gif]]  
 
| [[Image:Constant.gif]]  
 
| [[Image:TimeRegistration.gif]]
 
| [[Image:TimeRegistration.gif]]
 +
|-
 
| [[Image:Register_external_hour.gif]]
 
| [[Image:Register_external_hour.gif]]
 
| [[Image:Chart.gif]]  
 
| [[Image:Chart.gif]]  
 
| [[Image:Myportal.gif]]  
 
| [[Image:Myportal.gif]]  
−
|-
 
 
| [[Image:Import.gif]]  
 
| [[Image:Import.gif]]  
 
| [[Image:Export.gif]]  
 
| [[Image:Export.gif]]  
Line 167: Line 171:
 
| [[Image:Stable_plain.gif]]  
 
| [[Image:Stable_plain.gif]]  
 
| [[Image:UnStable_plain.gif]]  
 
| [[Image:UnStable_plain.gif]]  
−
|
+
| [[Image:SetFail_plain.gif‎]]
−
|
+
| [[Image:Properties.gif]]
−
|
 
−
|
 
 
|
 
|
 
|}
 
|}
Line 216: Line 218:
 
| [[Image:NavigateRight.gif]]
 
| [[Image:NavigateRight.gif]]
 
| [[Image:NavigateLast.gif]]  
 
| [[Image:NavigateLast.gif]]  
−
| [[Image:Navigate_top.gif]]
 
−
| [[Image:Navigate_bottom.gif]]
 
 
| [[Image:Navigate_left2.gif]]
 
| [[Image:Navigate_left2.gif]]
 
| [[Image:Navigate_right2.gif]]
 
| [[Image:Navigate_right2.gif]]
Line 227: Line 227:
 
| [[Image:Navigatesave_right.gif]]  
 
| [[Image:Navigatesave_right.gif]]  
 
| [[Image:Navigatesave_end.gif]]  
 
| [[Image:Navigatesave_end.gif]]  
−
|
 
−
|
 
 
|-
 
|-
 
| [[Image:UpArrow.gif]]  
 
| [[Image:UpArrow.gif]]  
Line 234: Line 232:
 
| [[Image:LeftArrow.gif]]  
 
| [[Image:LeftArrow.gif]]  
 
| [[Image:RightArrow.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 358: Line 375:
 
| [[Image:Providerxml.gif]]  
 
| [[Image:Providerxml.gif]]  
 
| [[Image:weekcross.gif]]  
 
| [[Image:weekcross.gif]]  
 +
|-
 +
| [[Image:addtoleft.gif]]
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 +
|
 
|}
 
|}
  
Line 424: Line 462:
 
| [[Image:Include.gif]]  
 
| [[Image:Include.gif]]  
 
| [[Image:Reuse.gif]]  
 
| [[Image:Reuse.gif]]  
 +
| [[Image:ClearAll.gif]]
 
|}
 
|}
  
Line 466: Line 505:
 
| [[Image:Reassign.gif]]  
 
| [[Image:Reassign.gif]]  
 
| [[Image:Merge.gif]]  
 
| [[Image:Merge.gif]]  
 +
| [[Image:SelectMerge.gif]]
 
| [[Image:generatetask.gif]]  
 
| [[Image:generatetask.gif]]  
 
|}
 
|}
Line 493: Line 533:
 
| [[Image:Earth2.gif]]  
 
| [[Image:Earth2.gif]]  
 
| [[Image:Folder.gif]]  
 
| [[Image:Folder.gif]]  
−
| [[Image:Line-chart.gif]]  
+
| [[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 502: Line 546:
 
:{| class="CGTable" border="1"
 
:{| class="CGTable" border="1"
 
|-
 
|-
−
| [[Image:Play.png]]
 
−
| [[Image:Record.gif]]
 
 
| [[Image:Phone.gif]]  
 
| [[Image:Phone.gif]]  
 
| [[Image:Speaker.gif]]  
 
| [[Image:Speaker.gif]]  
 
| [[Image:Check.gif]]
 
| [[Image:Check.gif]]
 
| [[Image:custom.gif]]  
 
| [[Image:custom.gif]]  
 +
| [[Image:Play.png]]
 +
| [[Image:Record.gif]]
 +
| [[Image:Stop.gif]]
 +
| [[Image:Overhear.gif]]
 
|-
 
|-
 
| [[Image:DisconnectPhone.gif]]  
 
| [[Image:DisconnectPhone.gif]]  
Line 513: Line 559:
 
| [[Image:SleepPhone.gif]]  
 
| [[Image:SleepPhone.gif]]  
 
| [[Image:TalkingPhone.gif]]
 
| [[Image:TalkingPhone.gif]]
 +
|
 +
|
 
|
 
|
 
|}
 
|}
Line 533: 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.  
  
−
Order of icons:
+
=== Some samples  ===
 +
 
 +
[[Image:OrderofIcon.gif]]
 +
 
 +
=== Order of icons ===
  
−
#Create *
+
#Create *  
 
#Add *  
 
#Add *  
−
#Save * <br>''Separator''
+
#Save * <br>''--------(Separator)''  
 
#Save and next  
 
#Save and next  
 
#Save and new  
 
#Save and new  
−
#Save and close <br>''Separator''
+
#Save and close <br>''--------(Separator)''  
−
#Open * <br>''Separator''
 
 
#Edit *  
 
#Edit *  
−
#Open Template <br>''Separator''
+
#Open *
 +
#Open Template  
 +
#Copy * <br>''--------(Separator)''
 +
#Search *
 +
#Refresh *<br>''--------(Separator)''  
 
#Backward *  
 
#Backward *  
−
#Forward *  
+
#Forward * <br>''--------(Separator)''  
−
#Print resource information
+
#Print resource information *
−
#Send resource information <br>''Separator''
+
#Send resource information * <br>''--------(Separator)''  
−
#Search *  
+
#'''<span style="color: rgb(255, 102, 0);">Other specified Icons</span>'''<br>''--------(Separator)''  
−
#Refresh *<br>''Separator''  
 
−
#Copy *<br>''Separator''  
 
−
#Run
 
−
#Download
 
−
#Go to Site
 
−
#View<br>''Separator''
 
−
#Access
 
−
#Navigation Access<br>''Separator''  
 
−
#Export to Excel *
 
−
#Add as Favorites *
 
−
#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]]

Latest revision as of 04: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

Company.gif Facility.gif User.gif Grouptree.gif Sitetree.gif Project.gif Project complete.gif Foldertree.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
Issue.gif Project questionnaire.gif Project questionnaire complete.gif Questionnaire.gif Questionnaire template.gif Questionnaire layout.gif Questionnaire layout template.gif Questionnaire paper.gif Sample request.gif Diagram.gif Monitor.gif Report.gif Report template.gif Spreadsheet.gif Dashboard.gif Nextpage.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 Viewoption.gif SetDefault.gif
Favorite.gif View.gif Cut.gif Edit.gif Editall.gif Copy.gif Paste.gif Close.gif Cancel.png OK.gif No.gif Yes.gif 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 Undo.gif ResetAll.gif Redo.gif AddImage.gif AddAttachment.gif Hyperlink.gif Image.gif Excel.gif Pdf.gif Powerpoint.gif Lock.gif Execute.gif Constant.gif TimeRegistration.gif
Register external hour.gif Chart.gif Myportal.gif Import.gif Export.gif Import export.gif Help.gif Tip.gif Information.gif Printer.gif Data gear.gif Schedule.png Calculator.gif ViewSlideshow plain.gif Layoutxml.gif Stable plain.gif UnStable plain.gif SetFail plain.gif Properties.gif

Access icons

Access.gif Resource-access.gif Navigation.gif Inherit.gif

Journal icons

Journal.gif Check checked.gif Check none.gif Grant1.png Ungrant1.png Select Some.gif Select All.gif

User icons

User.gif AddUser.png Edit2.gif Protectdate.gif Account.gif Group.gif Add group.gif View user plain.gif

Navigation & Expand/Collapse icons

NavigateFirst.gif NavigateLeft.gif NavigateRight.gif NavigateLast.gif Navigate left2.gif Navigate right2.gif
Navigatesave beginning.gif Navigatesave left.gif Navigatesave left2.gif Navigatesave right2.gif Navigatesave right.gif Navigatesave end.gif
UpArrow.gif DownArrow.gif LeftArrow.gif RightArrow.gif Hide.gif
Left circle.gif Right circle.gif Up circle.gif Down circle.gif
Up.gif Down.gif
Left.gif Right.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 Insertpagelink.gif Insert-Text-Box-1.gif Newpagebefore.gif Newpageafter.gif Deletecurrentpage.gif AddRow.gif DeleteRow.gif AddColumn.gif DeleteColumn.gif Moverowdown.gif Moverowup.gif Movecolumnleft.gif Movecolumnright.gif

Questionnaire icons

Project questionnaire.gif Project questionnaire complete.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 Moveto.gif Interview manager.gif Mask.gif Disable.gif Lock information.png Target.gif
Testlink.gif Reset layout.gif Resetdelete.gif Translate.gif Start.gif Pause.gif Checksyntax.gif Analyze.gif Insertflash.gif ExportPerformance plain.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 Viewresult.gif Copychart.gif Sum.gif Expression.gif Checks.gif Providerxml.gif Weekcross.gif
Addtoleft.gif

Communicator icons

Mail.gif Bulkmail.gif InformMessage.gif SentMail.gif SendAllMails.gif SaveAndSentLater.gif SavetoDraft.gif Reply.gif ReplyAll.gif ReadMail.gif UnreadMail.gif MailAccount.gif Sms.gif Bulksms.gif InvalidAddress plain.gif SendProperty.gif Move.gif StartQuestionnaire.gif SendingMail.gif Informer plain.gif
Highpriority.GIF Priority.gif Normalpriority.gif Lowpriority.GIF Rules.gif Keys.png

CGScript icons

CGScriptPrompt.gif CGScriptRun.gif CGScriptRunAll.gif

Coding job icons

Script.gif Exclude.gif Include.gif Reuse.gif ClearAll.gif

Data icons

Datacache.gif DeleteCache.gif GenerateCache.gif Rename.gif Autofix.gif Editaxis.gif Weight.gif Rebuild.png

Expression icons

Larger.gif LargerEqual.gif Smaller.gif SmallerEqual.gif Equal.gif NotEqual.gif And.gif Or.gif Inside.gif Value.gif

Task icons

Approve.gif Disapprove.gif Finish.gif Accept.gif Reassign.gif Merge.gif SelectMerge.gif Generatetask.gif

Webshop icons

Transaction.gif Addtransactionex.gif Viewtransaction.gif Updatebudget.gif Pending.gif Deliver.gif Cashier approve.gif Creditcard approve.gif SetAttribute plain.gif

Monitor icons

Dashboard.gif Document.gif Document attachment.gif Earth2.gif Folder.gif DiagramCross.gif DiagramStandard.gif DiagramTracking.gif DiagramCampaign.gif DiagramComparison.gif PowerPoint.gif Presentation.gif

CATI & Asterisk icons

Phone.gif Speaker.gif Check.gif Custom.gif Play.png Record.gif Stop.gif Overhear.gif
DisconnectPhone.gif RingPhone.gif SleepPhone.gif TalkingPhone.gif

System announcement icons

Error.png Warning.png Check.png


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

OrderofIcon.gif

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 "http://wiki.catglobe.com/index.php?title=Icon_LnF&oldid=24775"