Permalink
Browse files

Added more buttons, moved button position to css

  • Loading branch information...
1 parent 994e128 commit 5f52a8a89260afdc7cadacfefb0ccc9ae2ca855c @siteroller committed Jun 14, 2012
Showing with 125 additions and 21 deletions.
  1. +4 −4 Docs/demos/Full.htm
  2. +89 −11 Source/Assets/moorte.css
  3. +32 −6 Source/moorte.js
View
8 Docs/demos/Full.htm
@@ -22,17 +22,17 @@
});
</script>
<style type="text/css">
- span{display:inline-block; width:75px;}
- #comments,#name{ width:500px }
+ span.form{display:inline-block; width:75px;}
+ #comments,#name{ width:600px }
#comments{ height:300px; }
</style>
</head>
<body>
<form action="http://siteroller.net/test/submit/form.php?version=0.55&page=full" method="post">
- <span>Name: </span>
+ <span class='form'>Name: </span>
<input type="text" name="name" id="name">
<br><br>
- <span>History: </span>
+ <span class='form'>History: </span>
<input name="comments" id="comments">
<br><br>
<input type="submit" value="Please tell us what you think">
View
100 Source/Assets/moorte.css
@@ -87,7 +87,7 @@ div.MooRTE div.Sheva .rteSelected{ background-color:#bbb }
* background-color:#B9D2F8;background-image:-moz-linear-gradient(top, #c4e2fa 0, #fcfdfe 45px); background-image:-webkit-linear-gradient(top, #c4e2fa 0, #fcfdfe 45px);
* background-image:-ms-linear-gradient(top, #c4e2fa 0, #fcfdfe 45px); background-image:linear-gradient(top, #c4e2fa 0, #fcfdfe 45px); }*/
div.MooRTE div.Word10 { left:0; bottom:0; width:100%; }
-div.MooRTE div.Word10 span { height:20px; margin:1px; display:inline-block; }
+div.MooRTE div.Word10 span { height:20px; margin:1px; display:inline-block; width:auto;}
div.MooRTE div.Word10 input{ height:20px; width:100px; }
div.MooRTE div.Word10 a { display:inline-block;}
div.MooRTE div.Word10 >div.rteTop{ background-color:#fefefe; background-color:rgba(254,254,254,0.8); }
@@ -116,17 +116,18 @@ div.MooRTE>div.Word10 >div.rteRibbons>div{ padding:5px 0; }
div.MooRTE>div.Word10 >div.rteRibbons>div>div{ margin:5px 0; padding:1px; xpadding-top:1px; display:table-cell; border-right:3px solid #d1d1d1; vertical-align:top; -moz-border-right-colors: #fff #1d1d1 #fff; }
div.MooRTE>div.Word10 >div.rteRibbons>div>div>div{ height:56px; overflow:hidden;}
div.MooRTE div.Word10 >div.rteTop>a,
-div.MooRTE div.Word10 >div.rteRibbons>div a{ height:21px; width:22px; margin:4px 1px; text-decoration:none; vertical-align:top; background-image:url(images/Word03.gif); border-radius:3px;
- -moz-box-sizing: border-box; -webkit-moz-box-sizing: border-box; box-sizing: border-box;}
+div.MooRTE div.Word10 >div.rteRibbons>div a{ margin:4px 1px; text-decoration:none; vertical-align:top; border-radius:3px; height:21px; width:22px;
+ -moz-box-sizing: border-box; -webkit-moz-box-sizing: border-box; box-sizing: border-box; background-image:url(all.png); }
+
div.MooRTE div.Word10 >div.rteTop>a:hover,
div.MooRTE div.Word10 >div.rteTop>a.rteSelected:hover,
-div.MooRTE div.Word10 >div.rteRibbons>div a.rteSelected:hover,
-div.MooRTE div.Word10 >div.rteRibbons>div a:hover{ border:1px solid black; background-color:#FFB874;
- /*background-image:-moz-linear-gradient(top,#ffe387,#fff292); background-image:-ms-linear-gradient(top,#ffe387,#fff292);
- background-image:-webkit-linear-gradient(top,#ffe387,#fff292); background-image:linear-gradient(top,#ffe387,#fff292) */}
+/*div.MooRTE div.Word10 >div.rteRibbons>div a.rteSelected:hover,*/
+div.MooRTE div.Word10 >div.rteRibbons>div a:hover{ border:1px solid black; background-color:#FFB874;
+ background-image:url(all.png), -moz-linear-gradient(top,#ffe387,#fff292); background-image:url(all.png), -ms-linear-gradient(top,#ffe387,#fff292);
+ background-image:url(all.png), -webkit-linear-gradient(top,#ffe387,#fff292); background-image:url(all.png), linear-gradient(top,#ffe387,#fff292)}
div.MooRTE div.Word10 >div.rteTop>a.rteSelected,
div.MooRTE div.Word10 >div.rteRibbons>div a.rteSelected{ border:1px solid black; background-color:#FFB874 }
-div.MooRTE div.Word10 >div.rteRibbons>div>div:after{ text-align:center; color:rgb(155,155,155); font:14px/35px Times New Roman; height:25px; display:block; }
+div.MooRTE div.Word10 >div.rteRibbons>div>div:after{ text-align:center; color:rgb(155,155,155); font:12px/35px Arial; height:25px; display:block; }
div.MooRTE div.Word10 >div.rteRibbons div.rteFontGroup:after{content:'Font' }
div.MooRTE div.Word10 >div.rteRibbons div.rteParaGroup:after{content:'Paragraph'}
div.MooRTE div.Word10 >div.rteRibbons div.rteFileGroup:after{content:'File'}
@@ -139,19 +140,28 @@ div.MooRTE div.Word10 .rtefontsize,
div.MooRTE div.Word10 .rtefontdropdown{width:96px; height:19px; margin:4px 0 0 1px; overflow:hidden; border:1px solid #d4d6d9; font-size:12px; line-height:20px; display:inline-block;}
div.MooRTE div.Word10 .rtefontsize {width:41px; margin-left:0;}
-
div.MooRTE>div.Word10 div.rteRibbons div.rteStylGroup>div{ border:1px solid #c6cacd; overflow-x:hidden; overflow-y:auto; cursor:pointer; height:52px;}
div.MooRTE>div.Word10 .rteStylGroup>div>div{ border:1px solid #fff; float:left; margin:1px; }
div.MooRTE>div.Word10 .rteStylGroup>div>div.rteSelected,
div.MooRTE>div.Word10 .rteStylGroup>div>div:hover{ border-color: #c2a35c; border-radius:4px; linear-gradient("top", #fff 7px, #ffce65 75%, #fff) }
div.MooRTE>div.Word10 .rteStylGroup>div>div>div{ margin:3px; background-color:#fff; padding:3px; width:58px; overflow:hidden; }
div.MooRTE>div.Word10 .rteStylGroup>div>div>div:before{ line-height:24px; content:'Aa Bb Cc Dd Ee Ff Gg'; white-space:nowrap;}
div.MooRTE>div.Word10 .rteStylGroup>div>div>div:after{ text-align:center; display:block; color:#555; font:12px/12px Tahoma;}
+
div.MooRTE>div.Word10 .rteFlyouts > div{ cursor:pointer; position:absolute; background-color: #fff; border:#a7abaf solid 1px; border-radius:3px;}
-div.MooRTE>div.Word10 .rteFlyouts > div > div{ color:#3b3b3b; height:24px;}
-div.MooRTE>div.Word10 .rteFlyouts > div > div:before{content:' '; margin-right:5px; display:inline-block; border-right:#e2e4e7 solid 1px; height:100%; width:25px;}
+div.MooRTE>div.Word10 .rteFlyouts > div > div{ color:#3b3b3b; height:24px; padding-right:10px; border-radius:4px; width:150px; font:12px Arial;
+ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; -ms-box-sizing:border-box; box-sizing:border-box }
+div.MooRTE>div.Word10 .rteFlyouts > div > div:hover{ border:1px solid #999; }
+div.MooRTE>div.Word10 .rteFlyouts > div > div:before{content:' '; margin-right:5px; display:inline-block; border-right:#e2e4e7 solid 1px; height:100%; width:25px; vertical-align:middle;}
div.MooRTE>div.Word10 .rteFlyouts > div.rteSelected{display:block; position:absolute; }
+div.MooRTE>div.Word10 .flyout{ position:relative; padding-right:10px; vertical-align:top; cursor:pointer; margin:4px 1px;}
+div.MooRTE>div.Word10 .flyout:hover{background-color:#FFB874; border:1px solid;
+ background-image:-moz-linear-gradient(top,#ffe387,#fff292); background-image:-ms-linear-gradient(top,#ffe387,#fff292);
+ background-image:-webkit-linear-gradient(top,#ffe387,#fff292); background-image:linear-gradient(top,#ffe387,#fff292)}
+div.MooRTE>div.Word10 span.flyout>a{margin: 0 !important; border-width:0 1px 0 0 !important; border-radius:0 !important;}
+div.MooRTE>div.Word10 .flyout:after {width:0; height:0; line-height:0; border:solid transparent 3px; border-top:3px solid #000; border-width:3px 3px 0; content:''; position:absolute; top:8px; right:3px; }
+
xdiv.MooRTE>div.Word10 .rteStylGroup>div>div>div{ margin:3px; height:42px; width:58px; }
div.MooRTE>div.Word10 .f_h1 { color:#365f91; font:bold 14pt Cambria; }
@@ -210,6 +220,74 @@ div.MooRTE>div.Word10 .f_calibri:after { content:'Calibri (Body)'; font-family:C
div.MooRTE>div.Word10 .f_tahoma:after { content:'Tahoma (Body)'; font-family:Tahoma; }
div.MooRTE>div.Word10 .f_comic:after { content:'Comic (Body)'; font-family:Comic Sans; }
+.rtewordtemplate{background-position:0px 0px}
+.rteworddocument{background-position:-36px 0px}
+.rteword2003doc{background-position:0px -35px}
+.rtestylechange{background-position:-36px -35px}
+.rtesend{background-position:-72px 0px}
+.rtesaveas1{background-position:-72px -35px}
+.rtesaveas{background-position:0px -70px}
+.rtesave{background-position:-36px -70px}
+.rtepublish{background-position:-72px -70px}
+.rteprintquick{background-position:-108px 0px}
+.rteprintpreview{background-position:-108px -35px}
+.rteprint1{background-position:-108px -70px}
+.rteprint{background-position:0px -105px}
+.rteprepare{background-position:-36px -105px}
+.rtepaste1{background-position:-72px -105px}
+.rtepaste{background-position:-108px -105px}
+.rteopen{background-position:-144px 0px}
+.rtenewdocument{background-position:-144px -35px}
+.rtefind{background-position:-144px -70px}
+.rteclose{background-position:-144px -105px}
+.rteaddons{background-position:0px -140px}
+.rteinsertunorderedlist{background-position:-36px -140px}
+.rteinsertorderedlist{background-position:-140px -175px}
+.rteundo{background-position:-56px -140px}
+.rteunderline{background-position:-76px -140px}
+.rtethemefont{background-position:-96px -140px}
+.rtejustifyright{background-position:-1px -140px}
+.rtejustifyleft{background-position:-136px -140px}
+.rtejustifyfull{background-position:-156px -140px}
+.rtejustifycenter{background-position:-180px 0px}
+.rtesuperscript{background-position:-180px -19px}
+.rtesubscript{background-position:-180px -38px}
+.rtestyleset{background-position:-180px -57px}
+.rtestyle{background-position:-180px -76px}
+.rtestrikethrough{background-position:-180px -95px}
+.rtesort{background-position:-180px -114px}
+.rteselect{background-position:-180px -133px}
+.rtesave{background-position:-180px -152px}
+.rtereplace{background-position:0px -175px}
+.rteprintquick{background-position:-20px -175px}
+.rtepastespecial{background-position:-40px -175px}
+.rtepastelink{background-position:-60px -175px}
+.rtepaste{background-position:-80px -175px}
+.rteparagraphspacing{background-position:-100px -175px}
+.rtepageblank{background-position:-120px -175px}
+.rteoptions{background-position:-0px -175px}
+.rteopen{background-position:-180px -175px}
+.rtemultilevellist{background-position:-200px 0px}
+.rteitalic{background-position:-200px -19px}
+.rteinvisiblechars{background-position:-200px -38px}
+.rteindent{background-position:-200px -57px}
+.rteoutdent{background-position:-200px -95px}
+.rtehilight{background-position:-200px -114px}
+.rtegoto{background-position:-200px -133px}
+.rteincreasefontsize{background-position:-200px -152px}
+.rtedecreasefontsize{background-position:-200px -171px}
+.rtefontcolor{background-position:0px -194px}
+.rtefill{background-position:-20px -194px}
+.rteexit{background-position:-40px -194px}
+.rteremoveformat{background-position:-60px -194px}
+.rtecut{background-position:-80px -194px}
+.rtecopyformat{background-position:-100px -194px}
+.rtecopy{background-position:-120px -194px}
+.rtechangecase{background-position:-140px -194px; width:32px !important;}
+.rteborderbottom{background-position:-0px -194px}
+.rtebold{background-position:-180px -194px}
+
+
/* End Word10 */
/* Begin Plugins */
View
38 Source/moorte.js
@@ -737,16 +737,40 @@ MooRTE.Elements =
, onClick:{tabs: ['RibbonTabs', 'HomeRibbon', MooRTE.Groups.RibbonOpts]}
}
, HomeRibbon: { tag:'div', onLoad:{addTab:['RibbonTabs', 'HomeTab']}, contains:
- 'div.rteFontGroup:[div:[fontdropdown,fontsize,increasefontsize,decreasefontsize,changecase,bold,italic,underline,strikethrough,subscript,superscript]]\
- ,div.rteParaGroup:[div:[Lists,indent,outdent,justifyleft,justifycenter,justifyright,justifyfull]]\
+ 'div.rteFontGroup:[div:[fontdropdown,fontsize,increasefontsize,decreasefontsize,changecase\
+ ,span.divide,removeformat,span.divide,bold,italic,span.flyout:underline,strikethrough\
+ ,subscript,superscript,span.divide,span.flyout:style,span.flyout:hilight,span.flyout:fontcolor]]\
+ ,div.rteParaGroup:[div:[ULists:insertunorderedlist,OLists:insertorderedlist,indent,outdent,justifyleft,justifycenter,justifyright,justifyfull]]\
,div.rteStylGroup:[div:[div.f_normal.rteSelected:div,div.f_noSpacing:div,div.f_h1:div,div.f_h2:div,div.f_h3:div]]'
}
, FileTab :{ text:'File', onClick:{tabs: ['RibbonTabs', 'FileRibbon', MooRTE.Groups.RibbonOpts]} }
, FileRibbon :{ tag:'div', contains:'div.rteFileGroup:[div:[superscript]]' }
// Groups (Flyouts)
, Justify :{img:06, 'class':'Flyout rteSelected', contains:'div.Flyout:[justifyleft,justifycenter,justifyright,justifyfull]' }
- , Lists :{img:14, 'class':'Flyout', contains:'div.Flyout:[insertorderedlist,insertunorderedlist]' }
+ , Lists_old :{img:14, 'class':'Flyout', contains:'div.Flyout:[insertorderedlist,insertunorderedlist]' }
+ , OLists: {'class':'flyout', tag:'span', onClick: //function(){alert(3)}
+ {tabs:
+ ['flyouts', 'div.listFlyouts:[insertorderedlist,insertunorderedlist]'
+ , {place:'Flyouts', events:{show:
+ function(flyout){
+ var pos = this.getCoordinates(this.getParent('.MooRTE'));
+ flyout.content.setPosition({x:pos.left, y:pos.height + pos.top + 1});
+ }
+ }}
+ ]}
+ }
+ , ULists: {'class':'flyout', tag:'span', onClick:
+ {tabs:
+ ['flyouts', 'div.listFlyouts:[insertorderedlist,insertunorderedlist]'
+ , {place:'Flyouts', events:{show:
+ function(flyout){
+ var pos = this.getCoordinates(this.getParent('.MooRTE'));
+ flyout.content.setPosition({x:pos.left, y:pos.height + pos.top + 1});
+ }
+ }}
+ ]}
+ }
, Indents :{img:11, 'class':'Flyout', contains:'div.Flyout:[indent,outdent]' }
// Buttons
@@ -969,9 +993,9 @@ MooRTE.Elements =
}
, fontdropdown:{ tag:'div', contains:'div.f_calibri,div.f_tahoma,div.f_comic'}
- , changecase: { img: 23, onClick:
+ , changecase: { img: 23, 'class':'flyout', onClick:
{tabs:
- ['flyouts', 'div.caseFlyouts:[sentencecase,lowercase,uppercase,wordcase]'
+ ['flyouts', 'div.caseFlyouts:[sentencecase,lowercase,uppercase,wordcase,togglecase]'
, {place:'Flyouts', events:{show:
function(flyout){
var pos = this.getCoordinates(this.getParent('.MooRTE'));
@@ -1003,7 +1027,9 @@ MooRTE.Elements =
var empty = (Browser.Engine.gecko ? 'hilitecolor' : 'backcolor');
}
}
-
+ , style: {}
+ , hilight: {}
+ , fontcolor: {}
// Generic
, Toolbar :{ tag:'div', title:'' } // Could use div.Toolbar, defined seperately for clarity.
};

0 comments on commit 5f52a8a

Please sign in to comment.