confluence-web-components
Version:
Web components used to render common Confluence components in Connect add-ons.
90 lines (85 loc) • 3.44 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Confluence Web Components</title>
<link rel="stylesheet" href="https://aui-cdn.atlassian.com/aui-adg/5.9.8/css/aui.min.css" media="all" />
<link rel="stylesheet" href="https://aui-cdn.atlassian.com/aui-adg/5.9.8/css/aui-experimental.min.css" media="all" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script type="text/javascript" src="dist/confluence-web-components.js"></script>
<style>
#custom-1 .aui-dropdown2 { width:250px; }
#custom-1 ul .space-name { display:none; }
#custom-1 img { position:absolute; margin-left:-36px; }
#custom-1 .aui-icon-wait { margin-left:-30px; margin-top:7px; position:absolute; }
#custom-1 button { border:none; background-color:transparent; margin-left:-40px; position:absolute; outline:none; }
#custom-1 button:active { background:none; }
#custom-1 input {
width: 150px;
-webkit-transition: width 0.5s; /* Safari */
transition: width 0.5s;
outline:none;
width:150px
}
#custom-1 input:focus {
width:400px;
}
#custom-2 input {
color: #fff;
background-color: #666666;
border: 1px solid #990000;
border-top-right-radius:0;
border-bottom-right-radius:0;
border-right:none;
}
#custom-2 button {
background-color:#990000;
border:none;
border-top-left-radius:0;
border-bottom-left-radius:0;
}
#custom-2 .aui-button .aui-icon {
color:#fff;
}
</style>
</head>
<body>
<div id="page">
<header id="header" role="banner">
<nav class="aui-header" role="navigation">
<div class="aui-header-inner">
<div class="aui-header-primary">
<h1 id="logo" class="aui-header-logo aui-header-logo-confluence">
<a href="#">
<span class="aui-header-logo-device">Confluence</span>
</a>
</h1>
</div>
</div>
</nav>
</header>
<section id="content" role="main">
<header class="aui-page-header">
<div class="aui-page-header-inner">
<div class="aui-page-header-main">
<h1>Confluence Web Components</h1>
</div>
</div>
</header>
<div class="aui-page-panel">
<div class="aui-page-panel-inner">
<section class="aui-page-panel-content">
<h2>Default</h2>
<confluence-search></confluence-search>
<h2>Custom 1</h2>
<confluence-search placeholder="" id="custom-1"></confluence-search>
<h2>Colourful</h2>
<confluence-search placeholder="Find pages..." id="custom-2"></confluence-search>
</section>
</div>
</div>
</section>
</div>
</body>
</html>