Korbs/Squire
0
Fork 0
mirror of https://github.com/fastmail/Squire.git synced 2025-01-09 08:20:08 -05:00
Code Issues Activity

Update: Renamed files to Squire-UI added Drop

Browse source
This commit is contained in:
Matthew Borden 2014-07-07 15:05:50 +10:00
parent 3180323136
commit 52a3460680
12 changed files with 2060 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
Demo.html
View file

@ -6,25 +6,29 @@
<title>HTML Editor Test</title> <title>HTML Editor Test</title>
<style type="text/css" media="screen"> <style type="text/css" media="screen">
body { body {
position: relative; position:relative;
margin: 0 auto; margin:0 auto;
padding: 50px; padding:50px;
width: 540px; width:540px;
font: 400 14px/1.24 helvetica, arial, sans-serif; font:400 14px/1.24 helvetica,arial,sans-serif;
text-shadow: 0 1px 0 white; text-shadow:0 1px 0 #fff;
}
h1 {
font-size: 1.95em;
} }
iframe { iframe {
border: 1px solid #888; border: none;
} }
h1 {
font-size:1.95em
}
span { span {
cursor: pointer; cursor:pointer;
text-decoration: underline; text-decoration:underline
} }
p { p {
margin: 5px 0; margin:5px 0
} }
</style> </style>
<!--[if IE 8]> <!--[if IE 8]>
@ -49,7 +53,7 @@
<header> <header>
<p>This is a really simple demo, with the most trivial of UI integrations</p> <p>This is a really simple demo, with the most trivial of UI integrations</p>
<p> <p>
<span id="bold">Bold</span> <span id="bold2">Bold</span>
<span id="removeBold">Unbold</span> <span id="removeBold">Unbold</span>
<span id="italic">Italic</span> <span id="italic">Italic</span>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
@ -80,7 +84,7 @@
</p> </p>
</header> </header>
<iframe src="build/header.html" width="500" height="80"></iframe> <iframe src="build/Squire-UI.html" width="500" height="80"></iframe>
<iframe src="build/document.html" onload="top.editor=this.contentWindow.editor" width="500" height="500"></iframe> <iframe src="build/document.html" onload="top.editor=this.contentWindow.editor" width="500" height="500"></iframe>

10
Makefile
View file

@ -5,15 +5,19 @@ all: build
clean: clean:
rm -rf build rm -rf build
ui: build/header.html build/ui.css build/assets ui: build/Squire-UI.html build/Squire-UI.css build/Squire-UI.js build/assets
build: build/ie8.js build/squire.js build/document.html build: build/ie8.js build/squire.js build/document.html
build/header.html: ui/header.html build/Squire-UI.html: ui/Squire-UI.html
mkdir -p $(@D) mkdir -p $(@D)
cp $^ $@ cp $^ $@
build/ui.css: ui/ui.css build/Squire-UI.css: ui/Squire-UI.css
mkdir -p $(@D)
cat $^ >$@
build/Squire-UI.js: ui/Squire-UI.js
mkdir -p $(@D) mkdir -p $(@D)
cat $^ >$@ cat $^ >$@

0
ui/ui.css → build/Squire-UI.css
View file

5
ui/header.html → build/Squire-UI.html
View file

@ -1,8 +1,10 @@
<html> <html>
<head> <head>
<link href="ui.css" rel="stylesheet" type="text/css" type="text/css" rel="stylesheet" /> <link href="Squire-UI.css" rel="stylesheet" type="text/css" type="text/css" rel="stylesheet" />
<link href="assets/font-awesome/font-awesome.min.css" type="text/css" rel="stylesheet" /> <link href="assets/font-awesome/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="assets/drop/drop-theme-arrows.css" />
<script src="assets/drop/drop.min.js" type="text/javascript"></script>
</head> </head>
<body> <body>
@ -24,6 +26,7 @@
<div class="item"><i class="fa fa-undo flip"></i></div> <div class="item"><i class="fa fa-undo flip"></i></div>
</div> </div>
</header> </header>
<script src="Squire-UI.js" type="text/javascript"></script>
</body> </body>
</html> </html>

9
build/Squire-UI.js Normal file
View file

@ -0,0 +1,9 @@
(function() {
var drop;
drop = new Drop({
target: document.querySelector('#bold'),
content: 'Welcome to the future!',
position: 'bottom left',
openOn: 'click'
});
})();

120
build/assets/drop/drop-theme-arrows.css Executable file
View file

@ -0,0 +1,120 @@
.drop-element, .drop-element:after, .drop-element:before, .drop-element *, .drop-element *:after, .drop-element *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
.drop-element {
position: absolute;
display: none; }
.drop-element.drop-open {
display: block; }
.drop-element.drop-theme-arrows {
max-width: 100%;
max-height: 100%; }
.drop-element.drop-theme-arrows .drop-content {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
position: relative;
font-family: inherit;
background: #eeeeee;
color: #444444;
padding: 1em;
font-size: 1.1em;
line-height: 1.5em;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
-moz-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); }
.drop-element.drop-theme-arrows .drop-content:before {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border-color: transparent;
border-width: 16px;
border-style: solid; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content {
margin-bottom: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-center .drop-content:before {
top: 100%;
left: 50%;
margin-left: -16px;
border-top-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content {
margin-top: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-center .drop-content:before {
bottom: 100%;
left: 50%;
margin-left: -16px;
border-bottom-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content {
margin-right: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-right.drop-element-attached-middle .drop-content:before {
left: 100%;
top: 50%;
margin-top: -16px;
border-left-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content {
margin-left: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-left.drop-element-attached-middle .drop-content:before {
right: 100%;
top: 50%;
margin-top: -16px;
border-right-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content {
margin-top: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-bottom .drop-content:before {
bottom: 100%;
left: 16px;
border-bottom-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content {
margin-top: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-bottom .drop-content:before {
bottom: 100%;
right: 16px;
border-bottom-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content {
margin-bottom: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-top .drop-content:before {
top: 100%;
left: 16px;
border-top-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content {
margin-bottom: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-top .drop-content:before {
top: 100%;
right: 16px;
border-top-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-right.drop-target-attached-left .drop-content:before {
top: 16px;
left: 100%;
border-left-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-top.drop-element-attached-left.drop-target-attached-right .drop-content:before {
top: 16px;
right: 100%;
border-right-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content {
margin-right: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-right.drop-target-attached-left .drop-content:before {
bottom: 16px;
left: 100%;
border-left-color: #eeeeee; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content {
margin-left: 16px; }
.drop-element.drop-theme-arrows.drop-element-attached-bottom.drop-element-attached-left.drop-target-attached-right .drop-content:before {
bottom: 16px;
right: 100%;
border-right-color: #eeeeee; }

1814
build/assets/drop/drop.js Executable file
View file

File diff suppressed because it is too large Load diff

2
build/assets/drop/drop.min.js vendored Executable file
View file

File diff suppressed because one or more lines are too long

2
build/header.html
View file

@ -3,6 +3,8 @@
<head> <head>
<link href="ui.css" rel="stylesheet" type="text/css" type="text/css" rel="stylesheet" /> <link href="ui.css" rel="stylesheet" type="text/css" type="text/css" rel="stylesheet" />
<link href="assets/font-awesome/font-awesome.min.css" type="text/css" rel="stylesheet" /> <link href="assets/font-awesome/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="assets/drop/drop-theme-arrows.css" />
<script src="assets/drop/drop.min.js" type="text/javascript"></script>
</head> </head>
<body> <body>

41
ui/Squire-UI.css Normal file
View file

@ -0,0 +1,41 @@
.menu .item {
color:#000;
float:left;
background:#FFF;
padding:10px;
border-left:1px #EEE solid;
-webkit-font-smoothing:subpixel-antialiased
}
.menu .group {
border-radius:3px;
display:inline-block;
border:1px #EEE solid;
margin:5px
}
.menu .group .item .flip {
-ms-transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-moz-transform:rotateY(180deg);
transform:rotateY(180deg)
}
.menu {
text-align:center;
-webkit-touch-callout:none;
-webkit-user-select:none;
-khtml-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none
}
.menu .group .item:hover, .menu .item:first-child:hover {
border-left: 3px #55ACEE solid;
}
.menu .item:first-child {
border-left:none;
}

32
ui/Squire-UI.html Normal file
View file

@ -0,0 +1,32 @@
<html>
<head>
<link href="Squire-UI.css" rel="stylesheet" type="text/css" type="text/css" rel="stylesheet" />
<link href="assets/font-awesome/font-awesome.min.css" type="text/css" rel="stylesheet" />
<link rel="stylesheet" href="assets/drop/drop-theme-arrows.css" />
<script src="assets/drop/drop.min.js" type="text/javascript"></script>
</head>
<body>
<header class="menu" contenteditable="false">
<div class="group">
<div id="bold" class="item"><i class="fa fa-bold"></i></div>
<div class="item"><i class="fa fa-italic"></i></div>
<div class="item"><i class="fa fa-underline"></i></div>
<div class="item"><i class="fa fa-font"></i></div>
</div>
<div class="group">
<div class="item"><i class="fa fa-link"></i></div>
<div class="item"><i class="fa fa-quote-right"></i></div>
<div class="item"><i class="fa fa-list"></i></div>
<div class="item"><i class="fa fa-picture-o"></i></div>
</div>
<div class="group">
<div class="item"><i class="fa fa-undo"></i></div>
<div class="item"><i class="fa fa-undo flip"></i></div>
</div>
</header>
<script src="Squire-UI.js" type="text/javascript"></script>
</body>
</html>

9
ui/Squire-UI.js Normal file
View file

@ -0,0 +1,9 @@
(function() {
var drop;
drop = new Drop({
target: document.querySelector('#bold'),
content: 'Welcome to the future!',
position: 'bottom left',
openOn: 'click'
});
})();